今天看到一道面试题,以下,问: 实例化 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 null
,返回的也是构造函数实例后的对象而非null
);若是函数return对象,那么返回这个对象学习
咱们接着看 MDN 文档的解释,毕竟光光看这几个demo没有说服力。ui
一块儿来理解下 new
到底作了什么工做吧~ 就拿下面这个 demo
分析this
function Person(name) {
this.name = name;
return {a: 1}
}
var p = new Person('fe')
复制代码
当调用 new Person(...)
时,会进行如下几步:spa
Person.prototype
的新对象会被建立'fe'
调用构造函数 Person
, 并将 this
绑定到新建立的对象Person
返回的对象就是 new
表达式的结果 =》 Person
返回的对象是 {a: 1}
因此new
表达式的结果为 {a:1}
; 若是 Person
没有返回值(通常构造函数都不返回值)那么使用步骤1建立的对象,即==》 继承自 Person.prototype
的新对象貌似照着文档可以些许理解了,假若模拟实现 new
运算符更能深刻理解 new
如下是 new 的模拟实现,代码来源 : JavaScript深刻之new的模拟实现
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, 'fe')
复制代码
固然了,学习别人的代码不能仅仅只是照搬过来,起码得理解这个代码吧。 使用
cons
是调用 objectFactory
方法的第一个参数,即构造函数; 由于 shift
会改变原数组,因此改变后的 argument
即为调用构造函数的参数 (这里补充说明下: arguments 是一个对应于传递给函数的参数的类数组对象。)obj
的原型指向构造函数, 这样 obj 就能访问到构造函数原型上的属性cons
的 this
指向 obj
,这样 obj
能访问构造函数里的属性return null
的特例,由于历史遗留问题 typeof null === 'object'
);若是不是对象就返回 obj
(注意:这里的 obj
已经不是一个空对象)若是你耐心看到了这里,那么十分感谢。如文章有错误,望给予指正~