Memahami perbedaan antara Object.create () dan SomeFunction baru ()

Saya baru-baru ini menemukan Object.create()metode dalam JavaScript, dan saya mencoba untuk menyimpulkan bagaimana hal itu berbeda dari membuat contoh objek baru new SomeFunction(), dan ketika Anda ingin menggunakan satu di atas yang lain.

Perhatikan contoh berikut:

var test = {
  val: 1,
  func: function() {
    return this.val;
  }
};
var testA = Object.create(test);

testA.val = 2;
console.log(test.func()); // 1
console.log(testA.func()); // 2

console.log('other test');
var otherTest = function() {
  this.val = 1;
  this.func = function() {
    return this.val;
  };
};

var otherTestA = new otherTest();
var otherTestB = new otherTest();
otherTestB.val = 2;
console.log(otherTestA.val); // 1 
console.log(otherTestB.val); // 2

console.log(otherTestA.func()); // 1
console.log(otherTestB.func()); // 2

Perhatikan bahwa perilaku yang sama diamati dalam kedua kasus. Bagi saya, perbedaan utama antara kedua skenario ini adalah:

• Objek yang digunakan Object.create()sebenarnya membentuk prototipe dari objek baru, sedangkan dalam new Function()dari properti / fungsi yang dinyatakan tidak membentuk prototipe.
• Anda tidak dapat membuat penutupan dengan Object.create()sintaks seperti yang Anda lakukan dengan sintaks fungsional. Ini logis mengingat lingkup tipe leksikal (vs blok) dari JavaScript.

Apakah pernyataan di atas benar? Dan apakah saya kehilangan sesuatu? Kapan Anda akan menggunakan satu di atas yang lain?

EDIT: tautan ke versi jsfiddle dari contoh kode di atas: http://jsfiddle.net/rZfYL/

Objek yang digunakan dalam Object.create sebenarnya membentuk prototipe dari objek baru, di mana seperti dalam Function () form yang baru menyatakan properti / fungsi tidak membentuk prototipe.

Ya, Object.createmembangun objek yang mewarisi langsung dari yang diteruskan sebagai argumen pertama.

Dengan fungsi konstruktor, objek yang baru dibuat mewarisi dari prototipe konstruktor, misalnya:

var o = new SomeConstructor();

Dalam contoh di atas, omewarisi langsung dari SomeConstructor.prototype.

Ada perbedaan di sini, dengan Object.createAnda dapat membuat objek yang tidak mewarisi dari apa pun Object.create(null);,, di sisi lain, jika Anda mengatur objek SomeConstructor.prototype = null;yang baru dibuat akan diwarisi dari Object.prototype.

Anda tidak dapat membuat penutupan dengan sintaks Object.create seperti yang Anda lakukan dengan sintaks fungsional. Ini logis mengingat lingkup tipe leksikal (vs blok) dari JavaScript.

Nah, Anda bisa membuat penutupan, misalnya menggunakan argumen deskriptor properti:

var o = Object.create({inherited: 1}, {
  foo: {
    get: (function () { // a closure
      var closured = 'foo';
      return function () {
        return closured+'bar';
      };
    })()
  }
});

o.foo; // "foobar"

Perhatikan bahwa saya sedang berbicara tentang metode ECMAScript Edisi 5 Object.create, bukan shim Crockford.

Metode ini mulai diterapkan secara native di browser terbaru, periksa tabel kompatibilitas ini .

Sangat sederhana dikatakan, new Xadalah Object.create(X.prototype)dengan tambahan menjalankan constructorfungsi. (Dan memberi constructorkesempatan returnpada objek aktual yang seharusnya menjadi hasil dari ekspresi alih-alih this.)

Itu dia. :)

Jawaban sisanya hanya membingungkan, karena ternyata tidak ada orang lain yang membaca definisi newkeduanya. ;)

Berikut adalah langkah-langkah yang terjadi secara internal untuk kedua panggilan:
(Petunjuk: satu-satunya perbedaan dalam langkah 3)

new Test():

1. buat new Object()obj
2. diatur obj.__proto__keTest.prototype
3. return Test.call(obj) || obj; // normally obj is returned but constructors in JS can return a value

Object.create( Test.prototype )

1. buat new Object()obj
2. diatur obj.__proto__keTest.prototype
3. return obj;

Jadi pada dasarnya Object.createtidak menjalankan konstruktor.

Biarkan saya mencoba menjelaskan (lebih banyak di Blog ):

1. Ketika Anda menulis Carkonstruktor var Car = function(){}, ini adalah bagaimana hal-hal yang internal: Kami memiliki satu {prototype}link yang tersembunyi untuk Function.prototypeyang tidak dapat diakses dan satu prototypelink Car.prototypeyang dapat diakses dan memiliki aktual constructordari Car. Function.prototype dan Car.prototype memiliki tautan tersembunyi Object.prototype.

2. Ketika kita ingin membuat dua objek yang setara dengan menggunakan newoperator dan createmetode maka kita harus melakukannya seperti ini: Honda = new Car();dan Maruti = Object.create(Car.prototype). Apa yang terjadi?

   Honda = new Car();- Ketika Anda membuat objek seperti ini, maka {prototype}properti tersembunyi diarahkan ke Car.prototype. Jadi di sini, {prototype}objek Honda akan selalu Car.prototype- kita tidak punya pilihan untuk mengubah {prototype}properti objek. Bagaimana jika saya ingin mengubah prototipe dari objek kami yang baru dibuat?
   Maruti = Object.create(Car.prototype)- Ketika Anda membuat objek seperti ini, Anda memiliki opsi tambahan untuk memilih {prototype}properti objek Anda . Jika Anda ingin Car.prototype sebagai yang {prototype}lalu kirimkan sebagai parameter dalam fungsi. Jika Anda tidak ingin ada {prototype}untuk objek Anda maka Anda dapat melewati nullseperti ini: Maruti = Object.create(null).

Kesimpulan - Dengan menggunakan metode ini Object.createAnda memiliki kebebasan untuk memilih {prototype}properti objek Anda . Di new Car();, Anda tidak memiliki kebebasan itu.

Cara yang disukai dalam OO JavaScript:

Misalkan kita memiliki dua objek adan b.

var a = new Object();
var b = new Object();

Sekarang, misalkan amemiliki beberapa metode yang bjuga ingin diakses. Untuk itu, kita memerlukan pewarisan objek ( aharus menjadi prototipe bhanya jika kita ingin akses ke metode tersebut). Jika kami memeriksa prototipe adan bkemudian kami akan menemukan bahwa mereka berbagi prototipe Object.prototype.

Object.prototype.isPrototypeOf(b); //true
a.isPrototypeOf(b); //false (the problem comes into the picture here).

Masalah - kami ingin objek asebagai prototipe b, tetapi di sini kami membuat objek bdengan prototipe Object.prototype. Solusi - ECMAScript 5 diperkenalkan Object.create(), untuk mencapai warisan dengan mudah. Jika kita membuat objek bseperti ini:

var b = Object.create(a);

kemudian,

a.isPrototypeOf(b);// true (problem solved, you included object a in the prototype chain of object b.)

Jadi, jika Anda melakukan scripting berorientasi objek maka Object.create()sangat berguna untuk warisan.

Ini:

var foo = new Foo();

dan

var foo = Object.create(Foo.prototype);

sangat mirip. Satu perbedaan penting adalah bahwa new Foosebenarnya menjalankan kode konstruktor, sedangkan Object.createtidak akan menjalankan kode seperti

function Foo() {
    alert("This constructor does not run with Object.create");
}

Perhatikan bahwa jika Anda menggunakan versi dua-parameter Object.create()maka Anda dapat melakukan banyak hal yang lebih kuat.

Perbedaannya adalah apa yang disebut "warisan pseudoklasik vs purwarupa". Sarannya adalah untuk menggunakan hanya satu jenis dalam kode Anda, bukan mencampur keduanya.

Dalam warisan pseudoklasik (dengan operator "baru"), bayangkan bahwa Anda pertama-tama mendefinisikan kelas pseudo, dan kemudian membuat objek dari kelas itu. Misalnya, tentukan "Orang" kelas pseudo, lalu buat "Alice" dan "Bob" dari "Orang".

Dalam warisan prototypal (menggunakan Object.create), Anda secara langsung membuat orang tertentu "Alice", dan kemudian membuat orang lain "Bob" menggunakan "Alice" sebagai prototipe. Tidak ada "kelas" di sini; semua benda.

Secara internal, JavaScript menggunakan "pewarisan prototypal"; cara "pseudoklasik" hanyalah gula.

Lihat tautan ini untuk perbandingan dua cara.

function Test(){
    this.prop1 = 'prop1';
    this.prop2 = 'prop2';
    this.func1 = function(){
        return this.prop1 + this.prop2;
    }
};

Test.prototype.protoProp1 = 'protoProp1';
Test.prototype.protoProp2 = 'protoProp2';
var newKeywordTest = new Test();
var objectCreateTest = Object.create(Test.prototype);

/* Object.create   */
console.log(objectCreateTest.prop1); // undefined
console.log(objectCreateTest.protoProp1); // protoProp1 
console.log(objectCreateTest.__proto__.protoProp1); // protoProp1

/* new    */
console.log(newKeywordTest.prop1); // prop1
console.log(newKeywordTest.__proto__.protoProp1); // protoProp1

Ringkasan:

1) dengan newkata kunci ada dua hal yang perlu diperhatikan;

a) fungsi digunakan sebagai konstruktor

b) function.prototypeobjek diteruskan ke __proto__properti ... atau di mana __proto__tidak didukung, itu adalah tempat kedua di mana objek baru terlihat untuk menemukan properti

2) dengan Object.create(obj.prototype)Anda membangun objek ( obj.prototype) dan meneruskannya ke objek yang dimaksud .. dengan perbedaan bahwa sekarang objek baru __proto__juga menunjuk ke obj.prototype (harap ref oleh xj9 untuk itu)

Varian pembuatan objek.

Varian 1 : ' Objek baru () ' -> Konstruktor objek tanpa argumen.

var p1 = new Object(); // 'new Object()' create and return empty object -> {}

var p2 = new Object(); // 'new Object()' create and return empty object -> {}

console.log(p1); // empty object -> {}

console.log(p2); // empty object -> {}

// p1 and p2 are pointers to different objects
console.log(p1 === p2); // false

console.log(p1.prototype); // undefined

// empty object which is in fact Object.prototype
console.log(p1.__proto__); // {}

// empty object to which p1.__proto__ points
console.log(Object.prototype); // {}

console.log(p1.__proto__ === Object.prototype); // true

// null, which is in fact Object.prototype.__proto__
console.log(p1.__proto__.__proto__); // null

console.log(Object.prototype.__proto__); // null

Varian 2 : ' Objek baru (orang) ' -> Konstruktor objek dengan argumen.

const person = {
    name: 'no name',
    lastName: 'no lastName',
    age: -1
}

// 'new Object(person)' return 'person', which is pointer to the object ->
//  -> { name: 'no name', lastName: 'no lastName', age: -1 }
var p1 = new Object(person);

// 'new Object(person)' return 'person', which is pointer to the object ->
//  -> { name: 'no name', lastName: 'no lastName', age: -1 }
var p2 = new Object(person);

// person, p1 and p2 are pointers to the same object
console.log(p1 === p2); // true
console.log(p1 === person); // true
console.log(p2 === person); // true

p1.name = 'John'; // change 'name' by 'p1'
p2.lastName = 'Doe'; // change 'lastName' by 'p2'
person.age = 25; // change 'age' by 'person'

// when print 'p1', 'p2' and 'person', it's the same result,
// because the object they points is the same
console.log(p1); // { name: 'John', lastName: 'Doe', age: 25 }
console.log(p2); // { name: 'John', lastName: 'Doe', age: 25 }
console.log(person); // { name: 'John', lastName: 'Doe', age: 25 }

Varian 3.1 : ' Object.create (person) '. Gunakan Object.create dengan objek 'orang' sederhana. 'Object.create (person)' akan membuat (dan mengembalikan) objek kosong baru dan menambahkan properti '__proto__' ke objek kosong baru yang sama. Properti ini '__proto__' akan menunjuk ke objek 'orang'.

const person = {
        name: 'no name',
        lastName: 'no lastName',
        age: -1,
        getInfo: function getName() {
           return `${this.name} ${this.lastName}, ${this.age}!`;
    }
}

var p1 = Object.create(person);

var p2 = Object.create(person);

// 'p1.__proto__' and 'p2.__proto__' points to
// the same object -> 'person'
// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(p1.__proto__);
console.log(p2.__proto__);
console.log(p1.__proto__ === p2.__proto__); // true

console.log(person.__proto__); // {}(which is the Object.prototype)

// 'person', 'p1' and 'p2' are different
console.log(p1 === person); // false
console.log(p1 === p2); // false
console.log(p2 === person); // false

// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(person);

console.log(p1); // empty object - {}

console.log(p2); // empty object - {}

// add properties to object 'p1'
// (properties with the same names like in object 'person')
p1.name = 'John';
p1.lastName = 'Doe';
p1.age = 25;

// add properties to object 'p2'
// (properties with the same names like in object 'person')
p2.name = 'Tom';
p2.lastName = 'Harrison';
p2.age = 38;

// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(person);

// { name: 'John', lastName: 'Doe', age: 25 }
console.log(p1);

// { name: 'Tom', lastName: 'Harrison', age: 38 }
console.log(p2);

// use by '__proto__'(link from 'p1' to 'person'),
// person's function 'getInfo'
console.log(p1.getInfo()); // John Doe, 25!

// use by '__proto__'(link from 'p2' to 'person'),
// person's function 'getInfo'
console.log(p2.getInfo()); // Tom Harrison, 38!

Varian 3.2 : ' Object.create (Object.prototype) '. Gunakan Object.create dengan objek bawaan -> 'Object.prototype'. 'Object.create (Object.prototype)' akan membuat (dan mengembalikan) objek kosong baru dan menambahkan properti '__proto__' ke objek kosong baru yang sama. Properti ini '__proto__' akan menunjuk ke objek 'Object.prototype'.

// 'Object.create(Object.prototype)' :
// 1. create and return empty object -> {}.
// 2. add to 'p1' property '__proto__', which is link to 'Object.prototype'
var p1 = Object.create(Object.prototype);

// 'Object.create(Object.prototype)' :
// 1. create and return empty object -> {}.
// 2. add to 'p2' property '__proto__', which is link to 'Object.prototype'
var p2 = Object.create(Object.prototype);

console.log(p1); // {}

console.log(p2); // {}

console.log(p1 === p2); // false

console.log(p1.prototype); // undefined

console.log(p2.prototype); // undefined

console.log(p1.__proto__ === Object.prototype); // true

console.log(p2.__proto__ === Object.prototype); // true

Varian 4 : 'Beberapa Fungsi baru () '

// 'this' in constructor-function 'Person'
// represents a new instace,
// that will be created by 'new Person(...)'
// and returned implicitly
function Person(name, lastName, age) {

    this.name = name;
    this.lastName = lastName;
    this.age = age;

    //-----------------------------------------------------------------
    // !--- only for demonstration ---
    // if add function 'getInfo' into
    // constructor-function 'Person',
    // then all instances will have a copy of the function 'getInfo'!
    //
    // this.getInfo: function getInfo() {
    //  return this.name + " " + this.lastName + ", " + this.age + "!";
    // }
    //-----------------------------------------------------------------
}

// 'Person.prototype' is an empty object
// (before add function 'getInfo')
console.log(Person.prototype); // Person {}

// With 'getInfo' added to 'Person.prototype',
// instances by their properties '__proto__',
// will have access to the function 'getInfo'.
// With this approach, instances not need
// a copy of the function 'getInfo' for every instance.
Person.prototype.getInfo = function getInfo() {
    return this.name + " " + this.lastName + ", " + this.age + "!";
}

// after function 'getInfo' is added to 'Person.prototype'
console.log(Person.prototype); // Person { getInfo: [Function: getInfo] }

// create instance 'p1'
var p1 = new Person('John', 'Doe', 25);

// create instance 'p2'
var p2 = new Person('Tom', 'Harrison', 38);

// Person { name: 'John', lastName: 'Doe', age: 25 }
console.log(p1);

// Person { name: 'Tom', lastName: 'Harrison', age: 38 }
console.log(p2);

// 'p1.__proto__' points to 'Person.prototype'
console.log(p1.__proto__); // Person { getInfo: [Function: getInfo] }

// 'p2.__proto__' points to 'Person.prototype'
console.log(p2.__proto__); // Person { getInfo: [Function: getInfo] }

console.log(p1.__proto__ === p2.__proto__); // true

// 'p1' and 'p2' points to different objects(instaces of 'Person')
console.log(p1 === p2); // false

// 'p1' by its property '__proto__' reaches 'Person.prototype.getInfo' 
// and use 'getInfo' with 'p1'-instance's data
console.log(p1.getInfo()); // John Doe, 25!

// 'p2' by its property '__proto__' reaches 'Person.prototype.getInfo' 
// and use 'getInfo' with 'p2'-instance's data
console.log(p2.getInfo()); // Tom Harrison, 38!

Secara internal Object.createmelakukan ini:

Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
};

Sintaks hanya menghilangkan ilusi bahwa JavaScript menggunakan Warisan Klasik.

Sesuai dengan jawaban ini dan kata kunci video ini new melakukan hal-hal berikut:

1. Menciptakan objek baru.

2. Menautkan objek baru ke fungsi konstruktor ( prototype).

3. Membuat thistitik variabel ke objek baru.

4. Menjalankan fungsi konstruktor menggunakan objek baru dan melakukan implisit return this;

5. Menetapkan nama fungsi konstruktor ke properti objek baru constructor.

Object.createhanya melakukan 1stdan 2ndmelangkah !!!