Co to jest "nowe" słowo kluczowe w JavaScript?

Załóżmy, że masz tę funkcję:

var Foo = function(){
  this.A = 1;
  this.B = 2;
};

Jeśli wywołasz to jako samodzielną funkcję w ten sposób:

Foo();

Wykonanie tej funkcji spowoduje dodanie dwóch właściwości do obiektu window (A i B). Dodaje ją do window, Ponieważ {[3] } jest obiektem, który wywołał funkcję, gdy ją wykonujesz w ten sposób, a this w funkcji jest obiektem, który wywołał funkcję. Przynajmniej w Javascript.

Teraz nazwij to tak z new:

var bar = new Foo();

Co się dzieje kiedy dodajesz new do wywołania funkcji, tworzony jest nowy obiekt (tylko var bar = new Object()), a {[8] } wewnątrz funkcji wskazuje na nowy Object, który właśnie utworzyłeś, zamiast na obiekt, który wywołał funkcję. Tak więc bar jest teraz obiektem o właściwościach A i B. Każda funkcja może być konstruktorem, po prostu nie zawsze ma to sens.

Oprócz odpowiedzi Daniela Howarda, oto co new robi (a przynajmniej wydaje się robić):

function New(func) {
    var res = {};
    if (func.prototype !== null) {
        res.__proto__ = func.prototype;
    }
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }
    return res;
}

While

var obj = New(A, 1, 2);

Jest równoważne

var obj = new A(1, 2);

Dla początkujących, aby zrozumieć to lepiej

Wypróbuj poniższy kod w konsoli przeglądarki.

function Foo() { 
    return this; 
}

var a = Foo();       //returns window object
var b = new Foo();   //returns empty object of foo

a instanceof Window;  // true
a instanceof Foo;     // false

b instanceof Window;  // false
b instanceof Foo;     // true

Teraz możesz przeczytać ODPOWIEDŹ community wiki :)

Więc pewnie nie do tworzenia instancje obiektu

Jest używany właśnie do tego. Definiujesz konstruktor Funkcji Tak:

function Person(name) {
    this.name = name;
}

var john = new Person('John');

Jednak dodatkową zaletą ECMAScript jest to, że można rozszerzyć o Właściwość .prototype, więc możemy zrobić coś takiego...

Person.prototype.getName = function() { return this.name; }

Wszystkie obiekty utworzone z tego konstruktora będą teraz miały getName z powodu łańcucha prototypów, do którego mają dostęp.

JavaScript jest obiektowym językiem programowania i jest używany do tworzenia instancji. Jest oparty na prototypach, a nie na klasach, ale to nie znaczy, że nie jest zorientowany obiektowo.

Javascript jest dynamicznym językiem programowania, który obsługuje paradygmat programowania zorientowanego obiektowo i używa go do tworzenia nowych instancji obiektu.

Klasy nie są konieczne dla obiektów - Javascript jest językiem opartym na prototypach.

Są już bardzo świetne odpowiedzi, ale zamieszczam nową, aby podkreślić moją obserwację na temat przypadku III poniżej o tym, co się dzieje, gdy masz wyraźne oświadczenie powrotu w funkcji, którą jesteś newing up. Spójrz na poniższe przypadki:

Przypadek I:

var Foo = function(){
  this.A = 1; 
  this.B = 2;
};
console.log(Foo()); //prints undefined
console.log(window.A); //prints 1

Powyżej jest zwykły przypadek wywołania funkcji anonimowej wskazywanej przez Foo. Po wywołaniu tej funkcji zwraca undefined. Ponieważ nie ma jednoznacznej deklaracji return, więc JavaScript interpreter wstawia na końcu funkcji polecenie return undefined;. W tym oknie znajduje się obiekt wywołujący (contextual this), który otrzymuje nowe właściwości A i B.

Przypadek II :

var Foo = function(){
  this.A = 1;
  this.B = 2;
};
var bar = new Foo();
console.log(bar()); //illegal isn't pointing to a function but an object
console.log(bar.A); //prints 1

Tutaj interpreter JavaScript widząc słowo kluczowe new tworzy nowy obiekt, który działa jako obiekt wywołujący (kontekstowy this) funkcji anonimowej wskazywanej przez Foo. W tym przypadku A i B stają się właściwościami na nowo powstałym obiekcie (w miejsce okna obiekt). Ponieważ nie masz jawnej instrukcji return, interpreter JavaScript na siłę wstawia instrukcję return, aby zwrócić nowy obiekt utworzony z powodu użycia słowa kluczowego new.

Przypadek III :

var Foo = function(){
  this.A = 1;
  this.B = 2;
  return {C:20,D:30}; 
};
var bar = new Foo();
console.log(bar.C);//prints 20
console.log(bar.A); //prints undefined. bar is not pointing to the object which got created due to new keyword.

Tutaj znowu interpreter JavaScript widząc słowo kluczowe new tworzy nowy obiekt, który działa jako obiekt wywołujący (kontekstowy this) funkcji anonimowej wskazywanej przez Foo. Ponownie, A i B stają się właściwościami nowo utworzonego obiektu. Ale to czas, gdy masz wyraźne polecenie return, więc interpreter JavaScript będzie , a nie zrobić coś własnego.

Na wypadek III należy zwrócić uwagę na to, że obiekt utworzony z powodu new słowa kluczowego zgubił się z radaru. {[22] } wskazuje na zupełnie inny obiekt, który nie jest Tym, który interpreter JavaScript stworzył ze względu na słowo kluczowe new.

Cytując Davida Flanagana z Javascriptit: the Definitive Guide (6th Edition),Ch. 4, strona # 62:

Gdy wyrażenie tworzące obiekt jest oceniane, najpierw JavaScript wytworzy nowy pusty obiekt, podobnie jak ten utworzony przez obiekt inicjalizator {}. Następnie wywołuje określoną funkcję z podanych argumentów, przekazując nowy obiekt jako wartość tego słowo kluczowe. Funkcja może następnie użyć tego do zainicjowania właściwości nowo powstałego obiektu. Funkcje pisane do użycia jako konstruktory nie zwraca wartości, a wartość obiektu creation expression jest nowo wytworzonym i zainicjalizowanym obiektem. Jeśli konstruktor Zwraca wartość obiektu, która stanie się wartością obiektu wyrażenie tworzenia i nowo utworzony obiekt jest odrzucany.

---Dodatkowe Informacje---

Funkcje użyte w fragmencie kodu powyższych przypadków mają specjalne nazwy w świecie JS, jak poniżej:

Przypadek I I II - funkcja konstruktora

Przypadek III - funkcja Fabryczna. Funkcje fabryczne nie powinny być używane ze słowem kluczowym new, które zrobiłem, aby wyjaśnić pojęcie w bieżącym wątku.

O różnicy między nimi możesz przeczytać ww tym wątku.

Podsumowanie:

Słowo kluczowe new jest używane w javascript do tworzenia obiektu z funkcji konstruktora. Słowo kluczowe new musi być umieszczone przed wywołaniem funkcji konstruktora i wykona następujące czynności:

1. tworzy nowy obiekt
2. Ustawia prototyp tego obiektu na właściwość prototype funkcji konstruktora
3. wiąże słowo kluczowe this z nowo utworzonym obiektem i wykonuje funkcję konstruktora
4. zwraca nowo utworzony obiekt

Przykład:

function Dog (age) {
  this.age = age;
}

const doggie = new Dog(12);

console.log(doggie);
console.log(Object.getPrototypeOf(doggie) === Dog.prototype) // true

Co dokładnie się dzieje:

1. const doggie mówi: potrzebujemy pamięci do deklarowania zmiennej.
2. operator assigment = mówi: zainicjalizujemy tę zmienną wyrażeniem po =
3. wyrażenie to new Dog(12). Silnik JS widzi nowe słowo kluczowe, tworzy nowy obiekt i ustawia prototyp Na Dog.prototype
4. funkcja konstruktora jest wykonywana z this wartość ustawiona na nowy obiekt. W tym kroku jest przypisany wiek do nowo utworzonego obiektu pieska.
5. nowo utworzony obiekt jest zwracany i przypisywany do zmiennej doggie.

Słowo kluczowe new zmienia kontekst, w którym funkcja jest uruchamiana i zwraca wskaźnik do tego kontekstu.

Jeśli nie używasz słowa kluczowego new, kontekst, pod którym działa funkcja Vehicle() jest tym samym kontekstem, z którego wywołujesz funkcję Vehicle. Słowo kluczowe this będzie odnosić się do tego samego kontekstu. Gdy używasz new Vehicle(), tworzony jest nowy kontekst, więc słowo kluczowe {[4] } wewnątrz funkcji odnosi się do nowego kontekstu. To, co otrzymujesz w zamian, to nowo utworzony kontekst.

Czasem kod jest łatwiejszy niż słowa:

var func1 = function (x) { this.x = x; }                    // used with 'new' only
var func2 = function (x) { var z={}; z.x = x; return z; }   // used both ways
func1.prototype.y = 11;
func2.prototype.y = 12;

A1 = new func1(1);      // has A1.x  AND  A1.y
A2 =     func1(1);      // undefined ('this' refers to 'window')
B1 = new func2(2);      // has B1.x  ONLY
B2 =     func2(2);      // has B2.x  ONLY

Dla mnie, dopóki nie jestem prototypem, używam stylu func2, ponieważ daje mi to nieco większą elastyczność wewnątrz i na zewnątrz funkcji.

 " Every object (including functions) has this internal property called [[prototype]]" 

Każda funkcja ma proto- wpisz obiekt, który jest automatycznie ustawiany jako prototyp obiektów utworzonych za pomocą tej funkcji.

Możecie łatwo sprawdzić:

const a = { name: "something" };
console.log(a.prototype); // undefined because it is not directly accessible

const b = function () {
  console.log("somethign");};

console.log(b.prototype); // returns b {}

Ale każda funkcja i obiekty mają __proto__ właściwość, która wskazuje na prototyp tego obiektu lub funkcji. __proto__ i prototype to 2 różne terminy. Myślę, że możemy zrobić taki komentarz: "każdy obiekt jest połączony z prototypem za pomocą proto ", ale __proto__ nie istnieje w javascript. to właściwość jest dodawana przez przeglądarkę, aby pomóc w debugowaniu.

console.log(a.__proto__); // returns {}
console.log(b.__proto__); // returns [Function]

function CreateObject(name,age){
    this.name=name;
    this.age =age
}

5 rzeczy, które najpierw zwracają uwagę:

1-gdy funkcja konstruktora jest wywoływana z new, wewnętrzna metoda [[Construct]] funkcji jest wywoływana w celu utworzenia nowego obiektu instancji i przydzielenia pamięci.

2 - nie używamy słowa kluczowego return. new zajmę się tym.

3-Nazwa funkcji jest pisane wielkimi literami, więc kiedy Programiści zobaczą Twój kod, zrozumieją, że muszą użyć słowa kluczowego new.

4-nie używamy funkcji strzałek. Ponieważ wartość parametru this jest pobierana w momencie utworzenia funkcji strzałki, która jest "window". funkcje strzałek mają zasięg leksykalny, a nie dynamiczny. Leksykalnie oznacza lokalnie. funkcja arrow niesie swoją lokalną wartość" this".

5-W przeciwieństwie do zwykłych funkcji, funkcje strzałek nigdy nie mogą być wywoływane z nowym słowo kluczowe, ponieważ nie mają metody [[Construct]]. Właściwość prototype również nie istnieje dla funkcji arrow.

const me=new CreateObject("yilmaz","21")

new wywołuje funkcję, a następnie tworzy pusty obiekt {}, a następnie dodaje klucz " name "o wartości" name "i klucz" age "o wartości argumentu"age".

Kiedy wywołujemy funkcję, tworzony jest nowy kontekst wykonania z "this" i "arguments", dlatego" new " ma dostęp do tych argumentów.

Domyślnie to wewnątrz funkcja konstruktora wskaże obiekt "window", ale new zmieni go. "this" wskazuje na pusty obiekt {}, który zostanie wytworzony, a następnie zostaną dodane właściwości do nowo wytworzonego obiektu. Jeśli jakaś zmienna zdefiniowana bez właściwości "this" nie zostanie dodana do obiektu.

function CreateObject(name,age){
    this.name=name;
    this.age =age;
    const myJob="developer"
}

Właściwość MyJob nie zostanie dodana do obiektu, ponieważ nie ma żadnych odniesień do nowo utworzonego obiektu.

   const me= {name:"yilmaz",age:21} // there is no myJob key

Na początku powiedziałem, że każda funkcja ma właściwość "prototype" w tym funkcje konstruktora. Możemy dodać metody do prototypu konstruktora, aby każdy obiekt, który powstał z tej funkcji, miał do niego dostęp.

 CreateObject.prototype.myActions=function(){ //define something}

Teraz obiekt "ja" może używać metody "myActions".

Javascript ma wbudowane funkcje konstruktora: Function,Boolean,Number, String..

Jeśli stworzę

const a = new Number(5);
console.log(a);  // [Number: 5]
console.log(typeof a); // object

Wszystko, co zostało utworzone za pomocą new mA typ obiektu. teraz "a" ma dostęp do wszystkich metod, które są przechowywane wewnątrz Liczba.prototyp . If I defined

const b = 5;
console.log(a === b);//false

A i b to 5, ale a to obiekt, A b to prymityw. mimo że b jest typem prymitywnym, javascript automatycznie zawija go za pomocą metody Number (), więc b ma dostęp do wszystkich metod znajdujących się wewnątrz Number.prototyp.

Funkcja Konstruktora jest przydatna, gdy chcesz utworzyć wiele podobnych obiektów o tych samych właściwościach i metodach. W ten sposób nie będziesz przydzielał dodatkowej pamięci, więc Twój kod będzie działał więcej skutecznie.

Słowo kluczowe new służy do tworzenia nowych instancji obiektów. I tak, javascript jest dynamicznym językiem programowania, który obsługuje paradygmat programowania zorientowanego obiektowo. Konwencja dotycząca nazewnictwa obiektów jest taka, że zawsze należy używać dużych liter dla obiektów, które mają być utworzone przez nowe słowo kluczowe.

obj = new Element();

Słowo kluczowe new tworzy instancje obiektów używając funkcji jako konstruktora. Na przykład:

var Foo = function() {};
Foo.prototype.bar = 'bar';

var foo = new Foo();
foo instanceof Foo; // true

Instancje dziedziczą z prototype funkcji konstruktora. Tak więc biorąc pod uwagę powyższy przykład...

foo.bar; // 'bar'

Cóż JavaScript na si może się znacznie różnić w zależności od platformy, ponieważ jest zawsze implementacją oryginalnej specyfikacji EcmaScript.

W każdym przypadku, niezależnie od implementacji, wszystkie implementacje JavaScript zgodne ze specyfikacją EcmaScript, zapewnią Ci język zorientowany obiektowo. Zgodnie ze standardem ES:

ECMAScript jest zorientowanym obiektowo językiem programowania dla wykonywanie obliczeń i manipulowanie obiekty obliczeniowe w środowisku hosta.

Więc teraz, kiedy ustaliliśmy, że JavaScript jest implementacją EcmaScript, a zatem jest językiem obiektowym. Definicja operacji new w dowolnym języku obiektowym mówi, że takie słowo kluczowe jest używane do tworzenia instancji obiektu z klasy określonego typu (w tym typów anonimowych, w przypadkach takich jak C#).

W EcmaScript nie używamy klas, jak można przeczytać z Specyfikacja:

ECMAScript nie używa klas takich jak C++, Smalltalk czy Java. Zamiast tego obiekty mogą być tworzone na różne sposoby m.in. poprzez zapis dosłowny lub poprzez konstruktory, które tworzą obiekty, a następnie wykonują kod, który inicjalizuje wszystkie lub część z nich, przypisując początkowy wartości do ich właściwości. Każdy konstruktor jest funkcją, która ma nieruchomość o nazwie ― prototype ‖, który jest używany do implementacji dziedziczenia opartego na prototypach i współdzielonych właściwości. Obiekty są tworzone przez
używanie konstruktorów w nowych wyrażeniach; na przykład nowe Date (2009,11) wytworzy nowy obiekt Date. Wywołanie konstruktora bez użycia nowego ma konsekwencje, które zależą od konstruktora. Na przykład date () tworzy ciąg znaków bieżąca data i czas, a nie obiekt.

Javascript nie jest zorientowanym obiektowo językiem programowania, dlatego LOOK UP proces w JavaScripcie wykorzystuje się 'proces delegowania' znany również jako delegacja prototypu lub dziedziczenie prototypowe.

Jeśli spróbujesz pobrać wartość właściwości z obiektu, którego nie ma, Silnik JavaScript patrzy na prototyp obiektu (i jego prototyp, 1 krok powyżej na raz) to prototypowy łańcuch odwiązany łańcuch kończy się do null czyli obiekt.prototype = = null (Standardowy prototyp obiektu). W tym momencie zwracana jest wartość if property or method is not defined than undefined.

Tak więc za pomocą słowa kluczowego new Niektóre zadania, które zostały wykonane ręcznie np

1. ręczne tworzenie obiektów np. newObj.
2. Hidden bond Creation using proto (aka: dunder proto ) in JS spec [[prototype]] (tj. proto )
3. odwoływanie się i przypisywanie właściwości do newObj
4. return of newObj object.

Wszystko odbywa się ręcznie.

function CreateObj(value1, value2) {
  const newObj = {};
  newObj.property1 = value1;
  newObj.property2 = value2;
  return newObj;
}
var obj = CreateObj(10,20);

obj.__proto__ === Object.prototype;              // true
Object.getPrototypeOf(obj) === Object.prototype // true

Słowo kluczowe Javascript new pomaga zautomatyzować ten proces:

1. nowy obiekt jest tworzony przez this:{}
2. odwoływanie się i przypisywanie właściwości do this
3. Hidden bond Creation [[prototype]] (tj. proto) do funkcjonowania.prototype shared space.
4. implicit return of this object {}

function CreateObj(value1, value2) {
  this.property1 = value1;
  this.property2 = value2;
}

var obj = new CreateObj(10,20);
obj.__proto__ === CreateObj.prototype             // true
Object.getPrototypeOf(obj) == CreateObj.prototype // true

Wywołanie funkcji konstruktora bez nowego słowa kluczowego:

=> this: Window

function CreateObj(value1, value2) {
  var isWindowObj = this === window;
  console.log("Is Pointing to Window Object", isWindowObj);
  this.property1 = value1;
  this.property2 = value2;
}
var obj = new CreateObj(10,20); // Is Pointing to Window Object false
var obj = CreateObj(10,20); // Is Pointing to Window Object true
window.property1; // 10
window.property2; // 20