如何手写实现JavaScript中的call、apply和bind以改变函数的this指向？

本文共计612个文字，预计阅读时间需要3分钟。

手写call方法+系统用法：function.call(thisArg, arg1, arg2, ...) 手写实现：function sum(num1, num2) { console.log(num1 + num2, this); return num1 + num2; } Function.prototype.myCall=function(thisArg, ...payload) { // 这里可以添加代码 }

手写call()方法

系统用法：

function.call(thisArg, arg1, arg2, ...)

手写实现：

function sum(num1, num2) { console.log(num1 + num2, this) return num1 + num2; } Function.prototype.mjycall = function(thisArg, ...payload) { // 这里的this是指向的是：调用mjycall方法时，默认绑定的sum方法 // 将隐式绑定的方法命名为fn，之后我们将改变这个fn方法中this的指向，并进行调用 var fn = this // thisArg 是我们要更改绑定后的this指向，要进行对象化处理，并且处理一些null、undefinded边界问题。 thisArg = thisArg === null || undefined ? window : Object(thisArg) // 将fn方法绑定到要指向的对象上，并进行调用 thisArg.fn = fn let res = thisArg.fn(...payload) delete thisArg.fn return res } sum.mjycall("123", 10, 20) var sum = sum.mjycall(null, 10, 20) console.log('sum==>', sum) 手写apply()方法

系统方法：

function.call(thisArg, [arg1. arg2, ...])

手写实现：

// 手写实现apply方法和call非常类似，看懂call后apply实现也很简单 function sum(num1, num2) { console.log(num1 + num2, this) return num1 + num2; } // 就不需要参数扩展运算符了，apply参数本身是一个整体数组 Function.prototype.mjyapply = function(thisArg, payload) { var fn = this thisArg = thisArg === null || undefined ? window : Object(thisArg) thisArg.fn = fn let res = thisArg.fn(...payload) delete thisArg.fn return res } sum.mjyapply("123", [10, 20]) var sum = sum.mjyapply(null, [10, 20]) console.log('sum==>', sum) 手写bind()方法

系统方法：

newfunction = function.bind(thisArg[, arg1[, arg2[, ...]]])

bind()，方法就比较特殊，bind()将生成一个新函数，将新函数的this指向进行更改。而且bind的传参方式很多样。

手写实现bind()：

function sum(num1, num2, num3, num4) { console.log(num1 + num2 + num3 + num4, this) return num1 + num2 + num3 + num4; } Function.prototype.mjybind = function(thisArg, ...payload1) { // 这里的this是指向的是：调用mjycall方法时，默认绑定的sum方法 // 将隐式绑定的方法命名为fn，之后我们将改变这个fn方法中this的指向，并进行调用 var fn = this // thisArg 是我们要更改绑定后的zhis指向，要进行对象化处理，并且处理一些null、undefinded边界问题。 thisArg = thisArg === null || undefined ? window : Object(thisArg) // bind()方法返回的是一个新的函数，并有可能会在新的函数中继续传值 return function(...payload2) { thisArg.fn = fn // 最终调用fn时，我们把参数都传递进去 var res = thisArg.fn(...payload1, ...payload2) delete thisArg.fn return res } } foo = sum.mjybind("123", 10, 20) foo(30, 40) foo2 = sum.mjybind("123", 10, 20, 30, 40) console.log(foo2())