Bind函数

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对象(即{
   })；
2. 为步骤1新创建的对象添加属性`__proto__`，将该属性链接至构造函数的原型对象；
3. 将步骤1新创建的对象作为`this`的上下文；
4. 如果该函数没有返回对象，则返回`this`。

• bind的作用: 创建一个新的函数(我们其实也可以称 —— 创建调用该函数的副本)，但是将this的值设置为传递给它的第一个参数也就是thisArgs。
• new的作用: 将this的值设置为新创建的空对象。
• 因此，如果使用new尝试调用与this关键字的值绑定的函数，则 new关键字将覆盖bind并将this设置为空对象。

function A() {
   
  // console.log(this);
  console.log('test');
}

var a = new A();
// 输出test

• 原生实现:

function A() {
   
  console.log('test');
}

function New(fn) {
   
  var obj = {
   };
  obj.__proto__ = fn.prototype;
  fn.apply(obj, arguments);
  return obj;
}

var a = New(A);
// 输出test

• new详细的介绍参考。

arg1, arg2, …

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

返回值

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

bind()描述

• bind()函数会创建一个新的绑定函数(bound function, BF)。绑定函数是一个exotic function object(怪异函数对象)，它包装了原函数对象。调用绑定函数通常会导致执行包装函数。

• 绑定函数具有以下内部属性:

1. [[BoundTargetFunction]] - 包装的函数对象