解讀new?Object()和Object.create()的區(qū)別
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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js禁止document element對(duì)象選中文本實(shí)現(xiàn)代碼
禁止document element對(duì)象選中文本在某在情況下還是很有必要的接下來(lái)本文將使用js實(shí)現(xiàn),感興趣的各位可以參考下哈2013-03-03
微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法
這篇文章主要介紹了微信小程序配置服務(wù)器提示驗(yàn)證token失敗的解決方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
javascript 表格排序和表頭浮動(dòng)效果(擴(kuò)展SortTable)
前段時(shí)間一個(gè)項(xiàng)目有大量頁(yè)面用到表格排序和表頭浮動(dòng)的效果,在網(wǎng)上找了幾個(gè)表格排序的js代碼,最后選擇了 Stuart Langridge的SortTable,在SortTable基礎(chǔ)上做了些擴(kuò)展,加上了表頭浮動(dòng)效果及一些小功能。2009-04-04
javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法
這篇文章主要介紹了javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法,涉及javascript針對(duì)節(jié)點(diǎn)的操作與XML文件解析的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)代碼實(shí)例
在本篇文章里我們給大家分享了關(guān)于JS實(shí)現(xiàn)十分鐘倒計(jì)時(shí)的相關(guān)實(shí)例代碼,有需要的朋友們可以學(xué)習(xí)下。2018-10-10
javascript和jquery分別實(shí)現(xiàn)的九九乘法表代碼
javascript 九九乘法表 附j(luò)query 實(shí)現(xiàn)的九九乘法表代碼2010-03-03
JavaScript實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10

