前端面试题（二）原型 & new & instanceof & this

原型

每个函数都有一个prototype属性 ，除了Function.prototype.bind(), 该属性指向原型。

每个对象都有一个__proto__属性，指向了该对象的构造函数的原型。

对象可以通过__proto__ 来寻找不属于该对象的属性，__proto__将对象串联起来组成了原型链

new

1.生成一个新对象

2.连接到原型

3.绑定this

4.返回新对象

在调用new的过程中会发生以上四件事情，我们也可以自己实现一个 new

function create (){
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数
    let Con = [].shift.call(arguments)
    // 链接到原型
    obj.__proto__ = Con.prototype
    // 绑定this 执行构造函数
    let result = Con.call( obj, arguments );
    // 确保 new出来的是个对象
    return typeof result === 'object' ? result : obj
    
}

对于实例对象来说，都是通过new产生的，无论是 function Foo()  还是 let a = { b : 1 } 

instanceof

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype.

我们也可以试着实现一下 instanceof

function instanceof (left ,right) {
     // 获取类型的原型
     let prototype = right.prototype;
     // 获取对象的原型
     let left = left.__proto__;
     // 判断对象的原型是否等于类型的原型
     while (true){
         if(left == null)
           return false   
         if(prototype === left)
           return true
          left = left.__proto__  
     }     
}

this

this 是很多人会混淆的概念，但是其实他一点都不难，你只需要记住几个规则就可以了。

function foo() {
 console.log(this.a) }
var a = 1
foo()
var obj = {
 a: 2,
 foo: foo
}
obj.foo()
// 以上两者情况 `this` 只依赖于调⽤函数前的对象，优先级是第⼆个情况⼤于第⼀个情况
// 以下情况是优先级最⾼的，`this` 只会绑定在 `c` 上，不会被任何⽅式修改 `this` 指 向
var c = new foo()
c.a = 3
console.log(c.a)
// 还有种就是利⽤ call，apply，bind 改变 this，这个优先级仅次于 new

下面让我们看看箭头函数中的this

function a() {
 return () => {
 return () => {
 console.log(this)
 }
 }
}
console.log(a()()())

箭头函数中其实是没有this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this .在这个例子中，因为调用a 符合前面代码中的第一个情况， 所以 this 是 window。并且 this 一旦绑定了上下文，就不会被任何代码改变。