一、this关键字被用于指代当前的对象，通常，this指代的是方法中正在被调用的对象。
二、JavaScript 中的this可以用于任何函数，即使它不是对象的方法。

语法

this

用法

  1. this['propertyName']
  2. this.propertyName

| 【示例】假设一个用于验证对象value属性的validate函数，传参有对象，最高值和最低值。```jsx /* @param obj @param lowval @param hival */ function validate(obj, lowval, hival) { if ((obj.value < lowvalue) || (obj.value > hival)) { console.log(‘Invalid Value!’) } }

Enter a number between 18 and 99

 |
| --- |

<a name="IvWaS"></a>
# 描述
<a name="fkugY"></a>
## 全局上下文
一、无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象Window。<br />二、使用 globalThis 获取全局对象，无论你的代码是否在当前上下文运行。

| 【示例】```javascript
// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

console.log(globalThis); // Window对象

| | —- |

函数上下文

一、在函数内部，this的值取决于函数被调用的方式。

| 【示例】非严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象，浏览器中就是 window。```javascript function f1(){ return this; } //在浏览器中： f1() === window; // 在浏览器中，全局对象是window

//在Node中： f1() === globalThis;

 |
| --- |

| 【示例】严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined```javascript
function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

| | —- |

二、如果要想把 this 的值从一个环境传到另一个，就要用 call 或者apply 方法。

类上下文

一、this 在 类 中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。
二、在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中：
1、静态方法不是 this 的属性，它们只是类自身的属性。

| 【示例】```javascript class Example { constructor() { const proto = Object.getPrototypeOf(this); console.log(Object.getOwnPropertyNames(proto)); } first(){} second(){} static third(){} }

new Example(); // [‘constructor’, ‘first’, ‘second’]

 |
| --- |

<a name="FUlbS"></a>
## 派生类
一、不像基类的构造函数，派生类的构造函数没有初始的 this 绑定。在构造函数中调用 super() 会生成一个 this 绑定，并相当于执行如下代码，Base为基类：
```javascript
this = new Base();

二、在调用 super() 之前引用 this 会抛出错误。
三、派生类不能在调用 super() 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。

| 【示例】```javascript class Base {} class Good extends Base {} class AlsoGood extends Base { constructor() { return {a: 5}; } } class Bad extends Base { constructor() {} }

new Good(); new AlsoGood(); new Bad(); // ReferenceError

 |
| --- |

<a name="OpGfW"></a>
# 值
一、this是当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。<br />1、运行时对this求值：this的值是在代码运行时计算出来的，它取决于代码上下文。<br />三、this关键字的值

1. Global Code中this关键字为Global Object；
1. 函数调用时this关键字为调用者，例如obj1.fn1()，在fn1中this对象为obj1；
1. Eval Code中this关键字为当前执行上下文的Variable Object。

四、在函数调用时，JavaScript提供一个让用户自己指定this关键字值的机会，即每个函数都有的call、apply方法。

| 【示例】fn1.call(obj1, arg1, arg2, ...)或者fn1.apply(obj1, argArray)，都是将obj1作为this关键字，调用执行fn1函数，后面的参数都作为函数fn1的参数。<br />1、如果obj1为null或undefined，则Global Object将作为this关键字的值；如果obj1不是Object类型，则转化为Object类型。<br />2、它们之间的唯一区别在于，apply允许以数组的方式提供各个参数，而call方法必须一个一个参数的给。 |
| --- |

| 【示例】window对象并没有hasOwnProperty方法，使用Object.prototype.hasOwnProperty.call(window, "propertyName")也可以测试它是否拥有某个本地属性。 |
| --- |

二、this的值的情况：

- 函数调用模式
   - 默认地，指向全局变量window（严格模式下指向undefined）
   - 箭头函数：没有this。this与封闭词法环境的this保持一致。
- 间接调用模式（修改this的指向）
   - apply、call：apply、call调用时，指向传入的第一个参数
   - bind：this将永久地被绑定到了bind的第一个参数
- 方法调用模式：指向调用对象。如执行obj.b()，this指向obj
- 构造器调用模式：指向实例对象。如果手动地设置了返回对象，与this绑定的默认对象就会被丢弃。
- 类中的this：同普通函数一样，取决于如何被调用。如果要让类中的 this 值总是指向这个类实例，可在构造函数中绑定类方法
- 事件处理
   - 作为一个DOM事件处理函数：指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态地监听函数时不遵守这个规定）
   - 作为一个内联事件处理函数：指向监听器所在的DOM元素
| <br /> | 函数调用模式 |  | 间接调用模式 |  | 方法调用模式 | 构造器调用模式 | 类中的this | 事件处理 |  |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| <br /> | <br /> | 箭头函数 | apply、call | bind | <br /> | <br /> | <br /> | 作为一个DOM事件处理函数 | 作为一个内联事件处理函数 |
| 实参处理 | 参数表达式运行结果作为实参传递给函数形参 |  | call()方法使用它自有的实参列表作为函数的实参<br />apply()方法要求以数组的形式传入参数 |  | 与函数调用模式一致 | 一般情况，与函数调用模式一致<br />但如果构造参数没用形参，JavaScript构造函数调用语法是允许省略实参列表和圆括号的 |  |  |  |
| 调用上下文（this的值） | 默认地，指向全局变量window（严格模式下指向undefined） | 箭头函数：没有this。this与封闭词法环境的this保持一致。 | call()或apply()中的第一个参数 | this将永久地被绑定到了bind的第一个参数 | 指向调用对象。如执行obj.b()，this指向obj | 指向实例对象。如果手动地设置了返回对象，与this绑定的默认对象就会被丢弃。 | 同普通函数一样，取决于如何被调用。如果要让类中的 this 值总是指向这个类实例，可在构造函数中绑定类方法 | 指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态地监听函数时不遵守这个规定） | 指向监听器所在的DOM元素 |
| 返回值 | <br />1. 没有执行到return语句，返回undefined<br />1. 执行到retrun xxx语句，返回return之后的值<br />1. return后没有值，返回undefined<br /> |  |  |  | 与函数调用模式一致 | 构造函数通常不return关键字，返回值就是新对象<br />如果构造函数显式地使用return语句返回一个对象，那么调用表达式值就为这个对象。<br />如果构造函数使用return语句但没有指定返回值或者返回一个原始值，则忽略返回值，同时使用新对象作为调用结果。 |  |  |  |

<a name="xwAYU"></a>
## 函数调用模式
<a name="dzvgp"></a>
### 函数上下文中的 this
一、在没有对象的情况下调用：

- 非严格模式：this=全局对象浏览器中的window
- 严格模式：this == undefined
| 【示例】```javascript
// 对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。
var obj = { a: 'Custom' };

// 声明一个变量，并将该变量作为全局对象 window 的属性。
var a = 'Global';

function whatsThis() {
  return this.a;  // this 的值取决于函数被调用的方式
}

whatsThis();          // 非严格模式：默认为 全局/ window 对象

| | —- |

箭头函数

一、箭头函数没有this。在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中，它将被设置为全局对象：

| 【示例】```javascript va globalObject = this; var foo = (() => this); console.log(foo() === globalObject); // true

 |
| --- |

| 【示例】我们可以使用它在对象方法内部进行迭代：```javascript
let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],
  showList() {
    this.students.forEach(
          student => alert(this.title + ': ' + student)
      );
    }};
group.showList();

1、这里forEach中使用了箭头函数，所以其中的this.title其实和外部方法showList的完全一样。那就是：group.title。
2、如果我们使用正常的函数，则会出现错误：```javascript let group = { title: “Our Group”, students: [“John”, “Pete”, “Alice”], showList() { this.students.forEach(function(student) { // Error: Cannot read property ‘title’ of undefined alert(this.title + ‘: ‘ + student) }); } };

group.showList();

（1）报错是因为forEach运行它里面的这个函数，但是这个函数的this为默认值this=undefined，因此就出现了尝试访问undefined.title的情况。<br />（2）但箭头函数就没事，因为它们没有this。 |
| --- |

二、如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（thisArg）应该设置为null。

| 【示例】foo 的 this 被设置为他被创建时的环境，下面的例子中，是全局对象```javascript
// 接着上面的代码
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

| | —- |

三、在其他函数内创建的箭头函数：这些箭头函数的this被设置为封闭的词法环境的。

| 【示例】一个赋值给了 obj.bar的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因此，在 A 调用时，函数B的this被永久设置为obj.bar（函数A）的this。当返回的函数（函数B）被调用时，它this始终是最初设置的，也就是说函数B的this被设置为函数A的this，即obj，所以即使被调用的方式通常将其设置为 undefined 或全局对象（或者其他全局执行环境中的方法），它的 this 也仍然是 obj 。```javascript var obj1 = { bar: function() { var x = function() { return this; } return x; } }

// 创建一个含有bar方法的obj对象， // bar返回一个函数， // 这个函数返回this， // 这个返回的函数是以箭头函数创建的， // 所以它的this被永久绑定到了它外层函数的this。 // bar的值可以在调用中设置，这反过来又设置了返回函数的值。 var obj = { bar: function() { var x = (() => this); return x; } };

var fn1 = obj1.bar(); // 通常(即不使用箭头函数的情况)默认为全局对象 // 若在严格模式则为undefined console.log(fn1() === window); // true

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。 // 将返回的函数的引用赋值给fn。 var fn = obj.bar(); // 直接调用fn而不设置this console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法， // 而没有调用它 var fn2 = obj.bar; // 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。 console.log(fn2()() == window); // true

 |
| --- |

<a name="UHcoA"></a>
## 间接调用模式 / 修改this指向
call, apply, bind详解，【见装饰器模式和转发，call/apply】：[https://www.yuque.com/webfront/js/btx73p](https://www.yuque.com/webfront/js/btx73p)
<a name="eaPIm"></a>
### this 和对象转换
| 【示例】```javascript
function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16

// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [10, 20]); // 34

| | —- |

一、在非严格模式下使用 call 和 apply 时，如果用作 this 的值不是对象，则会被尝试转换为对象。null 和 undefined 被转换为全局对象。

| 【示例】原始值如 7 或 ‘foo’ 会使用相应构造函数转换为对象。因此 7 会被转换为 new Number(7) 生成的对象，字符串 ‘foo’ 会转换为 new String(‘foo’) 生成的对象。```javascript function bar() { console.log(Object.prototype.toString.call(this)); }

bar.call(7); // [object Number] bar.call(‘foo’); // [object String] bar.call(undefined); // [object global]

 |
| --- |

<a name="yYJeR"></a>
### bind方法
一、ECMAScript 5 引入了 Function.prototype.bind()。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

| 【示例】```javascript
function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = { a:37, f:f, g:g, h:h };
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

| | —- |

方法调用模式：作为对象的方法

一、当函数作为对象里的方法被调用时，this 被设置为调用该函数的对象，不会受函数定义方式或位置的影响。
二、this 的绑定只受最接近的成员引用的影响。

| 【示例】当 o.f() 被调用时，函数内的 this 将绑定到 o 对象。```javascript var o = { prop: 37, f: function() { return this.prop; } };

console.log(o.f()); // 37

1、也可以先定义函数，然后再将其附属到o.f。这样做的结果是一样的：```javascript
var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // 37

（1）这表明函数是从 o 的 f 成员调用的。
2、我们把一个方法g当作对象o.b的函数调用。在这次执行期间，函数中的this将指向o.b。事实证明，这与他是对象 o 的成员没有多大关系，最近的引用才是最重要的。```javascript o.b = {g: independent, prop: 42}; console.log(o.b.g()); // 42

 |
| --- |

<a name="k59U5"></a>
### 原型链中的 this
一、this不受原型的影响。如果该方法存在于一个对象的原型链上，那么 this 指向的是调用这个方法的对象，就像该方法就在这个对象上一样。

| 【示例】对象 p 没有属于它自己的 f 属性，它的 f 属性继承自它的原型。虽然最终是在 o 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，所以函数中的 this 指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是 JavaScript 的原型继承中的一个有趣的特性。```javascript
var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

| | —- |

二、我们可能有一个带有很多方法的大对象，并且还有从其继承的对象。当继承的对象运行继承的方法时，它们将仅修改自己的状态，而不会修改大对象的状态。
三、方法是共享的，但对象状态不是。

| 【示例】这里的animal代表“方法存储”，rabbit在使用其中的方法。调用rabbit.sleep()会在rabbit对象上设置this.isSleeping：``javascript // animal 有一些方法 let animal = { walk() { if (!this.isSleeping) { alert(I walk`); } }, sleep() { this.isSleeping = true; } };

let rabbit = { name: “White Rabbit”, proto: animal };

// 修改 rabbit.isSleeping rabbit.sleep();

alert(rabbit.isSleeping); // true alert(animal.isSleeping); // undefined（原型中没有此属性）

1、结果示意图：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/355497/1620722817913-da4ae318-5a81-4e13-890d-4520e9030118.png#clientId=u16e45873-8046-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=204&id=nLHgR&margin=%5Bobject%20Object%5D&name=image.png&originHeight=204&originWidth=224&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11369&status=done&style=none&taskId=u567b58a4-b207-4c05-8bc2-d84211a65b3&title=&width=224)<br />2、如果我们还有从animal继承的其他对象，像bird和snake等，它们也将可以访问animal的方法。但是，每个方法调用中的this都是在调用时（点符号前）评估的对应的对象，而不是animal。因此，当我们将数据写入this时，会将其存储到这些对象中。 |
| --- |

<a name="Iz2zP"></a>
### getter 与 setter 中的 this
一、相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

| 【示例】```javascript
function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6

| | —- |

构造器调用模式：作为构造函数

一、当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。
二、虽然构造函数返回的默认值是 this 所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 this 对象）。
1、在调用构造函数的过程中，如果手动的设置了返回对象，与this绑定的默认对象就会被丢弃。

| 【示例】函数C2，因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被丢弃了。（这基本上使得语句 “this.a = 37;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。```javascript /*

  • 构造函数这样工作: *
  • function MyConstructor(){
  • // 函数实体写在这里
  • // 根据需要在this上创建属性，然后赋值给它们，比如：
  • this.fum = “nom”;
  • // 等等… *
  • // 如果函数具有返回对象的return语句，
  • // 则该对象将是 new 表达式的结果。
  • // 否则，表达式的结果是当前绑定到 this 的对象。
  • //（即通常看到的常见情况）。
  • } */

function C(){ this.a = 37; }

var o = new C(); console.log(o.a); // 37

function C2(){ this.a = 37; return { a: 38 }; }

o = new C2(); console.log(o.a); // 38

function C3() { this.a = 39; return { b: 39 }; }

o = new C3(); console.log(o.a); // undefined

 |
| --- |

<a name="aZsdP"></a>
## 类中的this
一、和其他普通函数一样，方法中的 this 值取决于它们如何被调用。<br />1、如果要让类中的 this 值总是指向这个类实例，可在构造函数中绑定类方法

| 【示例】```javascript
class Car {
  constructor() {
    // Bind sayBye but not sayHi to show the difference
    this.sayBye = this.sayBye.bind(this);
  }
  sayHi() {
    console.log(`Hello from ${this.name}`);
  }
  sayBye() {
    console.log(`Bye from ${this.name}`);
  }
  get name() {
    return 'Ferrari';
  }
}

class Bird {
  get name() {
    return 'Tweety';
  }
}

const car = new Car();
const bird = new Bird();

// The value of 'this' in methods depends on their caller
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety

// For bound methods, 'this' doesn't depend on the caller
bird.sayBye = car.sayBye;
bird.sayBye();  // Bye from Ferrari

| | —- |

二、类内部总是严格模式。调用一个 this 值为 undefined 的方法会抛出错误。

事件处理

作为一个DOM事件处理函数

一、当函数被用作事件处理函数时，它的 this 指向触发事件的元素（一些浏览器在使用非 addEventListener 的函数动态地添加监听函数时不遵守这个约定）。

| 【示例】```javascript // 被调用时，将关联的元素变成蓝色 function bluify(e){ console.log(this === e.currentTarget); // 总是 true

// 当 currentTarget 和 target 是同一个对象时为 true console.log(this === e.target); this.style.backgroundColor = ‘#A5D9F3’; }

// 获取文档中的所有元素的列表 var elements = document.getElementsByTagName(‘*’);

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色 for(var i=0 ; i<elements.length ; i++){ elements[i].addEventListener(‘click’, bluify, false); }

 |
| --- |

<a name="Zrkos"></a>
### 作为一个内联事件处理函数
一、当代码被内联 on-event 处理函数 (en-US) 调用时，它的this指向监听器所在的DOM元素：

| 【示例】```javascript
<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

上面的 alert 会显示 button。注意只有外层代码中的 this 是这样设置的：```javascript

``` 在这种情况下，没有设置内部函数的 this，所以它指向 global/window 对象（即非严格模式下调用的函数未设置 this 时指向的默认对象）。 | | —- |

丢失”this”

见：函数绑定#丢失this：https://www.yuque.com/tqpuuk/yrrefz/qycrvp#tIu2e