show me your debug-this指向

上一篇详细说了关于变量，作用域，事件循环的一些内容，现在我们再继续聊聊this与原型

目录

• this是什么
• 方法和箭头函数的this指向差异
• this引用情况进阶
• 显示绑定和隐式绑定
• use strict的影响

内容

this是什么

在JavaScript中，this是一个关键字，用于指向当前函数的执行上下文。它的值取决于函数的调用方式和上下文。

具体来说，this的值可以是以下几种情况：

• 全局上下文：在全局上下文中，this指向全局对象

  • 在浏览器中是window对象
    
  • 在Node.js中是对象
    

• 函数上下文：在函数上下文中，this的值取决于函数的调用方式。如果函数是作为对象的方法调用，this指向该对象；如果函数是作为普通函数调用，this指向全局对象；如果函数是作为构造函数调用，this指向新创建的对象；如果函数是通过call, apply或bind方法调用，this指向传入的第一个参数。

  • 全局调用时，this指向了Window对象
    
  • 构造函数时, this指向其内部
    
  • 通过call, apply或bind调用时, 指向传入的上下文
    call
    
    apply
    
    bind
    

• 箭头函数上下文：在箭头函数中，this的值取决于箭头函数定义时的上下文，而不是调用时的上下文。如果箭头函数是在全局上下文中定义的，this指向全局对象；如果箭头函数是在对象上下文中定义的，this指向该对象；如果箭头函数是在函数上下文中定义的，this指向该函数的父级上下文。

  细说下关于方法和箭头函数的this指向差异。在JavaScript中，方法中的this和箭头函数的this有以下几个区别：

  • this的指向不同：

  • 在方法中，this的值是在运行时动态绑定的，取决于调用该方法的直接父级上下文；
    

    • 而在箭头函数中，this的值是在定义时静态绑定的，取决于箭头函数定义时的上下文，而不是调用时的上下文。
      

  • 不能作为构造函数：箭头函数不能作为构造函数使用，因为它们没有自己的this值，而是继承了定义时的上下文的this值。
    

  • 不能使用call、apply、bind方法：由于箭头函数的this值是静态绑定的，因此不能使用call、apply、bind等方法来改变this的值。
    方法时
    
    箭头函数时
    

this引用情况进阶

看两种情况:

//多层父级引用发生时，this的指向
function foo() {
    console.log(this.a);
}

var obj2 = {
    a: 42,
    foo: foo
};

var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42

//作为入参传递发生时，this的指向
function foo() {
    console.log(this.a);
}

function doFoo(fn) {
    // fn其实引用的是foo
    fn(); // <-- 调用位置！
}

var obj = {
    a: 2,
    foo: foo
};

var a = "oops, global"; // a是全局对象的属性

doFoo(obj.foo); // "oops, global"

以上说明什么？仔细想想，他们无论是发生多层引用，还是作为入参传递再使用，其实都是发生引用关系，上下文并不会因此而传递，所以归根结底看下来，还是可以通过先透视其引用关系之后，再分析其调用时的上下文，来确定this的指向。

显示绑定和隐式绑定

隐式绑定是通过函数调用的上下文来绑定this的值
显示绑定是通过call、apply、bind等方法来手动绑定this的值

区别如下：

• 绑定时机不同：隐式绑定是在函数调用时自动进行的，而显示绑定是在函数调用前手动进行的。

• 绑定优先级不同：当函数同时使用隐式绑定和显示绑定时，显示绑定的优先级更高。也就是说，如果函数同时使用了call、apply、bind等方法和隐式绑定，那么显示绑定的this值将覆盖隐式绑定的this值。

• 可维护性不同：隐式绑定可以使代码更简洁、易读，但是可能会导致代码可维护性降低。因为隐式绑定的this值是在函数调用时自动绑定的，可能会导致this值的意外改变，从而导致代码出现错误。而显示绑定可以使代码更可靠、易于维护，因为它可以手动绑定this值，避免意外改变this值的情况发生。

use strict的影响

在JavaScript中，使用"use strict"严格模式可以对this的行为产生影响。在严格模式下，this的值不再是全局对象，而是undefined。这可以帮助开发人员避免一些常见的错误，并提高代码的可靠性。

具体来说，使用"use strict"严格模式可以对以下几个方面产生影响：

• 全局上下文：在全局上下文中，使用"use strict"严格模式可以将this的值设置为undefined，而不是全局对象。

• 函数上下文：在函数上下文中，使用"use strict"严格模式可以将this的值设置为undefined，而不是全局对象或新创建的对象。这意味着，在严格模式下，如果函数没有明确指定this的值，它将始终为undefined。

• 构造函数：在构造函数中，使用"use strict"严格模式可以防止忘记使用new关键字创建对象时，将this指向全局对象。在严格模式下，如果忘记使用new关键字创建对象，this将为undefined，而不是全局对象。