>  Q&A  >  본문

使用原生JavaScript实现bind中的一个小问题?

看到后面发现有一个不懂的地方:

10.png

为了实现红框内的兼容:

11.png

其中红框圈出的代码小弟不是很懂,希望有大神能够指点一二

checkcheck2776일 전1203

모든 응답(2)나는 대답할 것이다

  • 数据分析师

    数据分析师2017-10-01 00:52:01

    네이티브 JavaScript를 사용하여 바인드를 구현하는 데 작은 문제가 있나요? -PHP 중국어 웹사이트 Q&A-기본 JavaScript를 사용하여 바인드를 구현하는 데 작은 문제가 있습니까? -PHP 중국어 홈페이지 Q&A

    꼭 보고 배워보세요.

    회신하다
    0
  • 迷茫

    迷茫2017-03-16 09:39:07

    搞了好久细节,终于搞清楚了跟你说说,也在这里做个笔记,不是很会描述,见谅:

    首先,先看bind文档,经过bind的方法,如果使用new的话,会忽略bind的context,而是用新生成的实例对象作为this。

    其次,再看看instanceof的文档,instanceof返回的结果是: 原型链中是否存在一个构造函数的 prototype 属性。

    instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

    所以,这里用F先保存当前的prototype,然后通过bound.prototype = new F()让bound继承this.prototype里面的属性,而通过new bound()生成的对象的原形链中就会含有this.prototype。举个栗子说明继承原形链:

    function fn(a,b,c) { console.log(this) };
    fn.prototype.test1 = function(){ console.log("test1"); }var fn1 = fn.bind(1);var instance = new fn1();
    instance.test1(); // 输出:test1,说明fn1继承了fn.prototype上面的属性

    最后,由于是通过bound.prototype = new F(),所以当使用new的时候,this instanceof F会返回true。那么就会把方法内部的this绑定成当前的实例,就达到了上面第一条说的效果

    几个问题:

    下面的都是前辈们指出来的,所以我非原创,不拿任何credit。

    他的这个栗子其实已经很好地实现了需要,不过吹毛求疵一点,讨论两个问题:

    第一个问题:使用context||this是否合理?作者的目的是在不使用new的情况下,没有传入context时,使用自己的this代替。这个其实有点多此一举,首先fn.apply(undefined)也是可以的。而且当对fn使用严格模式的时候,会出现this指向window的问题,应该是undefined。

    function fn() { 'use strict'; console.log(this); } 
    fn.bind()(); // 应该是undefined,但是栗子中的bind会返回window

    第二个问题:使用F来传递原形的属性,而不是直接通过bound.prototype = this.prototype,我看原作者说的是为了防止污染this,但是我没有理解怎么污染this的。反而会造成下面的问题:

    function fn(){ console.log(this) };var fn1 = fn.bind(1);
    var instance = new fn1();console.log(instance.__proto__ === fn.prototype); // 原生的bind应该返回true,而文中bind的栗子返回的是false


    회신하다
    0
  • 취소회신하다