一道面试题引起的思考 --- 理解 new 运算符

今天看到一道面试题,以下,问: 实例化 Person 过程当中,Person返回什么(或者 p 等于什么)?git

function Person(name) {
    this.name = name
    return name;
}
let p = new Person('Tom');

说实话,第一反应我觉得值为 'Tom',等到我把代码丢到控制台一输出,才明白我错了。天呐,new运算符给无视掉了吗???
撇开 new 的存在,咱们修改下代码github

function Person(name) {
    this.name = name
    return name;
}
let p = Person('Tom');
console.log(p);

很显然,输出的结果是 'Tom', 可是有 new 存在呢?接下去,咱们来捋一捋。
首先,我先去 MDN上搜索了 new 的定义面试

new 运算符建立一个用户定义的对象类型的实例或具备构造函数的内置对象的实例。

emmmm,至关晦涩难懂。数组

那咱们试着写几个栗子看看结果吧app

function Person1(name) {
  this.name = name;
  // 没有返回值
}

function Person2(name) {
  this.name = name;
  return name;
  // 返回非对象
}

function Person3(name) {
  this.name = name;
  return { a: 1 };
  // 返回对象
}

function Person4(name) {
  this.name = name;
  return null;
  // 返回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对象,那么返回这个对象(特例:return null,返回的也是构造函数实例后的对象而非null)函数

咱们接着看 MDN 文档的解释,毕竟光光看这几个demo没有说服力。学习

clipboard.png

一块儿来理解下 new 到底作了什么工做吧~
就拿下面这个 demo分析this

function Person(name) {
  this.name = name;
  return {a: 1}
}
var p = new Person('fefeng')

当调用 new Person(...)时,会进行如下几步:spa

  • 首先是 继承自 Person.prototype的新对象会被建立
  • 使用参数 'fefeng' 调用构造函数 Person, 并将 this 绑定到新建立的对象
  • Person 返回的对象就是 new 表达式的结果 =》 Person 返回的对象是 {a: 1} 因此new 表达式的结果为 {a:1} ; 若是 Person 没有返回值(通常构造函数都不返回值)那么使用步骤1建立的对象,即==》 继承自 Person.prototype 的新对象

貌似照着文档可以些许理解了,假若模拟实现 new运算符更能深刻理解 new
如下是 new 的模拟实现,代码来源 : JavaScript深刻之new的模拟实现prototype

function objectFactory() {
  var obj = new Object(),
  cons = [].shift.call(arguments)
  obj.__proto__ = cons.prototype
  var ret = cons.apply(obj, arguments)
  return typeof ret === 'object' ? ret|| obj : obj
}
function Person(name) {
  this.name = name;
  return {a: 1}
}
var p = objectFactory(Person, 'fefeng')

固然了,学习别人的代码不能仅仅只是照搬过来,起码得理解这个代码吧。
使用

  • 首先是建立一个对象,
  • cons 是调用 objectFactory 方法的第一个参数,即构造函数; 由于 shift 会改变原数组,因此改变后的 argument 即为调用构造函数的参数 (这里补充说明下: arguments 是一个对应于传递给函数的参数的类数组对象。)
  • obj 的原型指向构造函数, 这样 obj 就能访问到构造函数原型上的属性
  • 将构造函数 consthis 指向 obj,这样 obj 能访问构造函数里的属性
  • 判断返回的值是否是一个对象,若是是对象即返回它(固然这里要处理 return null 的特例);若是不是对象就返回 obj (注意:这里的 obj 已经不是一个空对象)

若是你耐心看到了这里,那么十分感谢。如文章有错误,望给予指正~

相关文章
相关标签/搜索