JavaScript bind()

小灰灰 2020-06-02 13:55 698阅读 0赞

# JavaScript bind()

bind() 方法可以创建与原来函数主体完全一致的新函数，ES5新增。

新函数也称作绑定函数，既然被称作绑定函数，自然会向其绑定一些新内容。

语法结构：

```javascript
fun.bind(thisArg[, arg1[, arg2[, ...]]])
```

参数解析:

（1）.fun：源函数，新创建的绑定函数体与其完全一样。

（2）.thisArg：必需，绑定函数中this将指向它。

（3）.arg1-argN：可选，绑定函数预定义的参数。

**浏览器支持：**

（1）.IE9+ 浏览器支持此方法。

（2）.edge 浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera 浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safari 浏览器支持此方法。

**代码实例：**

```javascript
let antzone={
  webName:"蒲公英云",
  age:4,
  show:function(){
    return this.webName;
  }
}
console.log(antzone.show());
```

调用 antzone 的 show() 方法，打印结果是 "蒲公英云"，因为 this 指向对象 antzone。

如果感觉通过对象调用方法比较麻烦，想将其单独拿出来调用。

代码修改如下：

```javascript
let antzone={
  webName:"蒲公英云",
  age:4,
  show:function(){
    return this.webName;
  }
}
let show=antzone.show;
console.log(show());
```

此时，show() 函数 this 指向 window，打印结果并非预期。

通过 bind() 方法可以解决上述问题，代码修改如下：

```javascript
let antzone = {
  webName: "蒲公英云",
  age: 4,
  show: function(){
    return this.webName;
  }
}
let show = antzone.show;
let bindShow = show.bind(antzone);
console.log(bindShow());
```

代码分析如下：

（1）.show() 函数中的 this 原本指向 window。

（2）.通过 bind() 方法会以 show() 函数为模板创建一个绑定函数，并将此函数的 this 指向 antzone 对象。

```javascript
function func(){
  return Array.prototype.slice.call(arguments);
}
let bindFunc=func.bind(window,1,2);
console.log(bindFunc(3,4))
```

代码运行效果截图如下：

![](/images/1591106110448.png)

代码分析如下：

（1）.bind方法可以为新创建的函数预定义参数。

（2）.预定义参数的顺序排列在为新函数传递的参数之前。

（3）.上述代码通过bind方法为新函数预定义两个参数1与2。

（4）.为bindFunc函数传递两个参数3与4，它们排列在1与2之后。

```javascript
function Antzone() {
  this.webName=arguments[0];
  this.age=arguments[1];
}
let bindAntzone=Antzone.bind({},"蒲公英云");
let ant=new bindAntzone(4);
console.log(ant.webName);
console.log(ant.age);
```

代码分析如下：

（1）.新创建函数用作构造函数创建对象。

（2）.bind规定的this无效，但是预定义的参数依然有效。

特别说明：实际工作中不推荐使用绑定函数用作构造函数，上面仅是介绍其中的原理。