相信很多才接觸前端的小伙伴甚至工作幾年的前端小伙伴對(duì)new這個(gè)操作符的了解還停留在一知半解的地步虾标，比較模糊。
就比如前不久接觸到一個(gè)入職兩年的前端小伙伴灌砖，他告訴我new是用來(lái)創(chuàng)建對(duì)象的璧函，無(wú)可厚非，可能很多人都會(huì)這么答基显！
那這么答到底是錯(cuò)很是對(duì)呢蘸吓？
下面我們?nèi)鎭?lái)討論一下這個(gè)問(wèn)題：
我們要拿到一個(gè)對(duì)象，有很多方式撩幽，其中最常見(jiàn)的一種便是對(duì)象字面量：
var obj = {}
但是從語(yǔ)法上來(lái)看库继，這就是一個(gè)賦值語(yǔ)句，是把對(duì)面字面量賦值給了
obj這個(gè)變量（這樣說(shuō)或許不是很準(zhǔn)確窜醉，其實(shí)這里是得到了一個(gè)對(duì)象的實(shí)例Ｏ芴选！）很多時(shí)候榨惰，我們說(shuō)要?jiǎng)?chuàng)建一個(gè)對(duì)象拜英，很多小伙伴雙手一摸鍵盤，啪啪幾下就敲出了這句代碼琅催。
上面說(shuō)了居凶，這句話其實(shí)只是得到了一個(gè)對(duì)象的實(shí)例，那這句代碼到底還能不能和創(chuàng)建對(duì)象畫上等號(hào)呢藤抡？
我們繼續(xù)往下看侠碧。
要拿到一個(gè)對(duì)象的實(shí)例，還有一種和對(duì)象字面量等價(jià)的做法就是構(gòu)造函數(shù)：
var obj = new Object()
這句代碼一敲出來(lái)缠黍，相信小伙伴們對(duì)剛才我說(shuō)的
obj只是一個(gè)實(shí)例對(duì)象沒(méi)有異議了吧弄兜！那很多小伙伴又會(huì)問(wèn)了：這不就是
new了一個(gè)新對(duì)象出來(lái)嘛！沒(méi)錯(cuò)，這確實(shí)是new了一個(gè)新對(duì)象出來(lái)挨队，因?yàn)閖avascript之中，萬(wàn)物解釋對(duì)象蒿往。
obj是一個(gè)對(duì)象盛垦，而且是通過(guò)new運(yùn)算符得到的，所以說(shuō)很多小伙伴就肯定的說(shuō)：new就是用來(lái)創(chuàng)建對(duì)象的瓤漏！
這就不難解釋很多人把創(chuàng)建對(duì)象和實(shí)例化對(duì)象混為一談!!
我們?cè)趽Q個(gè)思路看看：既然js一切皆為對(duì)象腾夯，那為什么還需要?jiǎng)?chuàng)建對(duì)象呢？本身就是對(duì)象蔬充，我們何來(lái)創(chuàng)建一說(shuō)蝶俱？那我們可不可以把這是一種
繼承呢？image說(shuō)了這么多饥漫，相信不少伙伴已經(jīng)看暈了榨呆，但是我們的目的就是一個(gè)：理清new是來(lái)做繼承的而不是所謂的創(chuàng)建對(duì)象！庸队！
那繼承得到的實(shí)例對(duì)象有什么特點(diǎn)呢积蜻？
- 訪問(wèn)構(gòu)造函數(shù)里面的屬性
- 訪問(wèn)原型鏈上的屬性
下面是一段經(jīng)典的繼承，通過(guò)這段代碼來(lái)熱熱身彻消，好戲馬上開(kāi)始：
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
}
Person.prototype.nation = '漢'
Person.prototype.say = function() {
console.log(`My name is ${this.age}`)
}
var person = new Person('小明', 25)
console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)
person.say()
- 現(xiàn)在我們來(lái)解決第一個(gè)問(wèn)題：我們可以通過(guò)什么方式實(shí)現(xiàn)訪問(wèn)到構(gòu)造函數(shù)里面的屬性呢竿拆？答案是
call或apply
function Parent() {
this.name = ['A', 'B']
}
function Child() {
Parent.call(this)
}
var child = new Child()
console.log(child.name) // ['A', 'B']
child.name.push('C')
console.log(child.name) // ['A', 'B', 'C']
- 第一個(gè)問(wèn)題解決了，那我們又來(lái)解決第二個(gè)：那又怎么訪問(wèn)原型鏈上的屬性呢宾尚？答案是
__proto__
現(xiàn)在我們把上面那段熱身代碼稍加改造丙笋，不使用new來(lái)創(chuàng)建實(shí)例：
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
}
Person.prototype.nation = '漢'
Person.prototype.say = function() {
console.log(`My name is ${this.age}`)
}
// var person = new Person('小明', 25)
var person = New(Person, '小明', 25)
console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)
person.say()
function New() {
var obj = {}
Constructor = [].shift.call(arguments) // 獲取arguments第一個(gè)參數(shù)：構(gòu)造函數(shù)
// 注意：此時(shí)的arguments參數(shù)在shift()方法的截取后只剩下兩個(gè)元素
obj.__proto__ = Constructor.prototype // 把構(gòu)造函數(shù)的原型賦值給obj對(duì)象
Constructor.apply(obj, arguments) // 改變夠著函數(shù)指針，指向obj煌贴，這是剛才上面說(shuō)到的訪問(wèn)構(gòu)造函數(shù)里面的屬性和方法的方式
return obj
}
以上代碼中的New函數(shù)御板，就是new操作符的實(shí)現(xiàn)
主要步驟：
1. 創(chuàng)建一個(gè)空對(duì)象
2. 獲取arguments第一個(gè)參數(shù)
3. 將構(gòu)造函數(shù)的原型鏈賦給obj
4. 使用apply改變構(gòu)造函數(shù)this指向，指向obj對(duì)象崔步，其后咨跌，obj就可以訪問(wèn)到構(gòu)造函數(shù)中的屬性以及原型上的屬性和方法了
5. 返回obj對(duì)象
可能很多小伙伴看到這里覺(jué)得
new不就是做了這些事情嗎沮榜，然而~~然而我們卻忽略了一點(diǎn)，js里面的函數(shù)是有返回值的，即使構(gòu)造函數(shù)也不例外冲呢。
如果我們?cè)跇?gòu)造函數(shù)里面返回一個(gè)對(duì)象或一個(gè)基本值，上面的New函數(shù)會(huì)怎樣镀赌？
我們?cè)賮?lái)看一段代碼：
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
return {
name: name,
gender: '男'
}
}
Person.prototype.nation = '漢'
Person.prototype.say = function() {
console.log(`My name is ${this.age}`)
}
var person = new Person('小明', 25)
console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)
person.say()
執(zhí)行代碼油宜，發(fā)現(xiàn)只有name和gender這兩個(gè)字段如期輸出，age者甲、nation為undefined春感，say()報(bào)錯(cuò)。
改一下代碼構(gòu)造函數(shù)的代碼：
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
// return {
// name: name,
// gender: '男'
// }
return 1
}
// ...
執(zhí)行一下代碼，發(fā)現(xiàn)所有字段終于如期輸出鲫懒。
這里做個(gè)小結(jié)：
1. 當(dāng)構(gòu)造函數(shù)返回引用類型時(shí)嫩实，構(gòu)造里面的屬性不能使用，只能使用返回的對(duì)象窥岩；
2. 當(dāng)構(gòu)造函數(shù)返回基本類型時(shí)甲献，和沒(méi)有返回值的情況相同，構(gòu)造函數(shù)不受影響颂翼。
那我們現(xiàn)在來(lái)考慮下New函數(shù)要怎么改才能實(shí)現(xiàn)上面總結(jié)的兩點(diǎn)功能呢晃洒？繼續(xù)往下看：
function Person(name, age) {
// ...
}
function New() {
var obj = {}
Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
// Constructor.apply(obj, arguments)
var result = Constructor.apply(obj, arguments)
// return obj
return typeof result === 'object' ? result : obj
}
var person = New(Person, '小明', 25)
console.log(person.name)
// ...
執(zhí)行此代碼，發(fā)現(xiàn)已經(jīng)實(shí)現(xiàn)了上面總結(jié)的兩點(diǎn)朦乏。
解決方案：使用變量接收構(gòu)造函數(shù)的返回值球及，然后在New函數(shù)里面判斷一下返回值類型，根據(jù)不同類型返回不同的值呻疹。
看到這里吃引。又有小伙伴說(shuō)，這下new已經(jīng)完全實(shí)現(xiàn)了吧刽锤？＜始摺！
答案肯定是否定的姑蓝。
下面我們繼續(xù)看一段代碼：
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
// 返回引用類型
// return {
// name: name,
// gender: '男'
// }
// 返回基本類型
// return 1
// 例外
return null
}
再執(zhí)行代碼鹅心，發(fā)現(xiàn)又出問(wèn)題了！７挠旭愧！
又出問(wèn)題了！為什么……宙暇？
...
剛才不是總結(jié)了返回基本類型時(shí)構(gòu)造函數(shù)不受影響嗎输枯，而null就是基本類型啊占贫？
...
image
解惑：null是基本類型沒(méi)錯(cuò)桃熄，但是使用操作符typeof后我們不難發(fā)現(xiàn)：
typeof null === 'object' // true
特例：typeof null返回為'object'，因?yàn)樘厥庵?code>null被認(rèn)為是一個(gè)空的對(duì)象引用型奥。
明白了這一點(diǎn)瞳收，那問(wèn)題就好解決了：
function Person(name, age) {
// ...
}
function New() {
var obj = {}
Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
// Constructor.apply(obj, arguments)
var result = Constructor.apply(obj, arguments)
// return obj
// return typeof result === 'object' ? result : obj
return typeof result === 'object' ? result || obj : obj
}
var person = New(Person, '小明', 25)
console.log(person.name)
// ...
解決方案：判斷一下構(gòu)造函數(shù)返回值result，如果result是一個(gè)引用（引用類型和null）厢汹，就返回result螟深，但如果此時(shí)result為false（null），就使用操作符||之后的obj
好了烫葬，到現(xiàn)在應(yīng)該又有小伙伴發(fā)問(wèn)了界弧，這下New函數(shù)是徹徹底底實(shí)現(xiàn)了吧７豺摺！垢箕！
答案是划栓，離完成不遠(yuǎn)了！条获！
在功能上茅姜，New函數(shù)基本完成了，但是在代碼嚴(yán)謹(jǐn)度上月匣，我們還需要做一點(diǎn)工作，繼續(xù)往下看：
這里奋姿，我們?cè)谖恼麻_(kāi)篇做的鋪墊要派上用場(chǎng)了：
var obj = {}
實(shí)際上等價(jià)于
var obj = new Object()
前面說(shuō)了锄开，以上兩段代碼其實(shí)只是獲取了object對(duì)象的一個(gè)實(shí)例。再者称诗，我們本來(lái)就是要實(shí)現(xiàn)new萍悴，但是我們?cè)趯?shí)現(xiàn)new的過(guò)程中卻使用了new！
這個(gè)問(wèn)題把我們引入到了到底是先有雞還是先有蛋的問(wèn)題上寓免！
這里癣诱，我們就要考慮到ECMAScript底層的API了——Object.create(null)
這句代碼的意思才是真真切切地創(chuàng)建了一個(gè)對(duì)象！袜香！
function Person(name, age) {
// ...
}
function New() {
// var obj = {}
// var obj = new Object()
var obj = Object.create(null)
Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
// Constructor.apply(obj, arguments)
var result = Constructor.apply(obj, arguments)
// return obj
// return typeof result === 'object' ? result : obj
return typeof result === 'object' ? result || obj : obj
}
var person = New(Person, '小明', 25)
console.log(person.name)
console.log(person.age)
console.log(person.gender)
// 這樣改了之后撕予，以下兩句先注釋掉，原因后面再討論
// console.log(person.nation)
// person.say()
好了好了蜈首，小伙伴常常舒了一口氣实抡，這樣總算完成了！欢策！
但是吆寨，現(xiàn)實(shí)總是殘酷的！
image
小伙伴：啥踩寇？還有完沒(méi)完啄清？
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
}
Person.prototype.nation = '漢'
Person.prototype.say = function() {
console.log(`My name is ${this.age}`)
}
function New() {
// var obj = {}
// var obj = new Object()
var obj = Object.create(null)
Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
// Constructor.apply(obj, arguments)
var result = Constructor.apply(obj, arguments)
// return obj
// return typeof result === 'object' ? result : obj
return typeof result === 'object' ? result || obj : obj
}
var person = New(Person, '小明', 25)
console.log(person.name)
console.log(person.age)
console.log(person.gender)
// 這里解開(kāi)剛才的注釋
console.log(person.nation)
person.say()
別急，我們執(zhí)行一下修改后的代碼俺孙，發(fā)現(xiàn)原型鏈上的屬性nation和方法say()報(bào)錯(cuò)辣卒，這又是為什么呢？
從上圖我們可以清除地看到睛榄，Object.create(null)創(chuàng)建的對(duì)象是沒(méi)有原型鏈的添寺，而后兩個(gè)對(duì)象則是擁有__proto__屬性，擁有原型鏈懈费，這也證明了后兩個(gè)對(duì)象是通過(guò)繼承得來(lái)的计露。
那既然通過(guò)Object.create(null)創(chuàng)建的對(duì)象沒(méi)有原型鏈（原型鏈斷了），那我們?cè)趧?chuàng)建對(duì)象的時(shí)候把原型鏈加上不就行了，那怎么加呢票罐？
function Person(name, age) {
this.name = name
this.age = age
this.gender = '男'
}
Person.prototype.nation = '漢'
Person.prototype.say = function() {
console.log(`My name is ${this.age}`)
}
function New() {
Constructor = [].shift.call(arguments)
// var obj = {}
// var obj = new Object()
// var obj = Object.create(null)
var obj = Object.create(Constructor.prototype)
// obj.__proto__ = Constructor.prototype
// Constructor.apply(obj, arguments)
var result = Constructor.apply(obj, arguments)
// return obj
// return typeof result === 'object' ? result : obj
return typeof result === 'object' ? result || obj : obj
}
var person = New(Person, '小明', 25)
console.log(person.name)
console.log(person.age)
console.log(person.gender)
console.log(person.nation)
person.say()
這樣創(chuàng)建的對(duì)象就擁有了它初始的原型鏈了叉趣，這個(gè)原型鏈?zhǔn)俏覀儌鬟M(jìn)來(lái)的構(gòu)造函數(shù)賦予它的。
也就是說(shuō)该押，我們?cè)趧?chuàng)建新對(duì)象的時(shí)候疗杉，就為它指定了原型鏈了——新創(chuàng)建的對(duì)象繼承自傳進(jìn)來(lái)的構(gòu)造函數(shù)！
看到這里蚕礼，小伙伴們長(zhǎng)長(zhǎng)舒了一口氣烟具，有本事你再給我安排一個(gè)坑出來(lái)！
image既然都看到這里了奠蹬，大家要相信我們離最終的曙光已經(jīng)不遠(yuǎn)了朝聋！
image我想說(shuō)的是，坑是沒(méi)有了囤躁，但是為了程序員吹毛求疵的精神冀痕！哦不對(duì)，是精益求精的精神狸演，我們還有必要啰嗦一點(diǎn)點(diǎn)Ｑ陨摺！
想必細(xì)心的小伙伴已經(jīng)注意到了宵距，為什么最后一步中的以下代碼：
Constructor = [].shift.call(arguments)
var obj = Object.create(Constructor.prototype)
不能使用以下代碼來(lái)代替腊尚？
var obj = Object.create(null)
Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
換個(gè)方式說(shuō)，這兩段代碼大致的意思基本相同：都是將構(gòu)造器的原型賦予新創(chuàng)建的對(duì)象满哪。但是為何第二段代碼要報(bào)錯(cuò)（訪問(wèn)不到原型鏈上的屬性）呢跟伏？
這個(gè)問(wèn)題很吃基本功，認(rèn)真去研究研究js的底層APIObject.create以及原型鏈等知識(shí)翩瓜，就會(huì)明白其中的道理受扳。小伙伴可以拉到文章末尾，我把重點(diǎn)都記錄下來(lái)了兔跌，以供大家參考勘高。
現(xiàn)在，我們來(lái)梳理下最終的New函數(shù)做了什么事坟桅，也就是本文討論的結(jié)果——new操作符到底做了什么华望？
- 獲取實(shí)參中的第一個(gè)參數(shù)（構(gòu)造函數(shù)），就是調(diào)用New函數(shù)傳進(jìn)來(lái)的第一個(gè)參數(shù)仅乓，暫時(shí)記為
Constructor赖舟； - 使用
Constructor的原型鏈結(jié)合Object.create來(lái)創(chuàng)建一個(gè)對(duì)象，此時(shí)新對(duì)象的原型鏈為Constructor函數(shù)的原型對(duì)象夸楣；（結(jié)合我們上面討論的宾抓，要訪問(wèn)原型鏈上面的屬性和方法子漩，要使用實(shí)例對(duì)象的proto屬性） - 改變
Constructor函數(shù)的this指向，指向新創(chuàng)建的實(shí)例對(duì)象石洗，然后call方法再調(diào)用Constructor函數(shù)幢泼，為新對(duì)象賦予屬性和方法；（結(jié)合我們上面討論的讲衫，要訪問(wèn)構(gòu)造函數(shù)的屬性和方法缕棵，要使用call或apply） - 返回新創(chuàng)建的對(duì)象，為
Constructor函數(shù)的一個(gè)實(shí)例對(duì)象涉兽。
現(xiàn)在我招驴，我們來(lái)回答文章開(kāi)始時(shí)提出的問(wèn)題，new是用來(lái)創(chuàng)建對(duì)象的嗎枷畏？
現(xiàn)在我們可以勇敢的回答别厘，new是用來(lái)做繼承的，而創(chuàng)建對(duì)象的其實(shí)是Object.create(null)矿辽。
在new操作符的作用下，我們使用新創(chuàng)建的對(duì)象去繼承了他的構(gòu)造函數(shù)上的屬性和方法郭厌、以及他的原型鏈上的屬性和方法袋倔！
寫在最后：
補(bǔ)充一點(diǎn)關(guān)于
原型鏈的知識(shí):
- JavaScript中的函數(shù)也是對(duì)象，而且對(duì)象除了使用字面量定以外折柠，都需要通過(guò)函數(shù)來(lái)創(chuàng)建對(duì)象宾娜；
- prototype屬性可以給函數(shù)和對(duì)象添加可共享（繼承）的方法、屬性扇售，而proto是查找某函數(shù)或?qū)ο蟮脑玩湻绞剑?/li>
- prototype和proto都指向原型對(duì)象前塔；
- 任意一個(gè)函數(shù)（包括構(gòu)造函數(shù)）都有一個(gè)prototype屬性，指向該函數(shù)的原型對(duì)象承冰；
- 任意一個(gè)實(shí)例化的對(duì)象华弓，都有一個(gè)proto屬性，指向該實(shí)例化對(duì)象的構(gòu)造函數(shù)的原型對(duì)象困乒。
補(bǔ)充一下關(guān)于
Object.create()的知識(shí)：
- Object.create(null)可以創(chuàng)建一個(gè)沒(méi)有原型鏈寂屏、真正意義上的空對(duì)象，該對(duì)象不擁有js原生對(duì)象（Object）的任何特性和功能娜搂。
就如：即使通過(guò)人為賦值的方式（newObj.__proto__ = constructor.prototype）給這個(gè)對(duì)象賦予了原型鏈迁霎，
也不能實(shí)現(xiàn)原型鏈逐層查找屬性的功能，因?yàn)檫@個(gè)對(duì)象看起來(lái)似乎即使有了"__proto__"屬性百宇，但是它始終沒(méi)有直接或間接繼承自O(shè)bject.prototype,
也就不可能擁有js原生對(duì)象（Object）的特性或功能了考廉；- 該API配合Object.defineProperty可以創(chuàng)建javascript極其靈活的自定義對(duì)象；
- 該API是實(shí)現(xiàn)繼承的一種方式携御；
- ...
