在JavaScript中，改变this指向的call，apply，bind有什么区别，原理分别是什么？

在JavaScript中，call、apply和bind方法都是用来改变函数执行时this指向的。

以下通过一个Demo帮助理解，代码如下：

var obj = {name: 'lisi',sayHello: function() {console.log(this.name)}
}
obj.sayHello()// lisifunction sayHello() {console.log(this.name)// summer
}var obj = { name: 'summer'}
// 分别使用call, apply，bind的三种写法
sayHello.call(obj)sayHello.apply(obj, [])var fn = sayHello.bind(obj)
fn()

通过代码的实现原理来帮助我们理解call、apply和bind的方法。

call原理实现

Function.prototype.myCall = function(context) {// 首先myCall是否被一个函数调用，如果不是，则抛出错误if(typeof this !== 'function') {throw new TypeError('Call must be called on a function')}// 判断context是否有值，如没有值，设置context为全局对象context = context || window;// 将当前函数作为context的属性context.fn = this;// 创建一个数组用来储存传递的参数var args = [];// 从第二个参数开始，将所有的参数添加到args数组中for(var i = 1; i < arguments.length; i++) {args.push('arguments['+i+']')}// 使用eval函数，args将会被转换为字符串，然后被解析为执行代码var result = eval('context.fn('+args+')')// 删除context上的fn属性delete context.fn;return result;}
sayHello.myCall(obj)

apply原理实现

Function.prototype.myApply = function(context, arr) {// 首先myApply是否被一个函数调用，如果不是，则抛出错误if(typeof this !== 'function') {throw new TypeError('Apply must be called on a function')}// 判断context是否有值，如没有值，设置context为全局对象context = context || window;// 将当前函数（即 this）赋值给 context 的属性 fn，以便在新的上下文中调用它context.fn = this;// 声明一个变量用于存储函数调用的结果var result;// 检查是否提供了参数数组 arrif(!arr) {// 如果没有提供参数数组，直接调用函数result = context.fn();} else {// 如果提供了参数数组，创建一个字符串，用于构建函数调用的参数列表var args = []for(var i = 0; i < arr.length; i++) {// 将数组中的每个元素转换为字符串形式，并添加到 args 数组中args.push('arr['+i+']')}// 使用 eval 函数执行 context.fn 并传入构建好的参数列表// 这里的 eval 会将 args 数组转换为字符串，并作为参数传递给函数result = eval('context.fn('+args+')')}// 函数调用完成后，删除 context 对象上的 fn 属性，以避免对该对象的意外修改delete context.fn// 返回函数调用的结果return result
}
sayHello.myApply(obj, [])

bind原理代码

Function.prototype.myBind = function(context){// 检查调用 myBind 的对象是否是一个函数，如果不是，则抛出错误if(typeof this !== 'function'){throw new TypeError('The provided value is not a function')}// 保存调用 myBind 的函数，即 this，到变量 fn 中var fn = this;// 获取 myBind 调用时除了 context 之外的其他参数，并转换为数组保存到 boundArgs 中var boundArgs = Array.prototype.slice.call(arguments, 1)// 返回一个新的函数，这个函数将在调用时使用 apply 方法来调用原函数return function(){// 创建一个新数组 newArgs，它包含两部分：// 1. 之前通过 myBind 传递的参数 boundArgs// 2. 当前调用时传递的参数，通过 Array.prototype.slice.call(arguments) 获取var newArgs = boundArgs.concat(Array.prototype.slice.call(arguments))// 使用 apply 方法调用原函数 fn，设置 this 指向为 context，并传入 newArgs 作为参数return fn.apply(context, newArgs)}
}
const myFn = fn.myBind(obj)
myFn()

总结来说，call 和 apply 都是立即执行函数，并且它们的区别在于参数的传递方式。而bind是创建一个新的函数，可以预先设置 this 的值和部分参数，并且可以在任何时候调用。这三个方法都通过改变函数运行时的 this 上下文来工作，这是通过内部实现闭包或类似机制来实现的。