理解 new 運算子

舞動乾坤發表於2018-12-21

轉自一道面試題引發的思考：理解 new 運算子

轉自重學 JS 系列：聊聊 new 操作符

今天看到一道面試題，如下，問: 例項化 Person 過程中，Person返回什麼（或者 p 等於什麼）？

functionPerson(name) {
    this.name = name
    return name;
}
let p = new Person('Tom');
複製程式碼

說實話，第一反應我以為值為 'Tom'，等到我把程式碼丟到控制檯一輸出，才明白我錯了。天吶，new運算子給無視掉了嗎？？？ 撇開 new 的存在，我們修改下程式碼

functionPerson(name) {
    this.name = name
    return name;
}
let p = Person('Tom');
console.log(p);
複製程式碼

很顯然，輸出的結果是 'Tom', 但是有 new 存在呢？接下去，我們來捋一捋。 首先，我先去 MDN上搜尋了 new 的定義

new 運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項。

emmmm，相當晦澀難懂。

那我們試著寫幾個栗子看看結果吧

functionPerson1(name) {
  this.name = name;
  // 沒有返回值
}

functionPerson2(name) {
  this.name = name;
  return name;
  // 返回非物件
}

functionPerson3(name) {
  this.name = name;
  return { a: 1 };
  // 返回物件
}

functionPerson4(name) {
  this.name = name;
  returnnull;
  // 返回null
}

var p1 = new Person1("aa");
var p2 = new Person2("bb");
var p3 = new Person3("cc");
var p4 = new Person4("dd");

console.log(p1); // Person1 {name: "aa"}
console.log(p2); // Person2 {name: "bb"}
console.log(p3); // {a: 1}
console.log(p4); // Person4 {name: "dd"}
複製程式碼

根據上面幾個栗子，我們能得出結論：當使用 new 來建立物件||呼叫建構函式時，如果函式沒有返回值|| 返回值是非物件，那麼返回的就是建構函式例項後的物件（注意：return null，返回的也是建構函式例項後的物件而非null)；如果函式return物件，那麼返回這個物件

我們接著看 [MDN] 文件的解釋，畢竟光光看這幾個demo沒有說服力。

理解 new 運算子
一起來理解下 new 到底做了什麼工作吧~ 就拿下面這個 demo分析

functionPerson(name) {
  this.name = name;
  return {a: 1}
}
var p = new Person('fe')
複製程式碼

當呼叫 new Person(...)時，會進行以下幾步：

  • 首先是 繼承自 Person.prototype的新物件會被建立
  • 使用引數 'fe' 呼叫建構函式 Person, 並將 this 繫結到新建立的物件
  • 由 Person 返回的物件就是 new 表示式的結果 =》 Person 返回的物件是 {a: 1} 所以new 表示式的結果為 {a:1} ； 如果 Person 沒有返回值（一般建構函式都不返回值）那麼使用步驟1建立的物件，即==》 繼承自 Person.prototype 的新物件

貌似照著文件能夠些許理解了，倘若模擬實現 new運算子更能深入理解 new 以下是 new 的模擬實現，程式碼來源 : JavaScript深入之new的模擬實現

functionobjectFactory() {
  var obj = newObject(),
  cons = [].shift.call(arguments)
  obj.__proto__ = cons.prototype
  var ret = cons.apply(obj, arguments)
  returntypeof ret === 'object' ? ret|| obj : obj
}
functionPerson(name) {
  this.name = name;
  return {a: 1}
}
var p = objectFactory(Person, 'fe')
複製程式碼

當然了，學習別人的程式碼不能僅僅只是照搬過來，起碼得理解這個程式碼吧。 使用

  • 首先是建立一個物件
  • cons 是呼叫 objectFactory 方法的第一個引數，即建構函式; 因為 shift 會改變原陣列，所以改變後的 argument 即為呼叫建構函式的引數 (這裡補充說明下： arguments 是一個對應於傳遞給函式的引數的類陣列物件。)
  • 將 obj 的原型指向建構函式, 這樣 obj 就能訪問到建構函式原型上的屬性
  • 將建構函式 cons 的 this 指向 obj，這樣 obj 能訪問建構函式裡的屬性
  • 判斷返回的值是不是一個物件，如果是物件即返回它（當然這裡要處理 return null 的特例，因為歷史遺留問題 typeof null === 'object'）;如果不是物件就返回 obj (注意：這裡的 obj 已經不是一個空物件）

如果你耐心看到了這裡，那麼十分感謝。如文章有錯誤，望給予指正~

function new2(MyFun, ...list) {
	if(!MyFun)  throw new Error("第一個引數必須是函式");
	let o = Object.create(MyFun.prototype);
	let k = MyFun.call(o, ...list);
	return k&&(typeof k === 'object') ? k : o;
}

function Car(color, name) {
	this.color = color;
	this.name = name;
	return null;
}

Car.prototype.fun=function(){
	console.log(this.color,this.name)
}

var obj=new2(Car,123,'小花');
console.log(obj)
console.log(obj.__proto__===Car.prototype);
console.log(Car.prototype.isPrototypeOf(obj))
console.log(Object.prototype.isPrototypeOf(obj))
console.log(obj instanceof Car)
console.log(obj.constructor===Car);

var obj=new2(null,123,'小花');
複製程式碼

轉自重學 JS 系列：聊聊 new 操作符

這是重學 JS 系列的第一篇文章，寫這個系列的初衷也是為了夯實自己的 JS 基礎。既然是重學，肯定不會從零開始介紹一個知識點，如有遇到不會的內容請自行查詢資料。

new 的作用

我們先來通過兩個例子來了解 new 的作用

functionTest(name) {
  this.name = name
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const t = new Test('yck')
console.log(t.name) // 'yck'
t.sayName() // 'yck'複製程式碼
複製程式碼

從上面一個例子中我們可以得出這些結論：

  • new 通過建構函式 Test 建立出來的例項可以訪問到建構函式中的屬性
  • new 通過建構函式 Test 建立出來的例項可以訪問到建構函式原型鏈中的屬性，也就是說通過 new 操作符，例項與建構函式通過原型鏈連線了起來

但是當下的建構函式 Test 並沒有顯式 return 任何值（預設返回 undefined），如果我們讓它返回值會發生什麼事情呢？

functionTest(name) {
  this.name = name
  return1
}
const t = new Test('yck')
console.log(t.name) // 'yck'複製程式碼
複製程式碼

雖然上述例子中的建構函式中返回了 1，但是這個返回值並沒有任何的用處，得到的結果還是和之前的例子完全一樣。

那麼通過這個例子，我們又可以得出一個結論：

  • 建構函式如果返回原始值（雖然例子中只有返回了 1，但是你可以試試其他的原始值，結果還是一樣的），那麼這個返回值毫無意義

試完了返回原始值，我們再來試試返回物件會發生什麼事情吧

functionTest(name) {
  this.name = name
  console.log(this) // Test { name: 'yck' }return { age: 26 }
}
const t = new Test('yck')
console.log(t) // { age: 26 }console.log(t.name) // 'undefined'複製程式碼
複製程式碼

通過這個例子我們可以發現，雖然建構函式內部的 this 還是依舊正常工作的，但是當返回值為物件時，這個返回值就會被正常的返回出去。

那麼通過這個例子，我們再次得出了一個結論：

  • 建構函式如果返回值為物件，那麼這個返回值會被正常使用

這兩個例子告訴了我們一點，建構函式儘量不要返回值。因為返回原始值不會生效，返回物件會導致 new 操作符沒有作用。

通過以上幾個例子，相信大家也大致瞭解了 new 操作符的作用了，接下來我們就來嘗試自己實現 new 操作符。

自己實現 new 操作符

首先我們再來回顧下 new 操作符的幾個作用

  • new 操作符會返回一個物件，所以我們需要在內部建立一個物件
  • 這個物件，也就是建構函式中的 this，可以訪問到掛載在 this 上的任意屬性
  • 這個物件可以訪問到建構函式原型上的屬性，所以需要將物件與建構函式連結起來
  • 返回原始值需要忽略，返回物件需要正常處理

回顧了這些作用，我們就可以著手來實現功能了

functioncreate(Con, ...args) {
  let obj = {}
  Object.setPrototypeOf(obj, Con.prototype)
  let result = Con.apply(obj, args)
  return result instanceofObject ? result : obj
}
複製程式碼
複製程式碼

這就是一個完整的實現程式碼，我們通過以下幾個步驟實現了它：

  1. 首先函式接受不定量的引數，第一個引數為建構函式，接下來的引數被建構函式使用
  2. 然後內部建立一個空物件 obj
  3. 因為 obj 物件需要訪問到建構函式原型鏈上的屬性，所以我們通過 setPrototypeOf 將兩者聯絡起來。這段程式碼等同於 obj.__proto__ = Con.prototype
  4. 將 obj 繫結到建構函式上，並且傳入剩餘的引數
  5. 判斷建構函式返回值是否為物件，如果為物件就使用建構函式返回的值，否則使用 obj，這樣就實現了忽略建構函式返回的原始值

接下來我們來使用下該函式，看看行為是否和 new 操作符一致

functionTest(name, age) {
  this.name = name
  this.age = age
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const a = create(Test, 'yck', 26)
console.log(a.name) // 'yck'console.log(a.age) // 26
a.sayName() // 'yck'複製程式碼
複製程式碼

雖然實現程式碼只有寥寥幾行，但是結果很完美

理解 new 運算子

最後

我們通過這篇文章重學了 new 操作符，如果你還有什麼疑問歡迎在評論區與我互動。

我所有的系列文章都會在我的 Github 中最先更新，有興趣的可以關注下。今年主要會著重寫以下三個專欄

  • 重學 JS
  • React 進階
  • 重寫元件

最後，覺得內容有幫助可以關注下我的公眾號 「前端真好玩」咯，會有很多好東西等著你。

相關文章