普通函数的this指向Window
function a(){console.log(this) }a() //Window
Dom元素绑定事件时的this,句柄里的 this 值是该元素的引用
document.onclick(function(){console.log(this)}) //this
setInterval和setTimeout中传入函数时,函数中的this会指向window对象
var num = 0;function Obj (){this.num = 1,this.getNum = function(){console.log(this.num);},this.getNumLater = function(){setTimeout(function(){console.log(this.num);}, 1000)}}var obj = new Obj; obj.getNum();//1打印的是obj.num,值为1obj.getNumLater()//0打印的是window.num,值为0
由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window
可以使用call和apply或者bind改变定时器中的this指向
var num = 0;function Obj (){this.num = 1,this.getNum = function(){console.log(this.num);},this.getNumLater = function(){setTimeout(function(){console.log(this.num);}.bind(this), 1000)}}var obj = new Obj; obj.getNum();//1打印的是obj.num,值为1obj.getNumLater(this)//0打印的是obj.num,值为1
上面代码中使用了bind来改变定时器中this的指向,是因为call和apply会立即调用,就改变了定时器的延时效果,定时器就没有用了,所用bind
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
apply 、 call 、bind 三者都可以利用后续参数传参;
bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
对象中的this指向对象本身
var obj ={a:function(){console.log(this) //{a: ƒ}}}obj.a()
var obj ={a:function(){console.log(this) },say:function(){var _this =this;setTimeout(function(){console.log(_this)})}} obj.a() //{a: ƒ, say: ƒ} //this都指向obj
window.val = 1;var obj = {val:2,dbl:function(){this.val *=2;val *=2;console.log(val) //val是全局的val 1*2=2console.log(this.val) //obj中的val 2*2=4}}obj.dbl() //2 4
window.val = 1;var obj = {val:2,dbl:function(){this.val *=2;val *=2;console.log(val) console.log(this.val)console.log(this) //4 4 window}}var func = obj.dbl;func(); //func 的this指向window
总结:
1.普通函数的this指向window 2. dom元素绑定的事件中的this指向该元素 3. 定时器中的this指向window(ES6) 4. 对象中的 this指向对象本身
箭头函数中的this 明天补全
箭头函数this
定义函数所在的对象,不再是运行时所在的对象没有arguments,用 … 代替
3.箭头函数不能当构造函数