|
极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件
先来看看call方法，引用MDN上的介绍：
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
什么意思呢，看个简单的例子：
let obj = {
value: 1
}
function fn(){
console.log(this.value)
}
fn.call(obj) // 1
call方法把this指向obj
第一版
该怎么改变指向呢，大家试想一下，假如obj是一个这样的对象
let obj = {
value: 1,
fn: function(){
console.log(this.value)
}
}
obj.fn() // 1
这样是不是就行了呢，感觉好像可以，总结一下总共就3步：
1：将函数设为对象的属性 obj.fn = fn
2：执行该函数 obj.fn()
3：删除该函数 delete obj.fn
ok 我们来试一试
Function.prototype.myCall = function(context){
context.fn = this
context.fn()
delete context.fn
}
let obj = {
value: 1
}
function fn(){
console.log(this.value)
}
fn.myCall(obj) // 1
在控制台试一试是可以的，至此第一版已经完成了。
第二版
第一版还是有一些不满足需求的，call是可以传多个参数的，这个用es6的rest参数非常简单，直接看代码就行
Function.prototype.myCall = function(context, ...arg){
context.fn = this
context.fn(...arg)
delete context.fn
}
let obj = {
value: 1
}
function fn(a, b){
console.log(this.value)
console.log(a)
console.log(b)
}
fn.myCall(obj, 2,3) // 1 2 3
第三版
第二版已经基本完成了，还有一点点小的不足，call第一个参数是可以传null的，传null时指向window。 并且函数可能有返回值。
我们再改进一下
Function.prototype.myCall = function(context, ...arg){
context = context || window // 做个判断
context.fn = this
let result = context.fn(...arg)
delete context.fn
return result // 返回函数执行结果
}
let obj = {
value: 1
}
function fn(a, b){
console.log(this)
return a + b
}
console.log(fn.myCall(null, 2,3)) // Window 5
完事~
apply的话基本是一样的，只是第二个参数变成了数组
Function.prototype.myApply = function(context, arg){
context = context || window // 做个判断
context.fn = this
let result = context.fn(...arg)
delete context.fn
return result // 返回函数执行结果
}
let obj = {
value: 1
}
function fn(a, b){
console.log(this)
return a + b
}
console.log(fn.myApply (null, [2,3])) // Window 5
| 
转播
