手写call、apply和bind-阿里云开发者社区

手写call、apply和bind

2021-11-16 87

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手写call、apply和bind

手写call

原生call具备的三个功能

改变this指向。
调用call就是调用函数。（能够返回结果）

实现代码

function person(a,b,c) {
    return {
        name: this.name,
        a: a,
        b: b,
        c: c
    }
}
const egg = {name: 'hello'};
Function.prototype.myCall = function(obj) {
    obj = obj || window
    obj.p = this;
    const newArg = [];
    for (let i = 1; i < arguments.length; i++) {
        newArg.push(arguments[i]);
    }
    const result = obj.p(...newArg);
    delete obj.p;
    return result;
}
person.myCall(egg,'点赞','收藏','转发')
person.call(egg,'点赞','收藏','转发')
复制代码

2. 手写apply

apply和call很类似，区别在于apply只接受两个参数，一个是this的指向，另一个是是一个数组。

原生apply具备的几个功能

改变this指向。
调用函数并接受返回值。

实现代码

function person(a,b,c) {
    return {
        name: this.name,
        a: a,
        b: b,
        c: c
    }
}
const egg = {name: 'hello'};
Function.prototype.myApply = function(obj,arr) {
    obj.p = this;
    let result;
    if (!arr) {
        result = obj.p();
    } else {
        result = obj.p(...arr);
    }
    delete obj.p;
    return result;
}
person.myApply(egg,['点赞','收藏','转发'])
person.apply(egg,['点赞','收藏','转发'])
复制代码

3. 手写bind

原生bind具备的功能

会返回一个函数。（这个返回的函数应该是改变过this的，并且接受参数就能执行的）
会修改this指向。
原生bind方法返回的函数如果通过new创建实例的时候，会使得this失效。不调用new，this不会失效。

注意事项

arguments其实是对象，而不是数组。
使用Array.prototype.slice.call(arguments,1)：可以获取arguments包括第二个元素之后的所有元素，并将其装换为数组。
下面的题解涉及到了原型链的知识，值得我们多次反复揣摩。

实现代码

function person(a,b,c) {
    console.log(this.name);
    console.log(a,b,c);
}
const egg = {name: 'hello'};
Function.prototype.myBind = function(obj) {
    let that = this;
    let arr = Array.prototype.slice.call(arguments,1);
    // 定义一个空函数作为桥梁
    let empty = function() {}
    let newf = function () {
        let arr2 = [].slice.call(arguments);
        let arrSum = arr.concat(arr2);
        // 判断是否调用了new
        if (this instanceof empty) {
            that.apply(this,arrSum);
        } else {
            that.apply(obj,arrSum);
        }
    }
    empty.prototype = that.prototype;
    newf.prototype = new empty;
    return newf;
}
const bibi = person.myBind(egg,'点赞','投币')
// const b = new bibi('充电')
bibi('充电')
// person.apply(egg,['点赞','收藏','转发'])
复制代码