大话javascript 6期：this深度解析

1、引言

在执行上下文的建立阶段，会分别生成变量对象，创建做用域链，肯定this指向。this的指向，是在函数被调用的时候肯定的。也就是执行上下文被建立时肯定的。所以，一个函数中的this指向，能够是很是灵活的

2、this对象的定义

this对象表明函数运行时，自动生成的一个内部对象，只能在函数内部使用
在全局执行环境中（在任何函数体外部）this 都指向全局对象。
在函数内部，this的值取决于函数被调用的方式。

关键点：

1. this永远指向一个对象，而且拥有着个对象的值
2. 在严格模式下，在全局做用域中和匿名函数中，this指向undefined
3. 当this在一个函数内出现的时候，this指向调用这个函数的对象

3、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);

若是你以为这篇文章对你有所帮助，那就顺便点个赞吧，点点关注不迷路~

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

前端哇发哈