对this的解读

一、基础解读

this的指向，是在函数被调用的时候确定的。

举个栗子，同一个函数由于调用方式的不同，this指向了不一样的对象。

var a = 10;var obj = {    a: 20}function fn () {    console.log(this.a);}fn(); // 10fn.call(obj); // 20

在函数执行过程中，this一旦被确定，就不可更改了。

var a = 10;var obj = {    a: 20}function fn () {    this = obj; // 这句话试图修改this，运行后会报错    console.log(this.a);}fn();

二、全局对象中的this

全局环境中的this，指向它本身。

// 通过this绑定到全局对象this.a2 = 20;// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身var a1 = 10;// 仅仅只有赋值操作，标识符会隐式绑定到全局对象a3 = 30;// 输出结果会全部符合预期console.log(a1);console.log(a2);console.log(a3);

三、函数中的this

先举个栗子

// demo01var a = 20;function fn() {    console.log(this.a);}fn();// demo02var a = 20;function fn() {    function foo() {        console.log(this.a);    }    foo();}fn();// demo03var a = 20;var obj = {    a: 10,    c: this.a + 20,    fn: function () {        return this.a;    }}console.log(obj.c);console.log(obj.fn());

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

想要准确确定this指向，找到函数的调用者以及区分他是否是独立调用就变得十分关键。

// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局function fn() {    'use strict';    console.log(this);}fn();  // fn是调用者，独立调用window.fn();  // fn是调用者，被window所拥有

上面的栗子中，fn()作为独立调用者，按照定义的理解，它内部的this指向就为undefined。而window.fn()则因为fn被window所拥有，内部的this就指向了window对象。

那么掌握了这个规则，现在回过头去看看上面的三个例子，通过添加/去除严格模式，那么你就会发现，原来this已经变得不那么虚无缥缈，已经有迹可循了。

但是我们需要特别注意的是demo03。在demo03中，对象obj中的c属性使用this.a + 20来计算，而他的调用者obj.c并非是一个函数。因此他不适用于上面的规则，我们要对这种方式单独下一个结论。

当obj在全局声明时，无论obj.c在什么地方调用，这里的this都指向全局对象，而当obj在函数环境中声明时，这个this指向undefined，在非严格模式下，会自动转向全局对象。可运行下面的例子查看区别。

'use strict';var a = 20;function foo () {    var a = 1;    var obj = {        a: 10,         c: this.a + 20,        fn: function () {            return this.a;        }    }    return obj.c;}console.log(foo()); // 运行会报错

实际开发中，并不推荐这样使用this；

var a = 20;var foo = {    a: 10,    getA: function () {        return this.a;    }}console.log(foo.getA()); // 10var test = foo.getA;console.log(test());  // 20

foo.getA()中，getA是调用者，他不是独立调用，被对象foo所拥有，因此它的this指向了foo。而test()作为调用者，尽管他与foo.getA的引用相同，但是它是独立调用的，因此this指向undefined，在非严格模式，自动转向全局window。

稍微修改一下代码，大家自行理解。

var a = 20;function getA() {    return this.a;}var foo = {    a: 10,    getA: getA}console.log(foo.getA());  // 10

四、使用call，apply显示指定this

avaScript内部提供了一种机制，让我们可以自行手动设置this的指向。它们就是call与apply。所有的函数都具有着两个方法。它们除了参数略有不同，其功能完全一样。它们的第一个参数都为this将要指向的对象。

如下例子所示。fn并非属于对象obj的方法，但是通过call，我们将fn内部的this绑定为obj，因此就可以使用this.a访问obj的a属性了。这就是call/apply的用法。

function fn() {    console.log(this.a);}var obj = {    a: 20}fn.call(obj);

而call与applay后面的参数，都是向将要执行的函数传递参数。其中call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同。

function fn(num1, num2) {    console.log(this.a + num1 + num2);}var obj = {    a: 20}fn.call(obj, 100, 10); // 130fn.apply(obj, [20, 10]); // 50

五、call/apply的场景。

• 将类数组对象转换为数组

function exam(a, b, c, d, e) {    // 先看看函数的自带属性 arguments 什么是样子的    console.log(arguments);    // 使用call/apply将arguments转换为数组, 返回结果为数组，arguments自身不会改变    var arg = [].slice.call(arguments);    console.log(arg);}exam(2, 8, 9, 10, 3);// result: // { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }// [ 2, 8, 9, 10, 3 ]// // 也常常使用该方法将DOM中的nodelist转换为数组// [].slice.call( document.getElementsByTagName('li') );

• 根据自己的需要灵活修改this指向

var foo = {    name: 'joker',    showName: function() {      console.log(this.name);    }}var bar = {    name: 'rose'}foo.showName.call(bar);

• 实现继承

// 定义父级的构造函数var Person = function(name, age) {    this.name = name;    this.age  = age;    this.gender = ['man', 'woman'];}// 定义子类的构造函数var Student = function(name, age, high) {    // use call    Person.call(this, name, age);    this.high = high;}Student.prototype.message = function() {    console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');}new Student('xiaom', 12, '150cm').message();// result// ----------// name:xiaom, age:12, high:150cm, gender:man;

在Student的构造函数中，借助call方法，将父级的构造函数执行了一次，相当于将Person中的代码，在Sudent中复制了一份，其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确，因此就相当于实现了基层。Student的构造函数等同于下。

var Student = function(name, age, high) {    this.name = name;    this.age  = age;    this.gender = ['man', 'woman'];    // Person.call(this, name, age); 这一句话，相当于上面三句话，因此实现了继承    this.high = high;}

• 在向其他执行上下文的传递中，确保this的指向保持不变

getA被obj调用时，this指向obj，但是由于匿名函数的存在导致了this指向的丢失，在这个匿名函数中this指向了全局，因此我们需要想一些办法找回正确的this指向。

这里写代码片