2021/01/28 - this的理解

[lxinr]

this 实际上是在函数被调用时(函数在代码中被调用的位置)发生的绑定，它指向什么完全取决于函数在哪里被调用

调用栈

function test1 () {
  debugger
  // 当前调用栈是window -> test1 因此此时调用位置是全局作用域
  console.log('test1')
  test2() // test2的调用位置
}

function test2 () {
  debugger
  // 当前调用栈是window -> test1 -> test2 因此此时调用位置是在test1中
  console.log('test2')
  test3() // test3的调用位置
}

function test3 () {
  debugger
  // 当前调用栈是window -> test1 -> test2 -> test3 因此此时调用位置是在test2中
  console.log('test3')
}

test1() // test1的调用位置

// 调用顺序：test1() -> test2() -> test3()

绑定规则

1、默认绑定

独立函数调用，可以把默认绑定看作是无法应用其他规则时的默认规则，this指向全局对象

function test1 () {
  console.log(this.v)
}

var v = 3

test1() // 3

考虑如上场景，test1函数是在不带任何引用的形式调用的，因此它是在全局下调用，即适用默认绑定，但前提是在非严格模式下

假如是在严格模式下：

严格模式下，不能将全局对象用于默认绑定，this会绑定到undefined。只有函数运行在非严格模式下，默认绑定才能绑定到全局对象。在严格模式下调用函数则不影响默认绑定

function test1 () {
  'use strict';
  console.log(this.v)
}

var v = 3

test1() // Uncaught TypeError: Cannot read property 'v' of undefined，此时this绑定到undefined

2、隐式绑定

当函数引用有上下文对象时，隐式绑定规则会把函数中的this绑定到这个上下文对象。对象属性引用链中只有上一层或者说最后一层在调用中起作用

function test1 () {
  console.log(this.a)
}

var obj = {
  a: 2,
  test1: test1
}

obj.test1() // 2

隐式丢失

被隐式绑定的函数特定情况下会丢失绑定对象，应用默认绑定，把this绑定到全局对象或者undefined上

// 虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身。
// bar()是一个不带任何修饰的函数调用，应用默认绑定。

// 此时test2是obj.test1的一个引用，因此实际上，它引用的是test1函数本身
function test1 () {
  console.log(this.v)
}

var obj = {
  v: 10,
  test1: test1
}

var test2 = obj.test1 // 函数别名

var v = 20

test2() // 20

参数传递也是一种隐式赋值，传入函数时也会被隐式赋值

3、显式绑定

通过call(..) 或者 apply(..)方法。第一个参数是一个对象，在调用函数时将这个对象绑定到this。因为直接指定this的绑定对象，称之为显式绑定

4、new绑定

在使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：

1. 创建(或者说构造)一个全新的对象
2. 这个新对象会被执行[[prototype]]连接
3. 这个新对象会绑定到函数调用的this
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

优先级及判断方法

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

1. 函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象
2. 函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是 指定的对象
3. 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this 绑定的是那个上 下文对象
4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到 全局对象