js中的call、apply、bind

目录

1 共同点

2 不同点

3 扩展

4 手写call、apply、bind

4.1 手写call

4.2 手写apply

4.3 手写bind

1 共同点

三者都能改变 this指向，且第一个传递的参数都是 this指向的对象。

三者都采用的后续传参的形式。

2 不同点

call 的传参是单个传递的（试了下数组，也是可以的），而 apply 后续传递的参数是数组形式（传单个值会报错），而 bind 没有规定，传递值和数组都可以。

call 和 apply 函数的执行是直接执行的，而 bind 函数会返回一个函数，然后我们想要调用的时候才会执行。

附注：请看手写bind章节

如给call、bind传入的后续参数是数组，会得到意外的结果，详情请看手写bind章节

 

3 扩展

如果我们使用上边的方法改变箭头函数的 this 指针，会发生什么情况呢？能否进行改变呢？

由于箭头函数没有自己的 this 指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this），他们的第一个参数会被忽略。

4 手写call、apply、bind

4.1 手写call

1. 给绑定对象添加一个fn = this 此时this就是要执行的方法

2. 执行这个方法，传入参数，并返回得到的值

let a = {
    value: 1
};
function getValue(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value)
}

Function.prototype.myCall = function (context){
    if(typeof this !== "function"){
        throw new TypeError("Error");
    }
    var context = context || window;  //这里使用var声明，用let声明会报错。 指定调用函数中this需要指向的对象
    // 将 context 后面的参数取出来
    context.fn = this;  //这里this指向的是调用myCall函数的函数（其也是对象），这句话获取调用的函数
    let args = [...arguments].slice(1);  //获取调用myCall函数的参数
    let result = context.fn(...args);  //执行调用函数
    delete context.fn;
    return result;  //返回结果
}
getValue.myCall(a, 'yck', '24');
/*如果上面的调用语句在Function.prototype.myCall声明之前使用，那么会报错。
而且使用function以及var等修饰Function.prototype.myCall也会报错。
因为Function.prototype是已经存在的对象，只需要往里面添加内容即可
* 返回值
 yck
24
1 */

4.2 手写apply

首先要先原型上即 Function.prototype上编程

需要拿到函数的引用， 在这里是 this

让 传入对象.fn = this

执行 传入对象.fn(传入参数)

返回执行结果

let a = {
    value: 1
};
function getValue(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value)
}

Function.prototype.myApply = function (context){
    if(typeof this !== "function"){
        throw new TypeError("Error");
    }
    //不用使用let声明，因为context在该作用域中已经存在，在同一个作用域中，let不能声明同名变量
    var context = context || window;  //也可以使用let加上其他变量来获取对象
    /*
    {
        let context = context;  //这句不会报错 ，因为这是块级作用域，与function作用域是两个不同的作用域
    }
    * */
    context.fn = this; //获取调用myApply函数的函数
    let result;
    if(arguments[1]){  //arguments[1] 获取函数中第二个参数，因为模拟的是apply，传入的是数组或者null
        result = context.fn(...arguments[1]);
    }else {
        result = context.fn();
    }
    delete context.fn;
    return result;
}
getValue.myApply(a, ['yck', '24']);
/*
* 返回值
 yck
24
1 */

4.3 手写bind

let a = {
    value: 1
};
function getValue(name, age) {
    console.log(name);
    console.log(age);
    console.log(this.value);
}

//getValue.call(a, ['yck', '24']);
/*输出
[ 'yck', '24' ]
undefined
1
* */

//getValue.call(a, 'yck', '24');
/*
*yck
24
1 */

//getValue.apply(a, ['yck', '24']);
/*yck
24
1*/

//getValue.bind(a, ['yck', '24'])();
/*输出
* [ 'yck', '24' ]
undefined
1*/
getValue.bind(a, 'yck', '24')();
/*输出
* yck
24
1*/
Function.prototype.myBind = function (context){
    if(typeof this !== "function"){
        throw new TypeError("Error");
    }
    var context = context || window;  //也可以使用let加上其他变量来获取对象
    context.fn = this; //获取调用函数
    let args = [...arguments].slice(1);  //获取外层函数中的参数
    return function F() {
        if(this instanceof F){
            return new context.fn(...args, ...arguments);  //arguments指向的是内层F函数中的参数列表
        }else {
            return context.fn.apply(context, args.concat(...arguments));
        }
    }
}
let result = getValue.myBind(a, 'yck', '24');
//console.log(result);  //[Function: F]
result();
/*
* 返回值
'yck'
'24'
1 */

参考:https://github.com/luxiangqiang/Web-interview#%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B

百里于2020年5月2日

如果有错，请您指出！如有侵权，请联系我删除！