bind ！🚔🚐🚓🚒

1. Polyfill 👏👏👏👏👏👏

// Does not work with `new funcA.bind(thisArg, args)`
if (!Function.prototype.bind) (function(){
  var slice = Array.prototype.slice;
  Function.prototype.bind = function() {
    var thatFunc = this, thatArg = arguments[0];
    var args = slice.call(arguments, 1);
    if (typeof thatFunc !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - ' +
             'what is trying to be bound is not callable');
    }
    return function(){
      var funcArgs = args.concat(slice.call(arguments))
      return thatFunc.apply(thatArg, funcArgs);
    };
  };
})();

2. 发生了什么？😱😱😱😱😱😱

Does not work with new funcA.bind(thisArg, args)

3. 小马过河！😳😳😳😳😳😳

function Cat() {
  console.log('this in cat is ',this)
  Cat.prototype.greeting = function() {
    const str = 'Hello, my name is ' + this.name
    console.log(str)
  }
}

const anotherCat = { name:'Jerry'}
const NewCat = Cat.bind(anotherCat)
const newCat = new NewCat()
console.log(newCat)
console.log(newCat.greeting)

运行代码，输出结果如下：

this in cat is  { name: 'Jerry' }
{}
undefined ? what

4. 都是 new 的锅。🌚🌚🌚🌚🌚🌚

• 明白了 new 关键字的机制后，我们就可以分析前面通过 new 关键字实例化 NewCat 类，得到的返回值是空对象的原因了。
• 这是因为，NewCat 相对于原始的 Cat 是一个全新的函数（调用 bind 方法方法返回），我们在使用 new 关键字调用 NewCat 时，调用的其实是这个新的函数，在新函数中再通过 call 方法调用 Cat 函数，并没有直接对 Cat 进行实例化。
• 在调用新函数的时候，首先会生成一个空对象。此外，新函数还有一个返回值，返回的是 Cat 函数调用的结果。当 Cat 作为函数而非类调用时，其返回值是 undefined。因而实例化这个新函数的最终结果，就是返回在使用 new 实例化它自身时所创建的那个空对象。

5. 我该怎么办。👨‍💻‍👨‍💻‍👨‍💻‍👨‍💻‍👨‍💻‍👨‍💻‍

function Cat() {
  console.log('this in cat is ',this)
  this.greeting = function() {
    const str = 'Hello, my name is ' + this.name
    console.log(str)
  }
  // Cat 的 this 被绑定为 {  name:'Jerry' }，这里手动将其返回
  return this
}

const anotherCat = { name:'Jerry'}
const NewCat = Cat.bind(anotherCat)
const newCat = new NewCat()
console.log(newCat)

运行代码，输出结果如下：

this in cat is  { name: 'Jerry' }
{ name: 'Jerry', greeting: [Function] }

6. 别跑题。👁👁👁👁👁👁

Function.prototype.bind = function(thisObj) {
  // 判断调用 bind 的方法是不是一个函数
  if(typeof this !== 'function') {
    throw new TypeError('只能对函数使用 bind 方法')
  }

  // 保存当前函数的指针
  const self = this;
  // 拿到除第一个参数以外的其他参数列表
  const args = [].slice.call(arguments,1)

  function Bound() {
    // 如果 this instanceof Bound，说明是通过 new 关键字调用
    // 这时就将 this 直接绑定到 self，而忽略 thisObj，在 self 内部会对 this 添加属性和方法
    return self.apply(this instanceof Bound ? this : thisObj,args.concat([].slice.apply(arguments)))
  }

  // 实现继承
  if(this.prototype){
    Bound.prototype = Object.create(this.prototype)
  }

  return Bound
}