this
执行上下文对象中除了包括变量对象(vo),作用域链,还有就是确定this指向了。
关于this指向的问题,从我入门JavaScript至今便一直不得其解。不得不说真的非常让人捉摸不透。其实它也容易记住,this永远指向最后一个调用它的对象!
业务场景
1. 函数的直接调用
var a = 'wrapper'
function foo() {
var a = 'inner'
console.log(this.a)
}
foo()
结果:严格模式下为:undefined
, 非严格模式下为:'wrapper'
。
这是因为使用var a
时存在变量提升, a被添加到了window对象中,相当于window.a = wrapper
, 紧接着foo
被调用这就相当于window.foo()
此时由于this永远指向最后一个调用它的对象!所有得出结果。
但是现在都8102年了大家都用let
, const
来定义变量了,如果使用es6来定义a, 上文结果就是undefined
,但是知道总比不知道好。
2. 调用一个对象中的方法
var a = 'wrapper'
var o = {
a: 'o',
foo: function() {console.log(this.a)}
}
// 例1
o.foo() // 'o'
// 例2
var bar = o.foo
bar() // 'wrapper'
在例1中,调用了对象中的方法,此时函数中的this就是指向了对象o
本身,此时this就相当于代词你,我,他
3. 构造函数
function Animal(name) {this.name = name}
var animal = new Animal('guapi')
console.log(animal.name)
此处涉及到在JavaScript中new一个对象时的过程。以后一定要补上。
4. 使用call, apply, bind
显示绑定this指向
以前写过博客,显示绑定this指向,可以参考。
5. 箭头函数
在我刚刚学习vue,axios时,从jQuery转向MV**的时候,期望在axios的回调函数中改变data
中的值,使用普通的函数一定会失败。现在我终于知道了为什么了
当使用
new Vue({
data: ...
method: ...
})
Vue接受的参数也是一个对象,虽然它被Vue经过了一系列的封装。但是this的指向大体上还是那么个意思。
当在axios的回调函数中使用function () {....}
时其实在回调函数中的this指向已经变更了,并不是这个Vue实例。
解决办法有两种:第一种是箭头函数, 第二种是先将外部的this赋值,然后在内部调用。
这个主要讨论箭头函数。
1.说到这里箭头函数肯定与普通函数的this指向不同!
我对它的理解是:可以从当前箭头函数(CurrentArrowFunc)开始一级一级的往上查找,寻求到第一个普通函数(CommonFunc)为止,那么CurrentArrowFunc的this指向等同于CommonFunc的this指向。如果没有CommonFunc那就是全局的那个this了。
var obj = {
b: () => {console.log(this)},
c: function () {console.log(this)},
d: function () {
const foo = () => {console.log(this)}
foo()
},
e: function () {
const foo = function () {console.log(this)}
foo()
}
}
// 我是在浏览器的命令行中打印的
obj.b() // window
obj.c() // obj
obj.d() // obj
obj.e() // window
由于这篇博客主要写的是this指向,以后会特别记录下自己对箭头函数的理解。
网友评论