Object.create()

創(chuàng)建一個新對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__。 --MDN

語法

Object.create(proto, [propertiesObject]);

參數(shù)

proto：傳遞一個現(xiàn)在有的對象，即新對象的原型對象（新創(chuàng)建的對象_proto_屬性指向現(xiàn)有屬性）。

第一個參數(shù)proto的值為null，那么創(chuàng)建出來的對象是一個{}（空對象）并且沒有原型;

Objecr.create({name:'lili'});

Objecr.create(null);

propertiesObject：可選，給新對象添加新屬性以及描述器。如果沒有指定即創(chuàng)建一個{}，有原型也有繼承Object.prototype上的方法。。

返回值

一個新對象，帶著指定的原型對象和屬性

小試牛刀

//題目
var a = {num:2};
var b = Object.create(a);
//問題,以下順序執(zhí)行,值是？
b.num
b.num++ 
a.num 

1. b.num == 2
Object.create()方法創(chuàng)建一個新對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__。
也就是b.__proto__ == a
所以雖然b是個空對象，但會從原型上一直找值。
b.num == b.__proto__.num == 2
2. b.num++ == 2
b.num為2，++運算符是先用后加，這時b.num++還是2
3. a.num == 2
b.num 在執(zhí)行 ++ 操作之后，這時的b為{num:3},不影響a.

new Object()

new創(chuàng)建一個用戶定義的對象類型的實例或具有構造函數(shù)的內置對象的實例。

• 創(chuàng)建一個空的對象（即{}）
• 鏈接該對象（即設置該對象的構造函數(shù)）到另一個對象
• 將步驟1新創(chuàng)建的對象作為this的上下文
• 如果該函數(shù)沒有返回對象，則返回this
• new會創(chuàng)建一個新對象，并且這個新對象繼承構造函數(shù)的prototype，也就是說創(chuàng)建的實例的proto指向構造函數(shù)的prototype
• new Object()會創(chuàng)建一個實例，該實例的proto指向Object的prototype

new Object();

new Object({name:'lili'});

區(qū)別

new Object()繼承內置對象Object，而Object.create()則是繼承指定對象可以通過Object.create(null) 創(chuàng)建一個干凈的對象，也就是沒有原型，而 new Object()創(chuàng)建的對象是 Object的實例，原型永遠指向Object.prototype 

創(chuàng)建對象new Object() 和 Object.create()區(qū)分

new Object() 和 Object.create() 創(chuàng)建對象有什么不同之處，先看一個例子：

  var foo = {
    something: function() {
        console.log( "Tell me something good..." );
    }
};
foo.c = 1
var a = Object.create( foo );
var b = new Object(foo)
foo.foo='foo'
a.a='a'
b.b = 'b'
b.something()
a.something(); // Tell me something good...
console.log('a:',a)
console.log('b:',b)
console.log('foo:',foo)

打印結果：

b.something(); //Tell me something good…
a.something(); // Tell me something good…
console.log(‘a:’,a) // a: {a: “a”}
console.log(‘b:’,b) //b: {c: 1, foo: “foo”, b: “b”, something: ƒ}
console.log(‘foo:’,foo) //foo: {c: 1, foo: “foo”, b: “b”, something: ƒ}

發(fā)現(xiàn)：

在控制臺上打印，看出這兩種創(chuàng)建對象區(qū)別，十分清晰，create創(chuàng)建的對象只是原型指向foo，之后它倆無任何關系了，無論foo怎么修改，都不會影響a，a添加屬性也不會影響foo，new 方式則會相互影響擴展

當要設計通用組件或模塊時，假設要調用 a.something()，如果 a中不存在 something()時這條語句也可以正常工作的話，那你的 API 設計就會變得很“神奇”，對于未來維護者來說這可能不太好理解。

但是你可以讓你的 API 設計不那么“神奇”，同時仍然能發(fā)揮 [[Prototype]] 關聯(lián)的威力：

var foo= {
	something: function() {
		console.log( "something!" );
	}
};
var a= Object.create(foo);
a.doSomething= function() {
	this.something(); // 內部委托！
};
a.doSomething(); // "something!"

這里我們調用的 a.doSomething() 是實際存在于 a中的，這可以讓我們的 API 設計更加清晰（不那么“神奇”）。從內部來說，我們的實現(xiàn)遵循的是委托設計模式，通過 [[Prototype]] 委托到foo.something()。

小結一下吧：

Object.create(…) 會創(chuàng)建一個新對象（bar）并把它關聯(lián)到我們指定的對象（foo），這樣 我們就可以充分發(fā)揮 [[Prototype]] 機制的威力（委托）并且避免不必要的麻煩（比如使 用 new 的構造函數(shù)調用會生成 .prototype 和 .constructor 引用）。。create()則不會生成這些引用，避免一些不必要的麻煩

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論