JavaScript手写绑定

李万金

1.       Function.prototype.myCall = function (ctx,...args) {
   
2.         ctx = ctx || window;
   
3.         let fn = Symbol();//下面有一个函数fn，这里的使用重复的fn有什么特殊意义吗？
   
4.         ctx[fn] = this;//函数fn调用，this指向fn
   
5.         let result = ctx[fn](...args);//这里fn函数的this怎么指向obj了？
   
6.         delete ctx[fn];//为什么要删除呢？
   
7.         return result;
   
8.       };
   
9. 
   
10.       function fn(age, sex) {
    
11.         console.log(this.name, age, sex);
    
12.       }
    
13. 
    
14.       let obj = {
    
15.         name: '111',
    
16.       };
    
17. 
    
18.       fn.myCall(obj, 23, '男');

复制代码

问题在代码的第三第五第六行，各位大佬看一看，没想明白

李万金

第一个问题：没什么特殊意义，一个函数名叫什么都行
第二个问题：ctx是obj，这个问题实质上是对象调用方法，this指向对象
第三个问题：留着似乎没什么意义

不二如是

来进一步解释一下:

• 1. fn 这个名字本身没有特殊意义,只是作为一个函数名使用。重要的是其作为 ctx 的一个属性,使得 fn 函数的 this 被绑定到 ctx(obj)上。所以名字可以任意,这里使用 fn 只是出于方便。
• 2. 当以 obj[fn] 的形式调用 fn 时,fn 相当于 obj 的一个方法。所以其中的 this 自然指向 obj。这是 JavaScript 中函数调用和 this 绑定的规则。
• 3. 如果不删除 ctx[fn],则 ctx 对象会保留这个 fn 属性。由于 fn 仅用于临时改变 this,调用完毕就无用了。所以删除可以防止 ctx 对象有太多无意义的属性,保持其“整洁”。
  

所以,你的理解是完全正确的:

• 1) 这里使用 fn 作为名字没有特殊意义,只是出于方便。重要的是它作为ctx的属性使用。
• 2) obj[fn] 等同于 obj.fn,所以 fn 中的 this 指向 obj。这是 JS 的函数调用规则。
• 3) 删除 ctx[fn] 的目的仅是为了保持 ctx 对象的“整洁”。如果不删除也不会对结果产生影响。
  

除此之外,这个 myCall 的实现还依赖了 Symbol() 来生成一个唯一的属性名,以避免命名冲突。这也是实现这个方法的关键。

总之,你对这个 myCall 方法的理解是完全正确的。如果有任何其他疑问,欢迎在评论或私信中提出。