JS之bind浅析及应用场景

JavaScript055

JS之bind浅析及应用场景,第1张

fn.bind(obj, args)

bind() 方法会创建一个函数,该函数的 this 指向了传入的第一个参数,当 bind() 的参数为空时, this 指向全局对象。如浏览器中的 window

因为 js 是一门 Duck typing 语言,所以我们可以通过 bind 实现一些共有方法。

有的时候我们需要针对特定的 this 调用某些方法。写起来比较麻烦,这个时候就可以使用 bind 创建一个 shortcut 方便调用。

bind 也可以绑定构造函数,但是当执行生成的函数时,会忽略this指向,即使在绑定时已经对其赋值。

1、call,apply和bind的区别

它们在功能上是没有区别的,都是改变this的指向,它们的区别主要是在于方法的实现形式和参数传递上的不同。call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数,需要再调用一次才行,

2、①:函数.call(对象,arg1,arg2....)

②:函数.apply(对象,[arg1,arg2,...])

③:var ss=函数.bind(对象,arg1,arg2,....)

3、总结一下call,apply,bind方法:

a:第一个参数都是指定函数内部中this的指向(函数执行时所在的作用域),然后根据指定的作用域,调用该函数。

b:都可以在函数调用时传递参数。call,bind方法需要直接传入,而apply方法需要以数组的形式传入。

c:call,apply方法是在调用之后立即执行函数,而bind方法没有立即执行,需要将函数再执行一遍。有点闭包的味道。

d:改变this对象的指向问题不仅有call,apply,bind方法,也可以使用that变量来固定this的指向。

call(thisObj,arg1,arg2...)、apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法

call(thisobj[, args])和apply(thisobj[, args])

作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组

还是举例说明比较直观:

?

1

2

3

4

5

6

7

8

9

10

window.color='red'

var o={color:"blue"}

function sayColor(){

alert(this.color)

}

sayColor()//red(全局函数,this是window)

sayColor.call(this)//red(调用call方法,指定对象是this,这里的this是window,没什么意义)

sayColor.call(window)//red(调用call方法,指定对象是window,没什么意义)

sayColor.call(o)//blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)

sayColor.apply(o)//blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)

ECMAScript5中的bind()方法和前二种方法相似,bind()这个方法会创建一个函数的实例,这个实例的this值会被绑定到传递给bind()函数的值

例子:

?

1

2

3

4

5

6

function a(y){

return this.x+y

}

var o={x:1}

var g=a.bind(o)

g(2)//3

从例子中可以看出函数a绑定到对象o上了,并且返回了新的函数g,调用g时,a函数会当作对象o的方法来调用

bind()这个方法是将函数绑定到某个对象上,并且返回一个新的函数,这个新函数中传入的参数都将传入被绑定的函数上。

下面来看看他们的区别

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。

在说区别之前还是先总结一下三者的相似之处:

1、都是用来改变函数的this对象的指向的。

2、第一个参数都是this要指向的对象。

3、都可以利用后续参数传参。

那么他们的区别在哪里的,先看一个例子。

var xw = {

name : "小王",

gender : "男",

age : 24,

say : function() {

alert(this.name + " , " + this.gender + " ,今年" + this.age)

}

}

var xh = {

name : "小红",

gender : "女",

age : 18

}

xw.say()

本身没什么好说的,显示的肯定是小王 , 男 , 今年24。

那么如何用xw的say方法来显示xh的数据呢。

对于call可以这样:

复制代码代码如下:

xw.say.call(xh)

对于apply可以这样:

复制代码代码如下:

xw.say.apply(xh)

而对于bind来说需要这样:

复制代码代码如下:

xw.say.bind(xh)()

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。

那么call和apply有什么区别呢?我们把例子稍微改写一下。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

var xw = {

name : "小王",

gender : "男",

age : 24,

say : function(school,grade) {

alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade)

}

}

var xh = {

name : "小红",

gender : "女",

age : 18

}

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。

对于call来说是这样的

复制代码代码如下:

xw.say.call(xh,"实验小学","六年级")

而对于apply来说是这样的

复制代码代码如下:

xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"])

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

那么bind怎么传参呢?它可以像call那样传参。

复制代码代码如下:

xw.say.bind(xh,"实验小学","六年级")()

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

复制代码代码如下:

xw.say.bind(xh)("实验小学","六年级")

以上所述就是本文的全部内容了,希望大家能够喜欢、

您可能感兴趣的文章:

全面解析JavaScript中apply和call以及bind(推荐)

关于JS中的apply,call,bind的深入解析

JS中改变this指向的方法(call和apply、bind)

浅谈javascript的call()、apply()、bind()的用法

跟我学习javascript的call(),apply(),bind()与回调

开启Javascript中apply、call、bind的用法之旅模式

javascript中call,apply,bind的用法对比分析

js apply/call/caller/callee/bind使用方法与区别分析

Javascript中apply、call、bind的巧妙使用