问题引入:我时常遇到这样的问题,比如点击一个按钮,在控制台输出input输入框里面的值,但是会出现我在输入之前就已经在控制台输出undefined。往常我的做法是加定时器,但这毕竟不是高效的方法。今天主要探讨如何使用js中call,bind,apply的绑定方法来解决此问题。
// --------------------------
var name = '小李',age = 20;
var obj = {
name:"小陈",
age:19,
objAge:this.age,//this指window全局对象
myFun:function(){
console.log(this);//this指obj对象
console.log(this.name + "年龄" + this.age)
}
}
console.log(obj.objAge);
console.log(obj.myFun())
// -------------------------------
var nea = "小王";
function show(){
console.log(this);//this指window
console.log(this.nea);
}
show();
1、call(),apply(),bind()都可以重新定义this对象。
var name = '小李', age = 20;
var obj = {
name: "小陈",
age: 19,
objAge: this.age,//this指window全局对象
myFun: function () {
console.log(this);//this指obj对象
console.log(this.name + "年龄" + this.age)
}
}
var fi = {
name:"小康",
age:33
}
obj.myFun.call(fi);
obj.myFun.apply(fi);
obj.myFun.bind(fi)();
总结:
不传任何参数,this指向windows;
有参数时,this指向第一个参数。
bind方法后面多加个括号才能调用,所以bind返回的是一个新函数,调用之后才能执行。
2、在传参情况下
var name = '小李', age = 20;
var obj = {
name: "小陈",
age: 19,
objAge: this.age,//this指window全局对象
myFun: function (fm,t) {
console.log(this);//this指obj对象
console.log(this.name + "年龄" + this.age,"来自" + fm + "去往" + t)
}
}
var fi = {
name: "小康",
age: 33
}
obj.myFun.call(fi,"上海","北京");
obj.myFun.apply(fi,["上海","北京"]);
obj.myFun.bind(fi,"上海","北京")();
obj.myFun.bind(fi,["上海","北京"])();
总结:
call,bind,apply这三个方法的第一个参数都是this所要指的对象。
call,第二个参数开始,使用逗号分隔开即可。
apply,第二个参数开始,要是用[ ]将剩下参数包裹,中间用逗号隔开。
bind, 除返回函数之外,与call类似。