this指向分为三种情况
1.非箭头函数this
一句话总结非箭头函数的this指向,使用就近原则,离谁近,就指向谁
举个例子来说吧,正常我们再window下定义的非箭头函数,是属于window这个顶级对象的作用域内,所以在这个作用域内的非箭头函数的this指向的window
案例一:
function test() {
console.log(this, "function中this的指向"); // 指向window？
function test1() {
console.log(this, "test1中箭头函数的指向"); // 指向window？
}
test1();
}
test();
如案例中描述的内容,test是属于window作用域内的,所以内部的this指向是window,test1位于test的作用域内 ,所以指向也是window
2.箭头函数this
箭头函数不绑定this,所以他的指向是通过捕获(定义位置的)上下文的this值.简单理解来说是对于父级的上下文进行绑定在一起,这里一定要注意是父级的上下文,不是指父级的调用者
案例一:
var obj = {
id: 1,
show: () => {
console.log(this); //window
},
show2: function () {
console.log(this); //obj
}
};
obj.show();
obj.show2();
箭头函数处于obj的作用域内,父级就是obj,所以指向的父级的上下文,最终指向就是obj的调用者window,非箭头函数处于obj的作用域内,所以最终指向的也是obj
3.严格模式下的this
严格模式下 this指向是undefined的 这个就不用叙述了
4.this的思路整理
1.构造函数中的this指向
function Person() {
this.age = 0;
console.log(this);
setTimeout(() => {
console.log(this); //person
this.age++;
}, 1000);
}
var p = new Person();
这个就比较有意思了 ,构造函数中的this是person ,处于这个构造函数中的this按理来说都应该指向的是this,但是实际上不是,因为要分清楚,箭头函数的指向的父级的上下文, **非箭头是就近选择,**那么在这个里面箭头函数的父级是setTimeout,虽然他的this指向是window,但是seTimeout的处于的构造函数person的,依照前面的说法,父级的上下文,不是父级本身,所以箭头函数指向的就是这个person,而不是window,如果还是理解不够好的话 ,那再来看看构造函数中的非箭头函数的例子
function Person2() {
this.age = 0;
console.log(this); // person
setTimeout(function () {
console.log(this); //window
this.age++;
}, 1000);
}
var p = new Person2();
首先明白这是一个构造函数,但是不一样的就是setTimeout里面的是非箭头函数,那么他会就近选择,对吧,如果明白这一点,那就毋庸置疑了,指向肯定是window.
总结:
既然说到了这个this,不妨说一下vue中的this吧 ,一般我们都是用这个this指向的vue的实例,这是因为,组件都可以看成一个vue的构造函数,而且无论是methods,或者生命周期中的created 或者 mouted都是使用的非箭头函数. 那么this的指向肯定就是vue的实例了.
如果是我们定义了匿名函数的话 this的指向会发生变化,会指向window.
事实上情况就是这么个情况,但是有一点就是不太懂,如果methods中的使用箭头函数的话,那他的父级应该是methods,而这个methods还是处于vue的作用域内,但是为啥指向的不是vue呢?而是window呢 生命周期那个可以理解 但是这个是真的不理解?肯定是我哪里出了问题了,哈哈,
有知道的可以给我留言哈,感谢解惑,手动狗头感谢!!!!
已经被大佬解惑了 对作用域的理解偏差了 作用域指的全局作用和局部作用域,局部一般都是指的是函数内部 所以之前有些地方时错误,整体没什么毛病
