JS 中this的指向问题

JS 中this的指向问题

原文章地址
在了解this指向之前必须先知道 this的指向在函数定义的时候是确定不了的,只有在函数调用的时候才知道 this指向最终调用它的对象

小例子

function a() {
    var name = "小火车"
    console.log(this) // window
    console.log(this.name) // undefined
}
a()
  • 可以看到在JS引擎创建阶段的时候this指向的是window
    在这里插入图片描述
  • 在调用a()函数的时候处于JS引擎的创建阶段, this指向还是window
    在这里插入图片描述
  • 其实 a()也可以看成是window.a(), 因此在调用函数的时候, this就指向了window

小例子2

var b = {
    name : "小火车",
    fn : function () {
        console.log(this) // 对象 b
        console.log(this.name)  // 小火车
    }
}
b.fn()
console.log(b.fn() === window.b.fn()) // true

在这里插入图片描述

  • 当调用b.fn()的时候可以看到this的指向已经发生变化了, 不再是window,而是对象b
  • 因为fn()函数是被对象b调用了, 函数里面的this就指向了对象b
  • 疑问 这里的b.fn() === window.b.fn()为什么this没有指向window???

小例子3

var a = {
    name: "小火车",
    age: 24,
    b: {
        like: "况且况且",
        fn: function() {
            console.log(this) // 对象 b
            console.log(this.name) // undefined
        }
    }
}
a.b.fn()

在这里插入图片描述

  • 这个例子说明了this的指向并不一定是指向了最终的调用对象
  • 情况说明:
  1. 如果一个函数中存在了this,但是this没有被调用, 那么这个this就指向的是window
  2. 如果一个函数中存在了this,对象中存在这个函数, 并且这个函数被这个对象调用了, 那么这个this就指向该对象
  3. 如果一个函数中存在了this,并且这个函数存在多个上级的对象, 尽管这个函数是被最外层的对象调用的, 但是this的指向也只会是这个函数的上一级的对象
  4. 也可以理解为a.b.fn()最后调用fn()的是b

例子4

var a = {
    name: "小火车",
    age: 24,
    b: {
        like: "况且况且",
        fn: function() {
            console.log(this) // window
            console.log(this.name) // undefined
        }
    }
}
var c = a.b.fn
c()

在这里插入图片描述

  • this指向最终调用它的对象
发布了81 篇原创文章 · 获赞 3 · 访问量 3448

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览