三种方法的作用
在 JavaScript 中
-
call
、apply
和 bind
是 Function 对象自带的三个方法,都是为了改变函数体内部 this
的指向。
-
call
、apply
和 bind
三者第一个参数都是 this
要指向的对象,也就是想指定的上下文。
-
call
、apply
和 bind
三者都可以利用后续参数传参。
-
bind
是返回对应 函数,便于稍后调用;apply
、call
则是立即调用 。
举个栗子
function fruits() {}
fruits.prototype = {
color: 'red',
say: function() { console.log('My color is ' + this.color);
}
} var apple = new fruits;
apple.say();
如果我们有一个对象 banana= {color : 'yellow'}
,我们不想重新定义 say 方法,那么我们可以通过 call
或 apply
用 apple 的 say 方法:
var banana = { color: 'yellow' };
apple.say.call(banana); // 此时的this的指向已经同过call()方法改变了,指向的是banana,this.color就是banana.color='yellow'; // 结果是My color is yellow
apple.say.apply(banana); // 同理,此时的this的指向已经同过apply()方法改变了,指向的是banana,this.color就是banana.color ='yellow'; // 结果是My color is yellow
apple.say.apply(null); // null是window下的,此时,this 就指向了window ,但是window下并没有clolr这个属性,因此this.clolr就是window.color=undefined; // 结果是My color is undefined
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
call
和 apply
的区别
二者的作用完全一样,知识接受 参数 的方式不太一样。
call
是把参数按顺序传递进去,而 apply
则是把参数放在 数组 里面。
var array1 = [12,'foo',{name:'Joe'},-2458]; var array2 = ['Doe' , 555 , 100]; Array.prototype.push.call(array1, array2); Array.prototype.push.apply(array1, array2);
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
类(伪)数组使用数组方法
var divElements = document.getElementsByTagName('div'); Array.isArray(divElements); var domNodes = Array.prototype.slice.call(document.getElementsByTagName('div')); Array.isArray(domNodes);
验证一个对象的类型可以用
Object.prototype.toString.call(obj)
bind()
方法
bind()
方法会创建一个 新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()
方法的第一个参数 作为 this,传入 bind()
方法的 第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
注意
:bind()
方法创建的函数不会立即调用,在下面的例子中,最后 func()
才调用了函数,这是它与 call
和apply
的区别。
var bar = function(){ console.log(this.x);
} var foo = {
x:3 }
bar(); var func = bar.bind(foo); func();
在 Javascript 中,多次 bind()
是无效的。更深层次的原因, bind()
的实现,相当于使用函数在内部包了一个 call / apply
,第二次 bind()
相当于再包住第一次 bind()
,故第二次以后的 bind
是无法生效的。
var bar = function(){ console.log(this.x);
} var foo = {
x:3 } var sed = {
x:4 } var func = bar.bind(foo).bind(sed);
func(); var fiv = {
x:5 } var func = bar.bind(foo).bind(sed).bind(fiv);
func();