一、apply函数
1.1 JS中apply函数
语法:
fn.apply(thisArg, argsArray)
参数:
thisArg:在fn函数运行时绑定的对象,即fn中this指向thisArg;
argsArray:一个数组或者类数组对象,其中的数组元素将作为单独的参数传给fn函数。
返回值:
调用有指定this值和参数的函数的结果。
1.2 apply函数实现原理
// 自己实现cyapply
Function.prototype.cyapply = function(thisArg, argArray) {
// 1.获取到要执行的函数
const fn = this
// 2.处理绑定的thisArg
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
// 3.执行函数
thisArg.fn = fn
// argArray = argArray ? argArray: []
argArray = argArray || []
const result = thisArg.fn(...argArray)
delete thisArg.fn
// 4.返回结果
return result
}
function sum(num1, num2) {
console.log("sum被调用", this, num1, num2)
return num1 + num2
}
// 调用cyapply
const result = sum.cyapply("abc", [20, 30])
console.log(result)
二、call函数
1.1 JS中call函数
语法:
fn.call(thisArg, arg1, arg2, ...)
参数:
thisArg:在fn函数运行时绑定的对象,即fn中this指向thisArg;
arg1, arg2, ...:指定的参数列表。
返回值:
调用有指定this值和参数的函数的结果。
1.2 call函数实现原理
// 给所有的函数添加一个cycall的方法
Function.prototype.cycall = function(thisArg, ...args) {
// 1.获取需要被执行的函数
const fn = this
// 2.对thisArg转成对象类型(防止它传入的是非对象类型)
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
// 3.调用需要被执行的函数
thisArg.fn = fn
const result = thisArg.fn(...args)
delete thisArg.fn
// 4.将最终的结果返回出去
return result
}
function sum(num1, num2) {
console.log("sum函数被执行", this, num1, num2)
return num1 + num2
}
// 自己实现的函数的cycall方法
// 默认进行隐式绑定
const result = sum.cycall("abc", 20, 30)
console.log("cycall的调用:", result)
三、bind函数
1.1 JS中bind函数
语法:
fn.bind(thisArg[, arg1[, arg2[, ...]]])
参数:
thisArg:在fn函数运行时绑定的对象,即fn中this指向thisArg;
arg1, arg2, ...:当目标函数被调用时,被预置入绑定函数的参数列表中的参数。
返回值:
返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。
1.2 bind函数实现原理
Function.prototype.cybind = function(thisArg, ...argArray) {
// 1.获取到真实需要调用的函数
const fn = this
// 2.绑定this
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
function proxyFn(...args) {
// 3.将函数放到thisArg中进行调用
thisArg.fn = fn
// 特殊: 对两个传入的参数进行合并
const finalArgs = [...argArray, ...args]
const result = thisArg.fn(...finalArgs)
delete thisArg.fn
// 4.返回结果
return result
}
return proxyFn
}
function sum(num1, num2, num3, num4) {
console.log(num1, num2, num3, num4)
}
// 使用自己定义的cybind
const newSum = sum.cybind("abc", 10, 20)
const result = newSum(30, 40)