先看测试示例,搞懂call方法是干什么用的
const animal = {
name: "小鸟"
}
function foo(num1, num2) {
console.log(num1,num2);
console.log(this.name, "会飞翔");
}
foo.call(animal, 2, 3)
// 输出:
// 2,3
// 小鸟会飞翔
通过上面的测试用例,我们可以明白:
foo
函数的this指向 (指向了我们上方定义的animal对象
)有了上方的总结之后,我们便可以实现一下call方法了
//所有函数身上都有的方法 需要我们在Funtion 原型身上去定义
Function.prototype.myCall = function (){
...
}
Function.prototype.myCall = function(ctx){
// 创建不会和this指向的对象里面的重名的属性(方法)
const key = Symbol()
// 这里其实就是将调用者(哪个函数调用) 的this 绑定到传进来的对象身上
ctx[key] = this // 这里的this就是foo() 相当于 给ctx 对象身上添加了一个函数foo
ctx[key]() // 然后进行调用
delete ctx[key] // 接着显式删除这个属性
}
/* ------测试用例------- */
const animal = {
name: "小鸟"
}
function foo() {
console.log(this);
console.log(this.name, "会飞翔");
}
foo.myCall(animal)
提几个东西,方便大家更好地去理解上方的代码
Symbol : 每个从 Symbol()
返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符;
const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false
const s3 = Symbol("123")
const s4 = Symbol("123")
console.log(s3 === s4); //false
上方我们用到Symbol的目的就是为了避免和原对象身上的属性相冲突,所以需要一个唯一值.
其次就是ctx[key] = this 这段代码如何去理解
const a = {
color:"green"
}
function f() {
console.log(this.color);
}
a.say = f
a.say() // green
这里我们就可以将a.say = f 等同于 ctx[key] = this,说白了 就是将foo()函数 [this]
当作一个方法 挂载在 传入的那个对象animal
的身上, 这样的this 统一指向animal
foo.myCall(animal)
首先我们要明白的一点是 参数的数量是不确定的
, 这是由调用者函数定义了几个参数来决定的.
... es6 展开运算符
Function.prototype.myCall = function (ctx,...args) {
// 生成唯一标识符
const key = Symbol('key')
// 这里的this会指向调用者(原函数的this)
ctx[key] = this // animal[key] = foo()
const res = ctx[key](...args) // 这里相当于 直接调用并执行foo() 原函数
delete ctx[key]
return res
}
现在已经实现了, 我们可以进行测试一下
const animal = {
name: "小鸟"
}
function foo(num1, num2) {
console.log(this); // {name: '小鸟', Symbol(key): ƒ}
let sum = num1 + num2
console.log(this.name, "会飞翔"); // 小鸟 会飞翔
return sum;
}
const res = foo.myCall(animal)
console.log(res); // 5
其实apply 和 call 方法非常相似,唯一的区别就是再调用的时候传参的方式的不同
参数传递方式:
call
方法接受参数的方式是直接列出每个参数。例如,如果你要传递两个参数,你会这样写:func.call(context, arg1, arg2)
。apply
方法接受参数的方式是通过一个数组或者类数组对象。例如,如果你要传递多个参数,你会这样写:func.apply(context, [arg1, arg2])
。foo.call(animal, 2, 3)
foo.apply(animal,[ 2, 3])
下面我们直接看代码实现吧
Function.prototype.myApply = function (context, args) {
const key = Symbol("key")
context[key] = this
const result = context[key](...args)
delete context[key]
return result
}
相比较之前call 方法的实现唯一区别就是 接收参数时候的不同, 因为第二个参数是一个数组
这里我们通过调用call 直接修改返回新函数的this指向
// 1. 返回一个新函数(this指向已经修改) 指向调用者(原函数)
// 2. 参数分批传递
Function.prototype.myBind = function (context, ...args) {
// 返回一个新的函数
return (...reargs) => {
// 这里的this 我们需要绑定一下 即外层的函数的this
// 参数呢 就是我们不确定外层函数传入多少个参数, 还有 返回的新函数 又传入多少个参数
// 那么我们便可以使用...展开运算符
const res = this.call(context, ...args, ...reargs)
// 因为新函数 需要返回值,所以我们
return res
}
}
const food = {
name: 'rice'
}
function a(num1, num2, num3, num4) {
console.log(num1, num2, num3, num4);
console.log(this.name);
return num1 + num2 + num3 + num4;
}
const b = a.myBind(food, 1)
const res = b(2, 3, 4)
console.log(res); // 10