「前端」new操作符究竟做了什麼

開門見山的說，new操作符可能是大部分JavaScript初學者的噩夢，這篇文章就來簡單詳細地介紹一下使用了new操作符後，究竟會發生什麼。
先看一段代碼：

function Person(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;
}
var member = new Person('Jack', 'Wang');
member.firstName;	// "Jack"
member.lastName;	// "Wang"
member.__proto__ === Person.prototype;	// true

爲什麼會這樣？這就涉及到使用new操作符後發生的一系列步驟：

第一步

創建一個空的對象：

var member = {};
// 或者
var member = new Object();

這一步很簡單易懂，new嘛，不用多說。

第二步

member.__proto__ = Person.prototype;

這一步就是進行原型鏈接，將member的__proto__鏈接到Person的原型上。
這也是爲什麼

member.__proto__ === Person.prototype;	// true

的值爲true的原因。
至於原型，不瞭解的移步：繼承與原型鏈

第三步

var that = Person.call(member);	// 綁定this並執行

將Person的this指向member，這也是爲什麼member.firstName和member.lastName返回的是"Jack"和"Wang"的原因。實際的執行過程是這樣的：

function Person(firstName, lastName) {
	member.firstName = firstName;
	member.lastName = lastName;
}

第四步

判斷Person函數的返回值：

• 如果是值類型（即基本類型），則丟棄；
• 如果是引用類型，則替換member；

Person函數中若沒有寫return語句，則默認返回undefined，屬於基本類型，丟棄。若return語句返回的是this，則由於第三步已經對this指向做了改變，返回的就是member本身，無所謂替換不替換。

今天有些憨憨，學什麼都學不進去，只好寫篇博客記錄一下備忘了