this、new、call、apply、bind

this、call、apply、bind

this的指向问题

在ES5中，this的指向始终坚持一个原理：this永远指向最后调用它的那个对象，注意是在ES5中。

Case1:

    var name = "windowsName";
    function a() {
        var name = "Cherry";

        console.log(this.name);          // windowsName

        console.log("inner:" + this);    // inner: Window
    }
    a();
    console.log("outer:" + this)         // outer: Window

因为根据刚刚的那句话“this 永远指向最后调用它的那个对象”，我们看最后调用 a的地方 a();，前面没有调用的对象那么就是全局对象 window，这就相当于是 window.a()；注意，这里我们没有使用严格模式，如果使用严格模式的话，全局对象就是 undefined，那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined。

Case2：

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
    }
}
a.fn();

在这个例子中，函数 fn 是对象 a 调用的，所以打印的值就是 a 中的 name 的值。

Case3：

var name = "windowsName";
var a = {
    // name: "Cherry",
    fn : function () {
        console.log(this.name);      // undefined
    }
}
window.a.fn();

这里为什么会打印 undefined 呢？这是因为正如刚刚所描述的那样，调用 fn 的是 a 对象，也就是说 fn 的内部的 this 是对象 a，而对象 a 中并没有对 name 进行定义，所以 log 的 this.name 的值是 undefined。

this指向总结: 在 es5 中，永远是this 永远指向最后调用它的那个对象。

---

ES6中的箭头函数可以避免 ES5 中使用 this 的坑。箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

Case1：
var name = “windowsName”;

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        },100);
    }

};

a.func2()     // this.func1 is not a function

在不使用箭头函数的情况下，是会报错的，因为最后调用 setTimeout 的对象是 window，但是在 window 中并没有func1 函数。

Case2：

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }

};

a.func2()     // Cherry

“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的this

---

new关键字

var a = new myFunction('wuhuiluo','123')

new的过程(伪代码表示):

new MyFunction() {
	var obj = {}
	obj.__proto__ === obj.prototype
	var result = myFunction.call(obj,'wuhuiluo','123')
	return typeof result === 'object' ? result : obj
}

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

在new的过程中，我们使用call改变了this的指向。

---

call

Function.prototype.call(thisArg,arg1,arg2...)*

参数

thisArg:

必选希望this所指向的对象，如果设置为null或者undefined就指向全局对象window

arg1,arg2...:

可选,直顶的参数列表项

返回值:

使用调用者提供的this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

apply

Function。prototype.apply(thisArg,[argsArray])

与call不同的是apply的第二个参数只能是数组，里面包含需要传递的全部参数

---

bind

Function.prototype.bind(thisArg,arg1,arg2...)

参数与call相同

---

原声JS实现call、bind、apply方法

实现call方法

思路：

1. 根据call的规则设置上下文对象,也就是this的指向。
2. 通过设置context的属性,将函数的this指向隐式绑定到context上
3. 通过隐式绑定执行函数并传递参数。
4. 删除临时属性，返回函数执行结果

Function.prototype.myCall = function (context) {
    if (context === null || context === undefined) {
       // 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为window)
        context = window 
    } else {
        context = Object(context) // 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的实例对象
    }
    const args = [...arguments].slice(1) // 将类数组转换为数组ES6
    const key = Symbol('特殊属性Symbol') // 用于临时储存函数
    context[key] = this; // 函数的this指向隐式绑定到context上
    let result = context[specialPrototype](...args); // 通过隐式绑定执行函数并传递参数
    delete context[key]; // 删除上下文对象的属性
    return result; // 返回函数执行结果
};

实现apply方法

思路：

1. 传递给函数的参数处理不太一样，其他部分与call一样
2. apply接受的第二个参数为类数组对象

Function.prototype.myApply = function (context) {
   if (context === null || context === undefined) {
       context = window // 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为window)
   } else {
       context = Object(context) // 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的实例对象
   }
   // JavaScript权威指南判断是否为类数组对象
   function isArrayLike(o) {
       if (o &&                                    // o不是null、undefined等
           typeof o === 'object' &&                // o是对象
           isFinite(o.length) &&                   // o.length是有限数值
           o.length >= 0 &&                        // o.length为非负值
           o.length === Math.floor(o.length) &&    // o.length是整数
           o.length < 4294967296)                  // o.length < 2^32
           return true
       else
           return false
   }
   const key = Symbol('特殊属性Symbol') // 用于临时储存函数
   context[key] = this; // 隐式绑定this指向到context上
   let args = arguments[1]; // 获取参数数组
   let result
   // 处理传进来的第二个参数
   if (args) {
       // 是否传递第二个参数
       if (!Array.isArray(args) && !isArrayLike(args)) {
           throw new TypeError('myApply 第二个参数不为数组并且不为类数组对象抛出错误');
       } else {
           args = Array.from(args) // 转为数组
           result = context[key](...args); // 执行函数并展开数组，传递函数参数
       }
   } else {
       result = context[key](); // 执行函数 
   }
   delete context[key]; // 删除上下文对象的属性
   return result; // 返回函数执行结果
};

实现apply方法

思路：

1. 拷贝源函数
2. 返回拷贝的函数
3. 调用拷贝的函数

Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存储源函数以及上方的params(函数参数)
    // 对返回的函数 secondParams 二次传参
    let fToBind = function (...secondParams) {
        const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用
        const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果
    };
    if (thisFn.prototype) {
        // 复制源函数的prototype给fToBind 一些情况下函数没有prototype，比如箭头函数
        fToBind.prototype = Object.create(thisFn.prototype);
    }
    return fToBind; // 返回拷贝的函数
};

call、apply、bind方法的区别与总结

1. call和apply唯一的区别就是参数传递方式的不同，call传递是参数列表，apply传递的是数组
2. call与apply都是更改this指向后直接调用，而bind是返回相应的函数，之后才会调用
3. 如果期望生成一个新的函数，并且长期绑定某些方法，就可以使用bind
4. fn.apply不会立即调用，而是返回一个绑定后的新函数

---

应用场景

1. 需要立即调用使用call/apply
2. 需要传递的参数不多，则可以使用fn.call(thisObj,args1,args2…)
3. 需要传递的参数很多，则可以使用数组将参数整理好后调用fn.apply(thisObj,[args1,args2…])
4. 不需要立即执行，而是想生成一个新的函数长期绑定某个函数给某个对象使用，可以使用const newFn = fn.bind(thisObj) newFn(arg1,arg2…)