js简单实现call,apply和bind函数

最新推荐文章于 2024-03-31 15:50:35 发布

yanjunxue

最新推荐文章于 2024-03-31 15:50:35 发布

阅读量236

点赞数

分类专栏： js 文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44260446/article/details/125773234

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript模拟实现Function对象的call、apply和bind方法，通过实例展示了这三个方法在对象上下文切换和参数传递中的应用，加深了对JavaScript函数调用的理解。

摘要由CSDN通过智能技术生成

1.实现call2函数

const obj = {
    name: '小花',
   };
const obj1 = {
    name: '小草',
};
function test(a, b) {
    console.log(this.name);
    console.log(a + b );
}
//模拟call实现
Function.prototype.call2=function(context){
    if(context == null){
        var context = Window;
    }else{
        var context = Object(context);
    }
    if(typeof this != 'function'){
        throw TypeError(this + 'is not a function');
    }
    var fn = Symbol();
    context[fn] = this;

    //取传入的参数
    let args = [];
    for (let index = 1; index < arguments.length; index++) {
        args.push('arguments['+ index + ']')  
    }
    //执行函数
    var result = eval('context[fn]('+args+')');
    return result;
}
test.call(obj1,1,10)
test.call2(obj1,1,5);

2.实现apply2函数

const obj = {
    name: '小花',
   };
const obj1 = {
    name: '小草',
};
function test(a, b) {
    console.log(this.name);
    console.log(a + b );
}

//模拟apply实现
Function.prototype.apply2=function(context,arr){
    if(context == null){
        var context = Window;
    }else{
        var context = Object(context);
    }
    if(typeof this != 'function'){
        throw TypeError(this + 'is not a function');
    }
    var fn = Symbol();
    context[fn] = this;

    var result
    //执行函数
    if(arr){
        result = eval(context[fn](...arr))
    }else{
        context[fn]()
    }
    return result;
}
test.apply2(obj,[1,50]);

3.在call和apply的基础上实现applyFn函数

const obj = {
    name: '小花',
   };
const obj1 = {
    name: '小草',
};
function test(a, b) {
    console.log(this.name);
    console.log(a + b );
}
//模拟bind实现
Function.prototype.bindFn = function(context){
    if(typeof this != 'function'){
        throw TypeError(context + 'is not a function');
    }
    //获取第一次的对象和传过来的参数
    var self = this;
    //去掉arguments类数组中第一个元素，也就是this的值，得到第一次传入的参数args1
    var args1 = [].slice.call(arguments,1)

    //返回一个已经绑定好this值的bound函数，并且加入第二次传入的参数
    var bound = function(){
        var args2 = [].slice.call(arguments)
        return self.apply(context,args1.concat(args2))
    }
    return bound;
}
var bound = test.bindFn(obj,1);
bound(20);