[you don‘t know JavaScript] this全面解析

JavaScript this全面解析

文中内容来自笔者阅读《you don’t know JavaScript》总结

this完全取决于函数的调用位置

P.S. 单独叙述这部分只是因为我看书时误解成this绑定位置是函数调用位置，实际上你只需要记住this绑定位置应使用调用的位置来分析就行。

完全不同于作用域取决于词法作用域（也就是声明位置），函数的this取决于函数调用的位置，而调用位置处在当前调用栈的前一个调用中。

function foo() {
    //当前调用栈是 baz -> bar -> foo
    //foo的调用位置是bar()
    console.log("foo")
}
function bar() {
    //当前调用栈为 baz->bar
    //bar的调用位置是baz()
    console.log("bar")
    foo();
}
function baz() {
    //当前调用栈是 baz
    //baz的调用位置是全局作用域
    console.log("baz");
    bar()
}

baz(); //这是baz的调用位置

需要注意的是，书中"this的绑定位置由调用位置决定" 容易让人误解为this就指向调用位置，然而其调用位置不代表this绑定到这个位置，我们分析调用位置只是为了分析其调用方式(以下几种)，再得到其绑定位置。

几种调用方式

1. 独立调用：默认绑定

在独立函数调用时，this指向全局对象，在浏览器中，全局对象即窗口（windows对象）

同样用上一部分的代码举例

function foo() {
  //当前调用栈是 baz -> bar -> foo
  var pos = "foo";
  console.log("foo", this.pos);
}
function bar() {
  //当前调用栈为 baz->bar
  var pos = "bar";
  console.log("bar", this.pos);
  foo();
}
function baz() {
  //当前调用栈是 baz
  var pos = "baz";
  console.log("baz", this.pos);
  bar();
}

var pos = "window";

baz(); //这是baz的调用位置
console.log(this) //输出window对象

//如果你和我一样误解this绑定位置就是调用位置，
//就会认为这段代码会输出：
baz window
bar baz
foo bar

然而实际上，这三个函数都是直接调用的，this全部指向window，所以三个函数都输出window

一个微妙的细节：只有函数运行在非strict mode模式下时，默认绑定才绑定到全局对象；严格模式下全局对象无法使用默认绑定，this指向undefined

2. 对象调用：隐式绑定

当函数引用有上下文对象时，隐式绑定规则将函数绑定到这个上下文对象。

这里才真的可以体现我们前面分析调用位置的意义所在，即：引用链只有最后一层影响调用位置

function foo() {
  console.log(this.pos);
}

let obj1={
    pos:"obj1",
    foo:foo
}

let obj2 = {
    pos:"obj2",
    obj1:obj1
}

obj2.obj1.foo(); //foo的调用位置只由obj1影响
//输出 obj1

3. new构造函数：指向新对象

通过 new 关键字调用函数时，会创建一个新对象，并将 this 绑定到这个新对象

function Foo(name) {
    this.name = name;
}

const obj = new Foo('example');
console.log(obj.name); // 输出 'example'

4. 显示绑定

通过 call、apply 或 bind 方式调用函数，可以显式指定 this

这些方法的第一个参数是一个对象，它们会将这个对象绑定到this指定给所调用函数。

function foo() {
    console.log(this);
}

const obj = { value: 42 };

// 使用 call 显式绑定
foo.call(obj); // 输出 { value: 42 }

// 使用 apply 显式绑定
foo.apply(obj); // 输出 { value: 42 }

5. 特殊的箭头函数

this绑定由调用位置决定的规则只适用于function定义的函数。箭头函数没有自己的 this，它会捕获定义时的 this，而不是调用时的 this

const obj = {
    value: 42,
    method: () => {
        console.log(this.value);
    }
};

obj.method(); // 输出 undefined，因为箭头函数的 this 是定义时的 this

绑定丢失问题以及硬绑定

this隐式绑定在一些情况下会丢失绑定对象，应用默认绑定，把本该绑定到对象上的this绑定到全局对象上(严格模式就是undefined上)
多发于：

• 函数从对象中取出后独立调用。
• 回调函数中调用普通函数。
• 将方法赋值给另一个变量或传递给其他地方。
  书中给了两种情况，一种是对象中取出后独立调用：

function foo(){
    console.log(this.a)
}
var obj = {
    a:42,
    foo:foo
}

var bar = obj.foo;//函数别名
var a = "global"
bar() //输出 global，this绑定从obj丢失

还有一种是 回调函数中调用普通函数（比如传入settimeout等常出现这种情况）：

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

function dooFoo(fn) {
    fn() //调用位置，修改了this
}

var obj = {
    a:42,
    foo:foo
}
var a = "global"
dooFoo(obj.foo) //输出”global“

解决方式就是：应用硬绑定。
硬绑定通过Function.prototype.bind方法强制绑定 this，确保函数在任何情况下都能保持特定的 this 指向。

• bind 方法返回一个新函数，这个新函数的 this 永远指向指定的对象。

const obj = {
    value: 42,
    method() {
        console.log(this.value); // 希望 this 指向 obj
    }
};

// 硬绑定 method
const boundMethod = obj.method.bind(obj);

// 使用硬绑定的函数
setTimeout(boundMethod, 1000); // 输出 42，因为 this 始终指向 obj

硬绑定是一种显式且可靠的方式。相比之下，箭头函数也能解决部分绑定问题，但适用场景不同：

• 箭头函数：适合在定义时确定 this，如对象方法中的嵌套函数。
• 硬绑定：适合动态传递或多次调用函数时锁定 this。

const obj = {
    value: 42,
    method() {
        const arrowFunc = () => console.log(this.value);
        arrowFunc(); // this 始终指向 obj
    }
};

obj.method(); // 输出 42