目录
概念:
call/apply/bind
相同点:都可以用来重定义this的指向,第一个参数都是this的指向对象
不同点:传递的第二个参数不同(call的参数是直接放进去的,第二、第三个...第n个参数都是全部用逗号分隔,apply的所有参数都必须放在一个数组里面传进去,bind除了返回是函数以为,它的参数和call一样)
1.call方法
Function.prototype.myCall = function (context) {
//1.判断是否传递了指向的对象
const ctx = context || window
//2.把函数挂到目标对象上
ctx.func = this
//3.保存参数
const args = Array.from(arguments).slice(1)
//4.判断是否传递了参数
const res = arguments.length > 1 ? ctx.func(...args) : ctx.func()
//3.删除挂载在目标对象上的函数
delete ctx.func
return res
}
//测试用例:
let obj = {
c: 2
}
function a(x, y) {
console.log(this, x, y)
}
a.myCall(obj, 1, 2)
2.apply方法
Function.prototype.myApply = function (context) {
//1.判断是否传递了指向的对象
const ctx = context || window
//2.把函数挂到目标对象上
ctx.func = this
//3.调用此函数并且传参
const res = arguments[1] ? ctx.func(...arguments[1]) : ctx.func()
//3.删除挂载在目标对象上的函数
delete ctx.func
return res
}
var me = {
name: 'Chris'
}
function showFullName(x, y) {
console.log(`${this.name} ${x.a} ${y}`)
}
let test = {
a: 'aaa',
b: 2
}
showFullName.myApply(me, [test, 'sadas'])
3.bind方法
Function.prototype.myBind = function (context) {
//1.对context进行深拷贝,防止bind执行后返回函数未执行期间,context被修改
const ctx = JSON.parse(JSON.stringify(context)) || window
//2.把函数挂到目标对象上
ctx.func = this
//3.保存参数
const args = Array.from(arguments).slice(1)
//bind只返回做改变不执行
return function () {
//bind方法只需要合并两次函数执行的参数
const Allargs = args.concat(Array.from(arguments))
return Allargs.length > 0 ? ctx.func(...Allargs) : ctx.func()
}
}
obj = {
c: 2
}
function a(x, y, z) {
console.log(this, x, y, z)
}
a.myBind(obj, 1, 2)(3)