js【详解】bind()、call()、apply()（含手写 bind，手写 call，手写 apply ）

必备知识点：js 【详解】函数中的 this 指向_js function this-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/123093256

bind、call、apply 的相同点

都是Function原型上的方法
用途都是改变 this 的指向
第一个参数都是新的 this

bind、call、apply 的不同点

bind 会返回一个新的函数，目标函数在新函数调用时才会执行

let newFunc = obj.myFn.bind(newObj,'北京','上海');
newFunc();

call 的传参方式与bind相同（第2-N个参数用,分隔），但目标函数会立即执行

obj.myFn.call(newObj,'北京','上海')

apply 只有两个参数，第一个参数是新的 this，第二个参数是由目标函数的传参构成的数组

obj.myFn.apply(newObj,['北京','上海'])

使用范例

var name="张三",age=18;var obj = {name:"李四",oldAge:this.age,myFn:function(a, b){console.log( this.name+"年龄"+this.age,"来自"+a+"去往"+b )}
}var newObj = {name:"王五",age:22
}obj.myFn.call(newObj,'北京','上海'); // 王五年龄22 来自北京去往上海
obj.myFn.apply(newObj,['北京','上海']);　　// 王五年龄22 来自北京去往上海　
obj.myFn.bind(newObj,['北京','上海'])();　//王五年龄22 来自北京,上海去往undefined
obj.myFn.bind(newObj,'北京','上海')();　// 王五年龄22 来自北京去往上海

手写 bind

// 手写 bind
Function.prototype.my_bind = function () {// 将参数拆解为数组const argList = Array.prototype.slice.call(arguments);// 获取参数的第一项，并将参数的第一项从参数数组中移除const first_arg = argList.shift();// 返回一个函数return () => {// 箭头函数中的this继承函数外的thisreturn this.apply(first_arg, argList);};
};

还可以参考下文的手写 apply 进行更深度的改写（不使用apply）

手写 call

// 手写 call
Function.prototype.my_call = function () {// 将参数拆解为数组const argList = Array.prototype.slice.call(arguments);// 获取参数的第一项，并将参数的第一项从参数数组中移除const first_arg = argList.shift();// 返回函数执行的结果return this.apply(first_arg, argList);
};

还可以参考下文的手写 apply 进行更深度的改写（不使用apply）

手写 apply

// 手写 apply
Function.prototype.my_apply = function (new_this, argArray) {if (new_this !== null && new_this !== undefined) {// 第一个参数不是 null 和 undefined 时，将其转换为对象new_this = Object(new_this);} else {// 第一个参数是 null 或 undefined 时，将其重置为 windownew_this = window;}// 若第二个参数没有传 argArray ，则重置为空数组argArray = argArray || [];// 使用 Symbol 生成一个唯一的属性，避免覆盖 new_this 中的已有属性const key = Symbol("fn");// 将原this（即原函数）变为新this(即传入的new_this) 的方法new_this[key] = this;// 将原函数作为新this的对象方法执行，实现函数内 this 的指向变为 新thisconst result = new_this[key](...argArray);// 移除新增的方法delete new_this[key];// 返回函数执行的结果return result;
};