首先,先说下this指向:
this指向:谁调用,指向谁(这是错误的!!!)
this永远指向最后一个调用它的那个对象
解决this指向问题?
-
使用ES6中箭头函数
-
函数内部使用_this = this
-
使用apply,call,bind方法
-
new实例化一个对象
call、aplay 和 bind 区别
- apply和call基本类似,他们的区别只是传入的参数不同。
- apply传入的参数是包含多个参数的数组
- call传入的参数是若干个参数列表
- bind方法会创建一个新的函数,当被调用的时候,将其this关键字设置为提供的值,我们必须手动去调用
apply:
- apply() 方法调用一个函数,其具有一个指定的this值,以及作为一个数组(或者类似数组的对象)提供的参数,fun.apply(thisArg, [argsArray])
- thisArg:在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值,如果是原始值的this会指向该原始值的自动包装对象。
- argsArray:一个数组或者类数组对象,其中的数组元素将作为单独的参数传给fun函数。参数为null或者undefined,则表示不需要传入任何参数。
let obj = {
name : "小王",
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.apply(obj ),1000);
}
};
obj.func2(); // 小王
call:
- call() 调用一个函数,其具有一个指定的this值,以及若干个参数列表,fun.call(thisArg, arg1, arg2, …)
- thisArg:在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值,如果是原始值的this会指向该原始值的自动包装对象。
- arg1, arg2, …:若干个参数列表
let obj2 = {
name : "小李",
func1: function () {
console.log(this.name);
},
func2: function () {
setTimeout( function () {
this.func1()
}.call(obj2 ),1000);
}
};
obj2.func2(); // 小李
bind:
bind() 创建一个新的函数,当被调用时,将其this的关键字设置为提供的值,在调用新函数时,在任何提供一个给定的参数序列。
bind创建了一个新函数,必须手动去调用。
let obj3 = {
name : "小张",
func1: function () {
console.log(this.name);
},
func2: function () {
setTimeout( function () {
this.func1();
}.bind(obj3 )(),1000);
}
};
obj3.func2(); // 小张
到此,
结束~~~