一、弁言

在实行上下文的竖立阶段，会分别天生变量对象，竖立作用域链，肯定this指向。this的指向，是在函数被挪用的时刻肯定的。也就是实行上下文被竖立时肯定的。因而，一个函数中的this指向，能够是异常天真的

二、this对象的定义

this对象代表函数运转时，自动天生的一个内部对象，只能在函数内部运用
在全局实行环境中（在任何函数体外部）this 都指向全局对象。
在函数内部，this的值取决于函数被挪用的体式格局。

症结点：

1. this永远指向一个对象，而且拥有着个对象的值
2. 在严厉形式下，在全局作用域中和匿名函数中，this指向undefined
3. 当this在一个函数内涌现的时刻，this指向挪用这个函数的对象

三、this指向

全局环境

不管是不是在严厉形式下，在全局实行环境中（在任何函数体外部）this 都指向
全局对象。

// 在浏览器中, 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"

函数（运转）环境

在函数内部，this的值取决于函数被挪用的体式格局。

1.对象要领挪用形式

当函数作为对象里的要领被挪用时， this 指向
挪用该要领的对象

假如函数作为一个对象的属性要领，而且被挪用的时刻，那末这个属性要领中的this 就指向这个对象
下面的例子中，当 o.f()被挪用时，函数内的this将绑定到o对象。

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

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

请注重，如许的行动，基础不受函数定义体式格局或位置的影响。在前面的例子中，我们在定义对象o的同时，将函数内联定义为成员 f 。然则，我们也能够先定义函数，然后再将其隶属到o.f。如许做会致使雷同的行动：

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

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

这表明函数是从o的f成员挪用的才是重点。

一样，this 的绑定只受最靠近的成员援用的影响。鄙人面的这个例子中，我们把一个要领g看成对象o.b的函数挪用。在这次实行时期，函数中的this将指向o.b。事实证明，这与他是对象 o 的成员没有多大关联，最靠近的援用才是最主要的。

o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42

2.函数挪用形式

假如是一般函数挪用体式格局。非严厉形式下，
this指向
window，严厉形式下，
this是
undefined；

非严厉形式下，this 的值默许指向全局对象。在浏览器中，全局对象是window

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

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

在严厉形式下，this将坚持他进入实行环境时的值，所以下面的this将会默许为undefined。

function f2(){
  "use strict"; // 这里是严厉形式
  return this;
}

f2() === undefined; // true

所以，在严厉形式下，假如 this 没有被实行环境（execution context）定义，那它将坚持为 undefined。

3.组织函数挪用形式

假如是组织函数挪用体式格局，this指向实例化出来的新对象

/*
 * 组织函数如许事情:
 *
 * function MyConstructor(){
 *   // 函数实体写在这里
 *   // 依据需要在this上竖立属性，然后赋值给它们，比方：
 *   this.fum = "nom";
 *   // 等等...
 *
 *   // 假如函数具有返回对象的return语句，
 *   // 则该对象将是 new 表达式的效果。 
 *   // 不然，表达式的效果是当前绑定到 this 的对象。
 *   //（即一般看到的罕见状况）。
 * }
 */


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

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

虽然组织器返回的默许值是this所指的谁人对象，但它仍能够手动返回其他的对象（假如返回值不是一个对象，则返回this对象）。

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

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

在方才的例子中（C2），由于在挪用组织函数的历程当中，手动的设置了返回对象，与this绑定的默许对象被抛弃了。（这基本上使得语句 “this.a = 37;”成了“僵尸”代码，实际上并非真正的“僵尸”，这条语句实行了，然则关于外部没有任何影响，因而完全能够疏忽它）。

4.call / apply 挪用形式

call()、
apply()体式格局挪用，this指向
被绑定的对象；

假如要想把 this 的值从一个环境传到另一个，就要用 call 或许apply 要领。

// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // this的值取决于函数的挪用体式格局
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'

当一个函数在其主体中运用 this 症结字时，能够经由历程运用函数继续自Function.prototype 的 call 或 apply 要领将 this 值绑定到挪用中的特定对象。

function add(c, d) {
  return this.a + this.b + c + d;
}

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

// 第一个参数是作为‘this’运用的对象
// 后续参数作为参数通报给函数挪用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一个参数也是作为‘this’运用的对象
// 第二个参数是一个数组，数组里的元素用作函数挪用中的参数
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

运用 call 和 apply 函数的时刻要注重，假如通报给 this 的值不是一个对象，JavaScript 会尝试运用内部 ToObject 操纵将其转换为对象。因而，假如通报的值是一个原始值比方 7 或 ‘foo’，那末就会运用相干组织函数将它转换为对象，所以原始值 7 会被转换为对象，像 new Number(7) 如许，而字符串 ‘foo’ 转化成 new String(‘foo’) 如许，比方：

function bar() {
  console.log(Object.prototype.toString.call(this));
}

//原始值 7 被隐式转换为对象
bar.call(7); // [object Number]

5.bind要领挪用

bind()体式格局挪用，this指向
被绑定的对象；

ECMAScript 5 引入了 Function.prototype.bind。挪用f.bind(someObject)会竖立一个与f具有雷同函数体和作用域的函数，然则在这个新函数中，this将永远地被绑定到了bind的第一个参数，不管这个函数是怎样被挪用的。

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.f(), o.g(), o.h()); // 37, azerty, azerty

6.箭头函数

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

假如是箭头函数，是依据当前的词法作用域来决议this， 具体来说，箭头函数会继续外层函数挪用的this绑定。

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

注重：假如将this通报给call、bind、或许apply，它将被疏忽。不过你依然能够为挪用增加参数，不过第一个参数（thisArg）应当设置为null。

// 接着上面的代码
// 作为对象的一个要领挪用
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

不管怎样，foo 的 this 被设置为他被竖立时的环境（在上面的例子中，就是全局对象）。这一样实用于在其他函数内竖立的箭头函数：这些箭头函数的this被设置为关闭的词法环境的。

// 竖立一个含有bar要领的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数竖立的，
// 所以它的this被永远绑定到了它外层函数的this。
// bar的值能够在挪用中设置，这反过来又设置了返回函数的值。
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// 作为obj对象的一个要领来挪用bar，把它的this绑定到obj。
// 将返回的函数的援用赋值给fn。
var fn = obj.bar();

// 直接挪用fn而不设置this，
// 一般(即不运用箭头函数的状况)默许为全局对象
// 若在严厉形式则为undefined
console.log(fn() === obj); // true

// 然则注重，假如你只是援用obj的要领，
// 而没有挪用它
var fn2 = obj.bar;
// 那末挪用箭头函数后，this指向window，由于它从 bar 继续了this。
console.log(fn2()() == window); // true

在上面的例子中，一个赋值给了 obj.bar的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因而，在 A 挪用时，函数B的this被永远设置为obj.bar（函数A）的this。当返回的函数（函数B）被挪用时，它this始终是最初设置的。在上面的代码示例中，函数B的this被设置为函数A的this，即obj，所以纵然被挪用的体式格局一般将其设置为 undefined 或全局对象（或许如前面示例中的其他全局实行环境中的要领），它的 this 也依然是 obj 。

7.原型链的this

在对象原型链上某处定义的要领，
this指向的是
挪用这个要领的对象

关于在对象原型链上某处定义的要领，一样的观点也实用。假如该要领存在于一个对象的原型链上，那末this指向的是挪用这个要领的对象，就像该要领在对象上一样。

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

在这个例子中，对象p没有属于它自己的f属性，它的f属性继续自它的原型。虽然在对 f 的查找历程当中，最终是在 o 中找到 f 属性的，这并没有关联；查找历程首先从 p.f的援用最先，所以函数中的 this 指向p。也就是说，由于f是作为p的要领挪用的，所以它的this指向了p。这是 JavaScript 的原型继续中的一个风趣的特征。

8.getter 与 setter 中的 this

当函数在一个 getter 或许 setter 中被挪用。用作 getter 或 setter 的函数都会把
this

绑定到
设置或猎取属性的对象。

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

9.作为一个DOM事宜处置惩罚函数

当函数被用作事宜处置惩罚函数时，它的
this指向
触发事宜的元素（一些浏览器在运用非addEventListener的函数动态增加监听函数时不恪守这个商定）。

// 被挪用时，将关联的元素变成蓝色
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);
}

10.作为一个内联事宜处置惩罚函数

当代码被内联on-event 处置惩罚函数挪用时，它的
this指向
监听器地点的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

上面的 alert 会显现button。注重只要外层代码中的this是如许设置的：

<button onclick="alert((function(){return this})());">
  Show inner this
</button>

在这类状况下，没有设置内部函数的this，所以它指向 global/window 对象（即非严厉形式下挪用的函数未设置this时指向的默许对象）。

11.作为定时器的参数

作为定时器的参数时，
this 指向
window

setInterval(function() {
    console.log(this);
}, 1000);

假如你以为这篇文章对你有所协助，那就趁便点个赞吧，点点关注不迷路~

黑芝麻哇，白芝麻发，黑芝麻白芝麻哇发哈！

前端哇发哈