JavaScript中,this数值在于他在哪一个前后文里被

在JavaScript中，this是一个非常重要的关键词，可用于浏览目标里的属性和方法。它偏向现阶段函数的执行上下文。因为 JavaScript 能是面向对象，还可以是根据原型语言表达，因此 this 的内涵有时也会有一些繁杂，它个人行为有时会令人困惑不已。

一、令人头疼的this

在JavaScript中，this数值在于他在哪一个前后文里被启用。前后文能是全局对象、函数公式、目标等。下面我们就来详尽聊一聊这类情况：

1. 全局性前后文里的this

在全局性前后文中，this偏向全局对象。用浏览器环境里，这一全局对象是window目标。在Node.js环境里，这一全局对象是global目标。

console.log(this === window); // true

需注意，尽管this偏向全局对象，但在严格模式下，this为undefined。除此之外，在变量内部结构，this数值在于函数是怎样被调用的。如果函数被认为是对象的方法启用，那样this偏向该目标。如果函数是一般函数调用，那样this偏向全局对象。如果函数是结构函数调用，那样this偏向创好的对象。

2. 函数公式前后文里的this

在函数中，this数值在于函数是怎样被调用的。当一个函数公式被认为是一般函数调用时，this偏向全局对象。比如：

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

myFunction(); // 导出全局对象（window或global）

可是，当一个函数公式做为对象的方法启用时，this偏向启用此方法的对象。比如：

const myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // 导出myObject目标

3. 对象里的this

当一个函数公式被用于对象时，this偏向创好的对象。比如：

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

const person = new Person('张三');
console.log(person.name); // 导出 '张三'

4. 箭头函数里的this

箭头函数里的this与一般函数公式不一样，它没有自己执行上下文，反而是与其说所属的执行上下文分享同一个执行上下文。在箭头函数中，this偏向函数定义时所属的前后文。比如：

const myObject = {
  myMethod: function() {
    const myArrowFunction = () => {
      console.log(this);
    }
    myArrowFunction();
  }
};

myObject.myMethod(); // 导出myObject目标

箭头函数在界定的时候会捕捉该的执行上下文里的 this值。因而，箭头函数的执行上下文里的 this 值与界定他的时候所属的执行上下文里的 this 值同样，且不能根据 call()、apply()、bind()更改箭头函数里的 this 偏向。

二、更改this数值

有时，我们应该显式地更改this数值，这时候就可以使用call()、apply()或bind()及其new运算符方式。

1. call()和apply()方式

call()和apply()方式可用于更改函数中this数值，并及时启用该函数公式。之间的区别取决于传参不同，call()方式传参以逗号分隔，apply()方式传参以二维数组方式。比如：

function myFunction(a, b) {
  console.log(this, a, b);
}

const myObject = {
  myProperty: 'Hello'
}

myFunction.call(myObject, 1, 2); // 导出myObject目标，1，2
myFunction.apply(myObject, [1, 2]); // 导出myObject目标，1，2

2. bind()方式

bind()方式可用于更改函数中this数值，并回到一个新的函数公式，不容易马上启用该函数公式。比如：

function myFunction(a, b) {
  console.log(this, a, b);
}

const myObject = {
  myProperty: 'Hello'
}

const boundFunction = myFunction.bind(myObject, 1, 2);
boundFunction(); // 导出myObject目标，1，2

3. new关联

在JavaScript中，new运算符用以建立一个新的目标，并把对象里的this偏向该新目标。new运算符实行下列实际操作：

1. 建立一个新的空对象
2. 将这个空对象原型偏向对象的prototype特性
3. 将对象里的this偏向该新目标
4. 实行对象里的编码，并为该新对象添加属性和方法
5. 回到该新目标

比如：

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

const person = new Person('张三');
console.log(person.name); // 导出 '张三'

在这样一个例子中，new实际操作建立了一个新的目标，并把对象Person里的this偏向该新目标。在构造方法中，this.name = name将对象name特性设为'张三'。最终，new实际操作回到该新目标，把它取值给自变量person。

new关联是一种特殊的方法，它能使this偏向创好的对象。在JavaScript中，new运算符是一种常见的建立新对象方法，应用它可以容易地建立一个新的目标并复位它们属性和方法。

三、结语

JavaScript里的this关键词是很重要的，它可用于浏览目标里的属性和方法。因为this的举动有时会令人困惑不已，所以需要对它有一个更加全面且深层次的了解。仅有明白了this的举动，才能更好的使用这些，写下更高效和易读性高的JavaScript代码。