原生Javascript手写call、apply和bind方法

1.Call

1.1 回顾Call

function person(){
     
    console.log(this.name);
    if(arguments.length <=1 ) return;
    for(var i=0;i < arguments.length;i++){
     
        console.log(arguments[i])
    }
}
var p = {
     name:"小明"};

person.call(p,'我','爱','中国');

小明
我
爱
中国

Call()方法定义在Function.prototype中

1.2 手写call

基本思路：保留this——执行函数——删除函数

调用call时不传其他参数

function person(){
     
    console.log(this.name);
}
var p = {
     name:"小明"};

Function.prototype.myCall = function(obj){
     
    obj.person = this;// 这里的this指向person()函数，因为是person对象来直接调用myCall()
    obj.person();// 相当于用p对象执行person()
    delete obj.person;
}

person.myCall(p);
// 小明

调用call时传递其他参数

function person(){
     
    console.log(this.name);
    if(arguments.length <1 ) return;
    for(var i=0;i < arguments.length;i++){
     
        console.log(arguments[i])
    }
}
var p = {
     name:"小明"};

Function.prototype.myCall = function(obj){
     
    obj.person = this;// 这里的this指向person()函数，因为是person对象来直接调用myCall()

    // 处理其他参数
    var myArguments = [];
    for(var i = 1;i < arguments.length ;i++){
     
        myArguments.push(arguments[i]);
    }

    obj.person(...myArguments);// 相当于用p对象执行person()
    delete obj.person;
}

person.myCall(p,'我','爱','中国');

注意上述代码使用了rest 参数代替arguments变量

改进返回值后：

function person(){
     
    console.log(this.name);
    if(arguments.length <1 ) return;
    for(var i=0;i < arguments.length;i++){
     
        console.log(arguments[i])
    }
    return {
     
        name:this.name,
        ...arguments
    }
}
var p = {
     name:"小明"};

Function.prototype.myCall = function(obj){
     
    obj.person = this;// 这里的this指向person()函数，因为是person对象来直接调用myCall()

    // 处理其他参数
    var myArguments = [];
    for(var i = 1;i < arguments.length ;i++){
     
        myArguments.push(arguments[i]);
    }

    var result = obj.person(...myArguments);// 相当于用p对象执行person()
    delete obj.person;
    return result;
}

console.log(person.myCall(p,'我','爱','中国'));

小明
我
爱
中国
{
      '0': '我', '1': '爱', '2': '中国', name: '小明' }

2.Apply

2.1 回顾Apply

apply与call的区别在于，apply只接受两个参数，一个是this的指向，另外一个是数组，该数组存放了所有其他需要传入该函数的参数。

2.2 手写apply

function person(){
     
    console.log(this.name);
    if(arguments.length <1 || !arguments) return {
     };
    console.log(arguments);
    for(var i=0;i < arguments.length;i++){
     
        console.log(arguments[i])
    }
    return {
     
        name:this.name,
        ...arguments
    }
}
var p = {
     name:"小明"};

Function.prototype.myApply = function(obj,arr){
     
    var obj = obj || window,result;
    obj.person = this;// 这里的this指向person()函数，因为是person对象来直接调用myCall()

    // arr为空
    if(!arr || arr.length === 0){
     
        result = obj.person();
    } else{
     
        // 处理其他参数
        var myArguments = [];
        for(var i = 0;i < arr.length ;i++){
     
            myArguments.push(arr[i]);
        }

        var result = obj.person(...myArguments);// 相当于用p对象执行person()
    }
    delete obj.person;
    return result;
}

// console.log(person.myApply(p,['我','爱','中国']));
console.log(person.myApply(p));

3.Bind

3.1 回顾Bind

bind会返回一个函数。
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时，f函数体内的this自然指向的是obj

3.2 手写bind

https://blog.csdn.net/qlwangcong518/article/details/86261597