this、apply、call、bind

提示

简单理解：this 永远指向最后调用它的那个对象。（匿名函数的 this 永远指向 window）

改变 this 的指向

1. 箭头函数
2. 函数内部使用 let _this=this 保存 this
3. 使用 apply、call、bind

箭头函数

1. 箭头函数的 this 始终指向函数定义时的 this，而非执行时。
2. 箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。
3. 也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。（可以用扩展运算符代替）
4. 没有 prototype

apply、call、bind 区别

1. apply

   • 概述：apply() 方法会立即调用执行该函数

   • 语法：fun.apply(thisArg, [argsArray]) ，参数为组数（或类数组）形式

   • 示例：

     let obj={
       name:'bar',
       fn:function(a,b){
         console.log(a+b)
       }
     }
     let fun=obj.fn
     fun.apply(obj,[1,2]) //3
     

2. call

   • 概述：call() 方法会立即调用执行该函数

   • 语法：fun.call(thisArg[, arg1[, arg2[, ...]]]) ，参数为给定的参数序列

   • 示例：

     let obj={
       name:'bar',
       fn:function(a,b){
         console.log(a+b)
       }
     }
     let fun=obj.fn
     fun.call(obj,1,2) //3
     

3. bind

   • 概述：bind() 是将函数返回，因此后面还需要加()才能调用。

   • 语法：同 call() 方法

   • 示例：

     let obj={
       name:'bar',
       fn:function(a,b){
         console.log(a+b)
       }
     }
     let fun=obj.fn
     fun.bind(obj,1,2) // 没有输出
     fun.bind(obj,1,2)() // 3 手动调用执行
     

创建构造函数 new 的过程

• 伪代码表示：

var a = new myFunction("Li","Cherry");

new myFunction{
    var obj = {};
    obj.__proto__ = myFunction.prototype;
    var result = myFunction.call(obj,"Li","Cherry");
    return typeof result === 'object'? result : obj;
}

• 过程分析：

1. 创建一个空对象 obj;
2. 将新创建的空对象的隐式原型指向其构造函数的显示原型。
3. 使用 call 改变 this 的指向
4. 如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。