js中改变this指向的三个常用方法bind,call和apply
2018-01-18 16:34
986 查看
一.bind:
说起bind,很多人都会想起jquery中的bind绑定方法,给元素绑定事件,今天所讲的bind则是js的原生方法---可改变this的指向,下面我们来看演示:var name = 'sally';
function sayName(){
return this.name;
}
function sayName2(){
return this.name
}
var o = {
'name':'John',
sayName:sayName,
sayName2:sayName2.bind(window)
};
console.log(o.sayName()); //John
console.log(o.sayName2());//sally 结果看来很明显,两个方法都是o对象来调用的,在不使用bind改变this指向空间时,两个均为John,但由于bind的特殊作用,将其指向绑定为window的,因为最后一个输出了全局变量的name;
二.call和apply:
相同点:call和apply均可以改变this指向,
不同点:call接受的参数为一个一个的,但是apply接受的参数只能为一个严格的数组(详情见如下的代码演示)
var name = 'sally';
function sayName(){
return this.name;
}
var o = {
'name':'John',
sayName:sayName
};
sayName();
结果为:sally 因为此时this所指对象为windowsayName.call(o);
//sayName.apply(o);以上不管哪一个,均可以将其this指向指向为o,那又有什么不同点呢?var name = 'sally';
function sayName(){
console.log (this.name,arguments)
}
sayName.call(o,1,2,3);
但若换成apply的话,会报错,因为apply接受的参数应该是一个严格意义的数组。
若改成下面的就可以了,
sayName.apply(o,[1,2,3])
新开的博客,欢迎各位抢占沙发,积极评论,哈哈
说起bind,很多人都会想起jquery中的bind绑定方法,给元素绑定事件,今天所讲的bind则是js的原生方法---可改变this的指向,下面我们来看演示:var name = 'sally';
function sayName(){
return this.name;
}
function sayName2(){
return this.name
}
var o = {
'name':'John',
sayName:sayName,
sayName2:sayName2.bind(window)
};
console.log(o.sayName()); //John
console.log(o.sayName2());//sally 结果看来很明显,两个方法都是o对象来调用的,在不使用bind改变this指向空间时,两个均为John,但由于bind的特殊作用,将其指向绑定为window的,因为最后一个输出了全局变量的name;
二.call和apply:
相同点:call和apply均可以改变this指向,
不同点:call接受的参数为一个一个的,但是apply接受的参数只能为一个严格的数组(详情见如下的代码演示)
var name = 'sally';
function sayName(){
return this.name;
}
var o = {
'name':'John',
sayName:sayName
};
sayName();
结果为:sally 因为此时this所指对象为windowsayName.call(o);
//sayName.apply(o);以上不管哪一个,均可以将其this指向指向为o,那又有什么不同点呢?var name = 'sally';
function sayName(){
console.log (this.name,arguments)
}
sayName.call(o,1,2,3);
但若换成apply的话,会报错,因为apply接受的参数应该是一个严格意义的数组。
若改成下面的就可以了,
sayName.apply(o,[1,2,3])
新开的博客,欢迎各位抢占沙发,积极评论,哈哈
相关文章推荐
- JS中改变this指向的方法(call和apply、bind)
- js中this的改变指向的方法:call和apply、bind
- JS中改变this指向的方法(call和apply、bind)
- js改变this指向方法call,apply;jq改变this指向方法$.proxy()
- js call() apply() bind() -改变this指向
- JavaScript中call,apply,bind方法的总结(改变this指向)
- js的this指针指向谁,以及相关的call、apply、bind方法
- 函数中的this指向,以及 修改this指向的 call/apply/bind方法
- JS 中的this指向问题和call、apply、bind的区别
- 浅谈js中的call,apply,bind方法中的this指针
- call,apply,bind改变this指向
- JS中的this指向问题以及apply、call、bind的使用
- JavaScript中的call(),apply(),bind()方法 关于this指向
- 改变this指向(call、apply、bind)
- js---js中的继承方法call、bind、apply,以及三者之间的区别总结。
- JavaScirpt的this指向 apply().call(),bind()个人笔记
- JS中的call、apply、bind方法
- JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
- js apply/call/caller/callee/bind使用方法与区别分析
- 理解JS中的call、apply、bind方法