从一道面试题，到“我可能看了假源码”

网友评论

• 
  懒猫来:this instanceof F 改成 this instanceof bound 也可以吧。
• 
  黄努努:前辈你好，我有一点疑问想向你咨询一下。
  Function.prototype.bind方法构造出来的函数是没有prototype属性。但是我们重写的bind方法为了兼容作为构造函数的情况，是有prototype的情况的。（即使不兼容也是有prototype，只是不一样）。
  原声bind返还的函数没有prototype，但是依然可以作为构造函数new出实例。而我们（本文）却通过指定prototype来兼容作为构造函数的情况，是否说明我们对 new 操作的理解还不到位呢？
  我也翻了一下MDN对new operator的解释，很可惜，并没有涉及到 bind返还函数作为构造函数的情况。实现的最关键一步也仅仅用了一个单词“inheriting”。
  

  5c35b022bb97:F.prototype = this.prototype;请问这里有什么特别的涵义呢？感觉如果没有这句赋值是不是也可以正常执行呢？

  Annnnnn:确实，原生的bind里面返回的函数不带有prototype属性，那么这个new出来的实例有什么意义呢

  LucasHC:@黄努努 非常棒的发现！
  你说的是有道理的。但是问题在于，我们如果要兼容NEW的情况，返回的函数存在prototype属性是无法避免的。至少据我所知，包括查到资料都是无法规避的。比如，你看看ES5-shim的源码，也存在这种情况。
  
  但是这种情况，可以理解“无伤大雅”，具体在工程上考量，那就视情况而定了。
  
  另外，不知道你知不知道“ ES6 为new命令引入了一个new.target属性”，这个属性能够判断函数的调用是否是new,还是正常调用。我们可以这样子去规避。
  
  问题在于，这是ES6的新特性，我们在写ES5 pollyfill,当然就不能这么用了。我尝试发现Babel对这个新特性的变异情况，目测也是无法正常编译的，你可以参考我写的测试：
  
  http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=env%2Ces2015%2Ces2015-loose%2Ces2016%2Ces2017%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&targets=&browsers=&builtIns=false&experimental=false&loose=false&spec=false&code=function%20Person(name)%20%7B%20%20%0A%20%20%20%20if(new.target%20!%3D%3D%20undefined)%20%7B%20%20%0A%20%20%20%20%20%20%20%20this.name%20%3D%20name%3B%20%20%0A%20%20%20%20%7D%20else%20%7B%20%20%0A%20%20%20%20%20%20%20%20throw%20new%20Error('%20%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8%20new%20%E7%94%9F%E6%88%90%E5%AE%9E%E4%BE%8B%20')%3B%20%20%0A%20%20%20%20%7D%20%20%0A%7D%20%20%0A&playground=true
  
  
  另外，如果你是学生有实习打算的话，欢迎联系我。。。
  
• 
  黄努努:刚看完题时，下意识的以为不允许用call和apply...不知道这样做能不能实现
• 
  c924a13233c6:1. 好早之前也是看mdn，第一次见兼容构造函数，读几遍才捋明白。
  2. 最后一步兼容function length确实没见过，涨姿势了。想想Function.prototype.length至今使用次数应该是0。
  3. 动态函数创建那里，我记得语法是 new Function ()，刚又去翻mdn，指明了用普通函数和构造函数的方式调用Function，效果一样。
  
  3点收获、感谢~
• 
  30a263b80bbb:```js
  return me.apply(this instanceof F ? this : context || this, finalArgs);
  ```
  请问这个语句中的context || this的意图是什么哦？ 为什么还要加一个context的判断，context为null或者undefined的话在me中都会指向全局，this的话有几种可能: 直接调用, 依旧是全局，如果有依附于某个上下文的话，啊哈！它是不是在绕我？

  LucasHC:@Lance_0b02 特定执行环境也包括作为对象方法调用情况。我就喜欢你这样善于思考的同学哈哈。BTW，有兴趣不嫌弃来百度工作给我发简历呀

  30a263b80bbb:@LucasHC 你所指的有特定的执行环境是不是就是，apply，call，bind这种绑定上下文，如果是的话，那么，我这个bind的方法本来就是绑定上下文的作用，你又来一个特定执行环境(当前)，我有种感觉就是bind两次，这种场景常不常见哦，其实我想说的是，我怎么想也想不到还要去判断context取this, 我见识不广，还请多多指教！

  LucasHC:@Lance_0b02 你这不把答案都自己说了吗。没用提供context的话，就提供一个函数体内自身的this做back up咯。存在的情况也就是你说的全局环境直接调用和有特定的执行环境。你理解的没错。
• 
  2f0d61308013:```javascript
  Function.prototype.bind = Function.prototype.bind || function (context) {
  var me = this;
  var args = Array.prototype.slice.call(arguments, 1);
  var F = function () {};
  F.prototype = this.prototype;
  var bound = function () {
  var innerArgs = Array.prototype.slice.call(arguments);
  var finalArgs = args.concat(innerArgs);
  return me.apply(this instanceof F ? this : context || this, finalArgs);
  }
  bound.prototype = new F();
  return bound;
  }
  ```
  这个方案里面有个地方不是很明白，请教一下：
  此处为什么要加一句`bound.prototype = new F();`? 按我的理解，在上面的`F.prototype = this.prototype;`这一句的时候，已经把bound.prototype指向了原函数的prototype，也就是说bound已经把原函数当成了构造器，为什么还要让bound指向原函数的实例?

  2f0d61308013:@LucasHC 搜嘎，是为了防止污染，明白了，O(∩_∩)O谢谢

  LucasHC:@水乙 因为作为构造函数使用时，您new的是bound而不会是F；bound.prototype = new F() 是将bound原型指向F()实例。不然你完全可以bound.prototype = this.prototype, F出现的意义就是防止bound.prototype = this.prototype 这样做法对this原型的污染。
• 
  JohnsonChe:我之前在惊鸿三世的博客下看到一段 写的“有问题的”绑定函数，还去segmentfault提了问题，最后看到楼主这篇文章，感触颇深，真的很精粹

  LucasHC:@JohnsonChe 很高兴能带给您思考和感触。
• 
  2b3fd90a0147:问一个问题 既然是构造函数 为什么要给构造函数去bind一下？
  
  按我的理解 构造函数内部已经改变了this的指向，在bind一下是不是多此一举； 如果不用new 那么那个函数就不是一个构造函数 。也就可以正常使用bind方法。
  
  这里没理清楚 能帮忙解答一下吗？

  2b3fd90a0147:这个例子很生动形象 明白了 多谢啦

  LucasHC:问的问题很可爱～
  首先，ES5带来的bind返回的函数可以作为构造函数，并且“使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略。”
  
  但是你注意，我们的第一个版本实现，并不会模拟这样的事实。
  
  new操作符所做的，是隐式返回构造函数中的this，他最终指向了生成的对象实例。
  第一种实现中，
  new操作符＋我们实现的bind返回函数，隐式的返回“我们实现的bind返回函数中的this”，而这个this，是不会指向生成的对象实例的。
  
  我给你写了一段代码，你可以试着跑一跑，就会明白其中的道理。
  
  function test (arg1) {
  this.arg1 = arg1;
  }
  
  var o1 = {
  key: 'value'
  }
  
  var testBind = test.bind(o1, 'testArg');
  
  var o2 = new testBind();
  
  o2.__proto__ === test.prototype; // true
  o2.arg1 //
  
  // 以上是正常实现bind，
  // bind返回的绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略。
  
  
  
  // 我们自己实现时，如果不兼容上面构造函数情况：
  Function.prototype.bindByUs = function (context) {
  var me = this;
  var args = Array.prototype.slice.call(arguments, 1);
  return function () {
  var innerArgs = Array.prototype.slice.call(arguments);
  var finalArgs = args.concat(innerArgs);
  return me.apply(context, finalArgs);
  }
  }
  
  function test (arg1) {
  this.arg1 = arg1;
  }
  
  var o1 = {
  key: 'value'
  }
  
  
  var testBind = test.bindByUs(o1, 'testArg');
  
  var o2 = new testBind(); // false
  o2.arg1 // undefined
• 
  y小贤:## 构造函数场景下的兼容
  代码中
  bound.prototype = new fNOP();
  应为 bound.prototype = new F();
  吧
  而且这个兼容构造函数的实现其实并没有你说的这么好理解。

  LucasHC:@y小贤 仅限北京 sorry

  y小贤:@LucasHC : 广州招实习吗

  LucasHC:@y小贤 你说的对 谢谢纠正。兼容构造函数的确实不太好理解 需要读者自己去体会感悟 要求有较强的原型功底和对new深刻理解。我应该再讲得详细些。
• JS大神:楼主有点装逼了，

  LucasHC:@山本57 嗯，装的太大了
• 
  正凯:谢谢分享

  LucasHC:@正凯 以后经常会有分享 也欢迎一起讨论
• 
  small_a:怎么联系？招实习还是正式？

  LucasHC:@small_a 都招 houce@baidu.com
• 
  Helloworld猿:棒