Bind

Function.prototype.bind()

标题	内容
Bind的定义	什么是Bind函数?
Bind的使用	如何使用Bind函数?
Bind的实现原理	如何实现Bind函数?
Bind的示例	Bind函数实现继承等

Bind的定义

bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

const jackdan = {
  age: 27,
  height: 185,
  getAge: function() {
    return this.age;
  },
  getHeight: function() {
    return this.height;
  }
}

const age = jackdan.getAge;
console.log(age()); // The function gets invoked at the global scope
// undefined

const age1 = jackdan.getAge();
console.log(age1);
// 27

const jackdanAge = age.bind(jackdan);
console.log(jackdanAge());
// 27

语法

function.bind(thisArg[, arg1[, arg2[, ...]]]);

参数说明

thisArg

调用绑定函数时作为this参数传递给目标函数的值。如果使用new运算符构造绑定函数，则忽略该值。当使用bind在setTimeout中创建一个函数(作为回调提供)时，作为thisArg传递的任何原始值都转换为object。如果bind函数的参数列表为空，或者thisArg是null或者undefined，执行作用域的this将被视为新函数的thisArg。
为什么在new运算符构造绑定函数时就忽略thisArg了？这其实根据new运算符本身的特性有关，new运算符的特性如下:
1. 创建一个空的简单JavaScript对象(即{})；
1. 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象；
1. 将步骤1新创建的对象作为this的上下文；
1. 如果该函数没有返回对象，则返回this。

arg1, arg2, …

当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值

返回一个原函数的拷贝，并拥有指定的this值和初始参数。

bind()描述

bind()函数会创建一个新的绑定函数(bound function, BF)。

Bind的使用

Bind的实现

Function.prototype.myBind = function(context) {
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);

  var fTemp = function() {};

  var fBound = function() {
    var bindArgs = Array.prototype.slice.call(arguments);
    return self.apply(this instanceof fTemp ? this : context, args.concat(bindArgs));
  }

  fTemp.prototype = this.prototype;
  fBound.prototype = new fTemp();
  return fBound;
}

var jackdan = {
  age: 27,
  height: 185,
  getAge: function() {
    return this.age;
  },
  getHeight: function() {
    return this.height;
  }
}

var height = jackdan.getHeight;
var jackdanHeight = height.bind(jackdan);
console.log(jackdanHeight());
// 185