JavaScript深入系列第十二篇硝桩，通過new的模擬實(shí)現(xiàn)，帶大家揭開使用new獲得構(gòu)造函數(shù)實(shí)例的真相
new
一句話介紹 new:
new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類型之一
也許有點(diǎn)難懂，我們?cè)谀M new 之前接谨，先看看 new 實(shí)現(xiàn)了哪些功能。
舉個(gè)例子：
// Otaku 御宅族塘匣，簡(jiǎn)稱宅
function Otaku (name, age) {
this.name = name;
this.age = age;
this.habit = 'Games';
}
// 因?yàn)槿狈﹀憻挼木壒逝Ш溃眢w強(qiáng)度讓人擔(dān)憂
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60
person.sayYourName(); // I am Kevin
從這個(gè)例子中，我們可以看到忌卤，實(shí)例 person 可以：
- 訪問到 Otaku 構(gòu)造函數(shù)里的屬性
- 訪問到 Otaku.prototype 中的屬性
接下來扫夜，我們可以嘗試著模擬一下了。
因?yàn)?new 是關(guān)鍵字驰徊，所以無法像 bind 函數(shù)一樣直接覆蓋笤闯，所以我們寫一個(gè)函數(shù)，命名為 objectFactory棍厂，來模擬 new 的效果颗味。用的時(shí)候是這樣的：
function Otaku () {
……
}
// 使用 new
var person = new Otaku(……);
// 使用 objectFactory
var person = objectFactory(Otaku, ……)
初步實(shí)現(xiàn)
分析：
因?yàn)?new 的結(jié)果是一個(gè)新對(duì)象，所以在模擬實(shí)現(xiàn)的時(shí)候牺弹，我們也要建立一個(gè)新對(duì)象浦马，假設(shè)這個(gè)對(duì)象叫 obj，因?yàn)?obj 會(huì)具有 Otaku 構(gòu)造函數(shù)里的屬性张漂，想想經(jīng)典繼承的例子晶默，我們可以使用 Otaku.apply(obj, arguments)來給 obj 添加新的屬性。
在 JavaScript 深入系列第一篇中航攒，我們便講了原型與原型鏈磺陡，我們知道實(shí)例的 __proto__ 屬性會(huì)指向構(gòu)造函數(shù)的 prototype，也正是因?yàn)榻⑵疬@樣的關(guān)系漠畜，實(shí)例可以訪問原型上的屬性币他。
現(xiàn)在，我們可以嘗試著寫第一版了：
// 第一版代碼
function objectFactory() {
var obj = new Object(),
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
Constructor.apply(obj, arguments);
return obj;
};
在這一版中盆驹，我們：
- 用new Object() 的方式新建了一個(gè)對(duì)象 obj
- 取出第一個(gè)參數(shù)圆丹，就是我們要傳入的構(gòu)造函數(shù)。此外因?yàn)?shift 會(huì)修改原數(shù)組躯喇，所以 arguments 會(huì)被去除第一個(gè)參數(shù)
- 將 obj 的原型指向構(gòu)造函數(shù)辫封，這樣 obj 就可以訪問到構(gòu)造函數(shù)原型中的屬性
- 使用 apply，改變構(gòu)造函數(shù) this 的指向到新建的對(duì)象廉丽，這樣 obj 就可以訪問到構(gòu)造函數(shù)中的屬性
- 返回 obj
更多關(guān)于：
原型與原型鏈倦微，可以看《JavaScript深入之從原型到原型鏈》
apply，可以看《JavaScript深入之call和apply的模擬實(shí)現(xiàn)》
經(jīng)典繼承正压，可以看《JavaScript深入之繼承》
復(fù)制以下的代碼欣福，到瀏覽器中，我們可以做一下測(cè)試：
function Otaku (name, age) {
this.name = name;
this.age = age;
this.habit = 'Games';
}
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}
function objectFactory() {
var obj = new Object(),
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
Constructor.apply(obj, arguments);
return obj;
};
var person = objectFactory(Otaku, 'Kevin', '18')
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60
person.sayYourName(); // I am Kevin
[]~(￣▽￣)~**
返回值效果實(shí)現(xiàn)
接下來我們?cè)賮砜匆环N情況焦履，假如構(gòu)造函數(shù)有返回值拓劝，舉個(gè)例子：
function Otaku (name, age) {
this.strength = 60;
this.age = age;
return {
name: name,
habit: 'Games'
}
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // undefined
console.log(person.age) // undefined
在這個(gè)例子中雏逾，構(gòu)造函數(shù)返回了一個(gè)對(duì)象，在實(shí)例 person 中只能訪問返回的對(duì)象中的屬性郑临。
而且還要注意一點(diǎn)栖博，在這里我們是返回了一個(gè)對(duì)象，假如我們只是返回一個(gè)基本類型的值呢厢洞？
再舉個(gè)例子：
function Otaku (name, age) {
this.strength = 60;
this.age = age;
return 'handsome boy';
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // 60
console.log(person.age) // 18
結(jié)果完全顛倒過來仇让，這次盡管有返回值，但是相當(dāng)于沒有返回值進(jìn)行處理躺翻。
所以我們還需要判斷返回的值是不是一個(gè)對(duì)象丧叽，如果是一個(gè)對(duì)象，我們就返回這個(gè)對(duì)象公你，如果沒有踊淳，我們?cè)摲祷厥裁淳头祷厥裁础?/p>
再來看第二版的代碼，也是最后一版的代碼：
// 第二版的代碼
function objectFactory() {
var obj = new Object(),
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
var ret = Constructor.apply(obj, arguments);
return typeof ret === 'object' ? ret : obj;
};
作者：冴羽
github：https://github.com/mqyqingfeng/Blog
掘金主頁：https://juejin.im/user/58e4b9b261ff4b006b3227f4
segmentfault主頁：https://segmentfault.com/u/yayu/articles
Vicky丶Amor 經(jīng)授權(quán)轉(zhuǎn)載省店，版權(quán)歸原作者所有嚣崭。
求關(guān)注，求點(diǎn)贊
