美文网首页
this指向

this指向

作者: js好难学啊 | 来源:发表于2018-12-12 09:43 被阅读0次

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年了大家都用letconst来定义变量了,如果使用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指向,以后会特别记录下自己对箭头函数的理解。

相关文章

  • this指向以及改变this指向

    改变this指向 call() apply() bind()

  • this指向

    this指向: 简单的一句话,谁调用的函数,this就指向谁 例子: var obj = { fun1: func...

  • this指向

    axios.get('/api', {params: {name: "kerwin",age:100}}).the...

  • this指向

  • this指向

    例 例

  • this 指向

    window.name = 'xiaoyu' var myObj = {name: 'seven',getName...

  • 指向

    平静的海托着翻飞的火焰,离开港口就有多少离人的泪还会再次上演,看着手上的钟表计算着离开的航线,肃穆的夜还有一串星火...

  • this 指向

    this执行全局环境中 this 指向 window this很重要的解析 https://segmentfaul...

  • this指向

    // 在普通函数中,函数的调用者是window对象,所以函数中的this指针指向的是window,通过访问this...

  • 指向

    飘飘荡荡,所有的事情都在直指一个方向 珍惜所有的付出,不在一处能回馈的也必会找到另一种方式。愿长长久久

网友评论

      本文标题:this指向

      本文链接:https://www.haomeiwen.com/subject/tlfuhqtx.html