「前端」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本身，无所谓替换不替换。

今天有些憨憨，学什么都学不进去，只好写篇博客记录一下备忘了