this 的指向

Posted 2020-12-22 oulae

目录

• 1. JavaScript 中this 的指向
  • 1.1 函数中this 的指向
  • 1.2 object 中this 的指向
• 2. 箭头函数中this 指向的情况
  • 2.1 箭头函数中this, 由上下文作用域决定
  • 2.2 箭头函数中的this 不会指向对象中的this
• 3. 面试题
  • 3.1 题目1
  • 3.2 面试2

1. javascript 中this 的指向

1.1 函数中this 的指向

JavaScript 中, 有3种类型的函数: 箭头函数, 函数声明式, 函数表达式; 它们的this 指向可以分类为:

1. 箭头函数: 箭头函数中的this 指向上一层环境作用域
2. 函数声明式/函数表达式: 函数声明式/函数表达式中的this 指向函数的调用, 如果没有显式的函数调用, 那么则该函数运行与全局作用域, 指向window/global

1.2 object 中this 的指向

JavaScript 中, 对于数据类型object, 其实也存着这this, Object 中的this 指向本身

const log = console.log.bind(console)

let obj = {
    objThis: function () {
        return this
    }
}

log(obj === obj.objThis()) // true

2. 箭头函数中this 指向的情况

2.1 箭头函数中this, 由上下文作用域决定

function Timer() {
    this.s1 = 0
    this.s2 = 0
    setInterval(() => {
        this.s1++ // 由于该匿名函数为箭头函数, 所以此时的this, 根据作用链域的规则将指向Timer
    }, 1000)
    setInterval(function () {
        // console.log(this)
        this.s2++ // 由于该匿名还是为函数表达式, 所以此时的this, 由于没有显式调用者, 将指向window
    }, 1000)
}

var timer = new Timer()

setTimeout(() => console.log(‘s1: ‘, timer.s1), 3100) // 3
setTimeout(() => console.log(‘s1: ‘, timer.s2), 3100) // 0

2.2 箭头函数中的this 不会指向对象中的this

箭头函数中的this 指向的是沿着作用链域寻找上下文作用域, 但是这个作用域不包括对象中的this;
简而言之, 箭头函数作为一个对象的方法时, 此时箭头函数中的this 将指向window/global, 不会指向对象本身

const log = console.log.bind(console)

let obj = {
    objThis: function () {
        log(this)
    },
    say: () => {
        log(this)
    }
}

obj.objThis() // obj
obj.say() // window

3. 面试题

3.1 题目1

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}

o.f1()

解析:

var o = {
  f1: function () {
    console.log(this); // 该函数是函数表达式, 因此this 指向函数的调用, 即o 
    var f2 = function () {
      console.log(this); // 该函数是函数表达式, 且为立即调用函数; 此时没有显式指定调用者, 则调用者为global/window
    }();
  }
}

o.f1()

3.2 面试2

当箭头函数作为一个对象的方法时, 此时箭头函数中的this 指向全局

let obj  = {
    f1: () => {
        console.log(this)
    }
}
obj.f1()