详解如何实现call/apply/bind

2019-03-20 本文已影响0人潼潼爱coding

call、apply 及 bind 函数内部实现是怎么样的？

一、call

call改变了this指向
函数执行
支持传参

⚠️注意：this可以传入undefined或者null，此时this指向window，this参数可以传入基本类型，call会自动用Object转换，函数可以有返回值

Function.prototype.call2 = function(context) {
    context = context ? Object(context) : window;
    context.fn = this;
    
    let args = [...arguments].slice(1);
    const result = context.fn(...args);
    
    // es3写法
    // var args = [];
    // for(var i = 1, len = arguments.length; i < len; i++) {
        // args 会自动调用 args.toString() 方法，因为'context.fn(' + args +')'本质上是字符串拼接，会自动调用toString()方法
    //    args.push('arguments[' + i + ']');
    // }
    // var result = eval('context.fn(' + args +')');
       
    delete context.fn;
    return result;
}

思考上面的写法会有什么问题？
这里假设context本身没有fn属性，这样肯定不行，我们必须保证fn属性的唯一性

实现方式一：es3模拟实现
首先判断 context中是否存在属性 fn，如果存在那就随机生成一个属性fnxx，然后循环查询 context对象中是否存在属性 fnxx。如果不存在则返回最终值。

function fnFactory (context) {
    let unique_fn = 'fn';
    while (context.hasOwnProperty) {
        unique_fn = 'fn' + Math.random();
    }
    reutrn unique_fn;
}

tips：有两种方式可以判断对象中是否存在某个属性
1.in操作符，会检查属性名是否存在对象及其原型链中，注意数组的话是检查索引而不是具体值
例如对于数组来说，4 in [2, 4, 6] 结果返回 false，因为 [2, 4, 6] 这个数组中包含的属性名是0，1，2 ，没有4。
2.Object.hasOwnProperty(...)方法，只会检查属性是否存在对象中，不会向上检查其原型链。

实现方式二：es6模拟实现
利用Symbol，表示独一无二的值，不能使用 new 命令，因为这是基本类型的值，不然会报错。

Function.prototype.call2 = function(context) {
    context = context ? Object(context) : window;
    let fn = Symbol();
    context[fn] = this;
    
    let args = [...arguments].slice(1);
    const result = context[fn](...args);
    
    delete context[fn];
    return result;
}

测试一下：

let value = 2;
let foo = {
    value: 1
};

function bar(name, age) {
    console.log(this);
    console.log(name, age);
}
bar.call2(foo, 'test', 18); // foo{value:1}   test 18
bar.call2(null); // window  undefined undefined
bar.call2(123, 'test', 18); // Number{123}   test 18

二、apply

apply与call的思路基本相同，区别在于传参为数组，实现如下

Function.prototype.apply2 = function(context, arr) {
    context = context ? Object(context) : window;
    let fn = Symbol();
    context[fn] = this;
    
    let result;
    if (arr) {
        result = context[fn](...arr);
    } else {
        result = context[fn]();
    }
    
    delete context[fn];
    return result;
}

测试一下：

let value = 2;
let foo = {
    value: 1
};

function bar(name, age) {
    console.log(this);
    console.log(name, age);
}
bar.apply2(foo, ['test', '18']); // foo{value:1}   test 18
bar.apply2(null); // window  undefined undefined
bar.apply2(123, ['test', '18']); // Number{123}   test 18

三、bind

bind（）函数在 ES5 才被加入，所以并不是所有浏览器都支持，IE8及以下的版本中不被支持，如果需要兼容可以使用 Polyfill 来实现。

bind方法与call/apply最大的区别就是bind返回一个绑定上下文的函数，而call/apply是直接执行了函数，特性如下：

可以指定this
返回一个绑定了this的函数
可以传参
柯里化
-- 获取返回函数的参数，然后同第3点的参数合并成一个参数数组，并作为 self.apply() 的第二个参数。

⚠️特别：绑定函数也能使用new操作符创建对象
这种行为就行把原函数当作构造器，提供的this被忽略，同时调用时的参数被提供给模拟函数，可以通过修改返回函数的原型来实现

Function.prototype.bind2 = function (context) {
    // 保存this指向调用函数的对象
    const self = this;
    // 截取第一个参数后的参数
    const args = [...arguments].slice(1);
    //const args = Array.prototype.slice.call(arguments, 1); 

    // 返回函数
    return function () {
        const bindArgs = [...arguments];
        // const bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(context, args.concat(bindArgs));
    }
}

测试一下：

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    return {
        value: this.value,
        name: name,
        age: age
    }
};

var bindFoo = bar.bind2(foo, "Jack");
bindFoo(20);
// {value: 1, name: "Jack", age: 20}

bind还有一个在上文说过的特性需要实现：

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

例如：

const value = 2;
const foo = {
    value: 1
};
function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
};
bar.prototype.friend = 'kevin';

const bindFoo = bar.bind(foo, 'bob');
const obj = new bindFoo(20);
// undefined 
// bob
// 20

obj.habit; // shopping
obj.friend; // kevin

👆上面的例子this.value 输出为 undefined，既不是全局value 也不是foo对象中的value，这说明绑定的 this 对象失效了，new 的实现中生成一个新的对象，这个时候的 this指向的是 obj。

这一特性可以通过修改返回的函数的原型来实现

说明：

当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，可以让实例获得来自绑定函数的值，即上例中实例会具有 habit 属性。
当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值，即上例中 obj 可以获取到 bar 原型上的 friend。

⚠️ 注意：调用 bind 的不是函数，需要抛出异常。

完整代码如下：

Function.prototype.bind2 = function (context) {
    if (typeof this !== 'function') {
        throw new Errow('Function.prototype.bind - what is trying to be bound is not callable');
    }
    const self = this;
    const args = [...arguments].slice(1);
    
    const fBound = function () {
        const bindArgs = [...arguments];
        return self.apply(
            this instanceof fBound ? this : context,
            args.concat(bindArgs)
        );
    }
    // 直接使用ES5的 Object.create()方法生成一个新对象
    fBound.prototype = Object.create(this.prototype);
    // 或者：
    // const fNOP = function () {}; // 创建一个空对象
    // fNOP.prototype = this.prototype; // 空对象的原型指向绑定函数的原型
    // fBound.prototype = new fNOP(); // 空对象的实例赋值给 fBound.prototype
    
    return fBound;
}

本文参考链接

详解如何实现call/apply/bind

一、call

二、apply

三、bind

猜你喜欢

热点阅读