几道关于new的面试题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

前言

new是js的一个关键字，用于通过构造函数来生成一个实例对象，今天就通过题目再深入认识一下new吧

定义

查看MDN上关于new实际做了什么，可以看到以下几点：

1. 创建一个空的简单JavaScript对象（即 {} ）；
2. 为步骤1新创建的对象添加属性 __proto__ ，将该属性链接至构造函数的原型对象 ；
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。

纸上得来终觉浅，我们看几道题目

题目

题1

const Foo = ()=>{
    this.a = 1;
}
console.log(new Foo().a)

这一题还是很简单的，结果是会报错，那为什么会报错呢？

因为步骤3，将新创建的对象作为this的上下文，即this = obj，而箭头函数是没有自身的this，箭头函数的this取决于外部运行时的位置，所以不能作为构造函数，因此会报错：

Uncaught TypeError: Foo is not a constructor

题2

function Foo(){
    this.a = 1;
}
Foo.prototype.b = 3
console.log(new Foo().b)

这一题主要针对原型链的知识

当实例上没有找到属性时，就会沿着原型链查找，而Foo.prototype正是构造函数的原型对象

即步骤2的操作为：obj.__proto__ = Foo.prototype,当新对象上没有该属性时，就会在__proto__中找，所以在原型对象上找到了b 输出结果为:

3

题3

function Foo(){
    this.a = 1;
    return {b:2}
}
console.log(new Foo())

这一题是针对步骤4了

当构造函数返回了一个对象时，new生成的对象会是构造函数返回的对象，所以结果是：

{b: 2}

题4

function Foo(){
    this.a = 1;
    return false
}
console.log(new Foo())

依然是针对步骤4

如果该函数没有返回对象，则返回this，即新创建的对象，所以结果是：

{a: 1}

小结

通过这些题目，更能加深对new实际操作的理解和认识，如果有疑问或错误可以在评论区指出哈