Object.create()

創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的__proto__。 --MDN

語(yǔ)法

Object.create(proto, [propertiesObject]);

參數(shù)

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

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

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

Objecr.create(null);

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

返回值

一個(gè)新對(duì)象，帶著指定的原型對(duì)象和屬性

小試牛刀

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

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

new Object()

new創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。

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

new Object();

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

區(qū)別

new Object()繼承內(nèi)置對(duì)象Object，而Object.create()則是繼承指定對(duì)象可以通過(guò)Object.create(null) 創(chuàng)建一個(gè)干凈的對(duì)象，也就是沒(méi)有原型，而 new Object()創(chuàng)建的對(duì)象是 Object的實(shí)例，原型永遠(yuǎn)指向Object.prototype 

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

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

  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)

打印結(jié)果：

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)：

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

當(dāng)要設(shè)計(jì)通用組件或模塊時(shí)，假設(shè)要調(diào)用 a.something()，如果 a中不存在 something()時(shí)這條語(yǔ)句也可以正常工作的話，那你的 API 設(shè)計(jì)就會(huì)變得很“神奇”，對(duì)于未來(lái)維護(hù)者來(lái)說(shuō)這可能不太好理解。

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

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

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

小結(jié)一下吧：

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

總結(jié)

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

最新評(píng)論