1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 普通函数和箭头函数中的this指向

普通函数和箭头函数中的this指向

时间:2024-05-29 19:45:17

相关推荐

普通函数和箭头函数中的this指向

普通函数的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.箭头函数不能当构造函数

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。