深入理解JS中的Function.prototype.bind()方法

序

在使用JavaScript时，函数绑定可能是最不用担心的，但是当您意识到需要一个解决方案来将这个上下文保存在另一个函数中时，您真正需要的是Function.prototype.bind()，但是您可能仍然没有意识到这一点。

当您第一次遇到这个问题时，您可能倾向于将它设置为一个变量，以便在更改上下文后可以继续引用它。

A.绑定的语法

bind()方法的主要功能是将函数绑定到对象。bind()方法创建一个函数，该对象在函数体中的值绑定到传入bind()函数的值。

1.1定义

Bind()的定义如下：

bind()方法创建一个新函数，当调用该函数时，该函数的this关键字被设置为提供的值，在调用新函数时提供的任何参数之前有一个给定的参数序列。

bind()函数创建了一个新的函数(称为绑定函数)，该函数与调整后的函数(绑定函数的目标函数)具有相同的函数体。调用目标函数时，该值绑定到bind()的第一个参数，该参数不能被重写。

1.2原则

下面的代码可以用来模拟bind()的原理：

function . prototype . bind=function(context){ var self=this；//保存原函数return function() {//返回新函数returnself.apply (context，arguments)；//执行新函数时，将传入的上下文作为新函数的{ 1.3 }语法

function . prototype . bind(this arg[，arg1 [，arg2 [，]])二。绑定的应用场景

2.1对象继承的实现

var A=函数(名称){ this.name=name}var B=function() { A.bind(this，自变量)；} b . prototype . getname=function(){ return this . name；}var b=新B(' hello ')；console . log(b . getname())；//“你好”2.2事件处理

var paint={ color: 'red '，count: 0，updatecount : function(){ this . count；console . log(this . count)；}};//事件处理程序绑定的错误方法：document.queryselector ('button ')。addeventlistener ('click '，paint . updatecount)；paint.updateCount函数的这一点成为绑定DOM对象//事件处理程序：document.queryselector ('button ')的正确方法。addeventlistener ('click '，paint . updatecount . bind(paint))；paint.updatecount函数的这个点成为paint2.3时间间隔函数

var notify={ text : ' Hello World！'，beforeRender:函数(){ alert(this . text)；}，render:函数(){//错误方法：setTimeout(this.beforeRender，0)；//undefined //正确的方法：settimeout (this。beforerender.bind (this)，0)；//“你好，世界！”}};notify . render()；2.4借用Array的原生方法

var a={ }；Array.prototype.push.bind(a，' hello '，' world '))；console . log(a)；//《你好》，《世界》三。bind()方法的浏览器兼容性

四.bind()的兼容性编写

if(！function . prototype . bind){ function . prototype . bind=function(){ var self=this，//保存原函数上下文=[]。shift.call (arguments)，//这个要绑定的上下文args=[]. slice . call(arguments)；//剩下的参数转换成数组返回函数(){//返回新的函数。//执行新函数时，将传入的上下文作为新函数的this //，并将传入的参数组合两次作为新函数returnself.apply (context，[])的参数。concat.call (args，[]。slice.call(参数))} }；}五、绑定和调用/应用方法的区别

共同点：

您可以更改函数执行的上下文；

差异：

Bind:不会立即执行函数，一般用于异步调用和事件；调用/应用：立即执行该函数。

摘要

好了，这就是本文的全部内容。希望这篇文章的内容能对你学习或使用Javascript有所帮助。有问题可以留言交流。