apply call bind

call、apply和bind是Function对象的方法，它们用于控制函数体内this的指向。这三个方法都可以显式地设置函数体内的this值，但它们在使用方式和返回值上有所不同。

call

• call方法接受一个参数列表，它允许你调用一个函数，并将this的值设置为提供的值，同时传递一个参数数组来调用该函数。
• call方法会立即调用函数。

function sayHello() {
  console.log('Hello, ' + this.name);
}
const person = { name: 'Alice' };
sayHello.call(person); // 输出: Hello, Alice
// 语法规则 ：
// fun函数名.call(obj,arg1,arg2…argN)
// 参数说明:
// obj ：this要指向的对象
// arg1,arg2…argN : 参数列表，参数与参数之间使用一个逗号隔开

apply

• apply方法与call类似，但它接受一个参数数组作为第二个参数，而不是一系列的参数列表。
• 与call一样，apply方法也会立即调用函数。

function sayHello() {
  console.log('Hello, ' + this.name);
}
const person = { name: 'Alice' };
sayHello.apply(person); // 输出: Hello, Alice
// 语法规则 ：
// fun函数名.apply(obj,[arg1,arg2…,argN])
// 参数说明:
// obj ：this要指向的对象
// [arg1,arg2…argN] : 参数列表，要求格式为数组，也可以是类数组。

bind

• bind方法会创建一个新函数，其this被显式设置为提供的值。与call和apply不同，bind不会立即调用函数，而是返回一个新函数，这个新函数可以稍后被调用。
• bind方法非常有用，当你想把一个函数固定在一个对象上，并且希望稍后调用它时。

function sayHello() {
  console.log('Hello, ' + this.name);
}
const person = { name: 'Alice' };
const sayHelloToAlice = sayHello.bind(person); // 创建了一个新的函数
sayHelloToAlice(); // 输出: Hello, Alice

区别

• 调用方式：call和apply都是立即执行函数，而bind返回一个新函数。
• 参数传递：call接受一系列的参数，而apply接受一个参数数组。
• 返回值：call和apply的返回值取决于被调用函数的返回值，而bind的返回值是一个新函数。

手写apply call

        let obj = {a:1};
        function fun(...args) {
            console.log(this.a,args);
        }
        fun.call(obj,1,2,3);
        //其实这里作了以下操作
        // obj = {
        //     a: 1,
        //     fun: function (args) {
        //     console.log(this.a,args);
        //     }
        // }
        // obj.fun()

        Function.prototype.myCall = function(context,...args) { 
            // 这里为啥要写在Function的原型上，因为call apply bind的函数对象的方法
            // 这里为啥要写两个参数 context代表需要指向的对象 args代表的后续的参数 这里也可以只写一个参数 使用aguments代替

            args = args || []; // 这里做个容错率 防止args为null
            context = context || window; // 如果没有指向对象就默认window 
             
            const key = Symbol(); // 这里生成唯一值防止污染指向对象 
            context[key] = this; // 这里this代表上面的fun this -> fun context[key] -> fun
            const result = context[key](...args); // 执行函数并返回结果
            delete context[key] // 删除设置的属性，避免污染context对象
        }
        fun.myCall(obj,1,2,3);

        Function.prototype.myApply = function(context,args) { 
            // 这里为啥要写在Function的原型上，因为call apply bind的函数对象的方法
            // 这里为啥要写两个参数 context代表需要指向的对象 args代表的后续的参数 这里也可以只写一个参数 使用aguments代替

            args = args || []; // 这里做个容错率 防止args为null
            context = context || window; // 如果没有指向对象就默认window 
             
            const key = Symbol(); // 这里生成唯一值防止污染指向对象 
            context[key] = this; // 这里this代表上面的fun this -> fun context[key] -> fun
            const result = context[key](...args); // 执行函数并返回结果
            delete context[key] // 删除设置的属性，避免污染context对象
        }
        fun.myApply(obj,[1,2,3]);
        
       Function.prototype.myBind = function(context,...args) { 
            // 这里为啥要写在Function的原型上，因为call apply bind的函数对象的方法
            // 这里为啥要写两个参数 context代表需要指向的对象 args代表的后续的参数 这里也可以只写一个参数 使用aguments代替

            args = args || []; // 这里做个容错率 防止args为null
            context = context || window; // 如果没有指向对象就默认window 
             
            const key = Symbol(); // 这里生成唯一值防止污染指向对象 
            context[key] = this; // 这里this代表上面的fun this -> fun context[key] -> fun
            // const result = context[key](...args); // 执行函数并返回结果
            // delete context[key] // 删除设置的属性，避免污染context对象

            return function () {
                context[key](...args);
                delete context[key] 
            }
        }
        fun.myBind(obj,1,2,3)();  // bind返回的函数 需要再执行