函数内this指向
this的指向是在函数调用的时候决定的,调用方式不同决定了指向不同,一般都指向调用者。
- 普通函数 指向window,window为普通函数的调用者,window.fun();
- 对象方法的调用指向该对象。
- 构造函数调用指向实例对象,原型对象里面的方法也指向实例对象
- 事件绑定函数指向绑定事件对象
- 定时器函数和立即执行函数 都指向window
改变函数内部this的指向
javaScript 提供了一些方法能改变this的指向,常用的有bind(),call(),apply()
- call()
call() 可以调用函数,也可以改变函数this的指向
call(thisArg,age,age....)
var o = {
name : '对象'
}
function fn (){
}
fn.call(o)
call()用于继承
function Father(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
function Son(name,age,sex){
father.call(this,name,age,sex)
}
var son = new Son(‘成龙’,20,'男');
- apply()
可以调用函数,可以改变this指向
fun.apply(thisArg,[argsArray]);
thisArg,函数运行时的this值
argsArray ,传递参数必须在数组内
例子如借助数学内置对象求最大值
var arr = [12,22,55,6,88,10,189]
var max = Math.max.apply(Math,arr);
- bind() 方法
不会调用函数,但是能改变this指向。返回的是原函数this指向改变之后的新函数
fun.bind(thisArg,arg1,arg2....);
var o ={
name:'中国'
}
function fn(a,b){
console.log(this)
console.log(a + b)
}
var newFn = fn.bind(o,2,5);
newFn();
应用 如函数不想立即执行,但是想改变this指向。
例子:按钮点击之后,禁用按钮,3秒钟之后开启
var btn = document.querySelector('button');
btn.onclick = function(){
this.disabled = true;
setTimeout(function(){
this.disabled = false;
}.bind(this),3000);
}