对this的解读

全局对象：this指向他本身
函数的this：如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果该函数独立调用，那么该函数内部的this,则指向undefined.但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。

一、基础了解
this的指向，是在函数被调用的时候确定的。比如下面的例子中，同一个函数由于调用方式的不同，this指向了不一样的对象。

  var a = 10;
    var obj = {
        a: 20
    };

    function fn () {
        console.log(this.a);
    };

    fn(); // 10
    fn.call(obj); // 20

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

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

二、全局对象中的this

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

 // 通过this绑定到全局对象
    this.a2 = 20;

    // 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
    var a1 = 10;

    // 仅仅只有赋值操作，标识符会隐式绑定到全局对象
    a3 = 30;

    // 输出结果会全部符合预期
    console.log(a1);//10
    console.log(a2);//20
    console.log(a3);//30

三、函数中的this

先从下面的例子了解

  // demo01
    var a = 20;
    function fn() {
        console.log(this.a);
    }
    fn();//20


    // demo02
    var a = 20;
    function fn() {
        function foo() {
            console.log(this.a);
        }
        foo();
    }
    fn();//20


    // demo03
    var a = 20;
    var obj = {
        a: 10,
        c: this.a + 20,
        fn: function () {
            return this.a;
        }
    };

    console.log(obj.c);//40
    console.log(obj.fn());//10

可以分析出：如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的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对象。

但在demo03中，对象obj中的c属性使用this.a+20来计算，二它的调用者obj.c并非是一个函数，因此不适用上面的规则，需要单独讨论

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

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

'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()); // 运行会报错

下面是容易错误理解的栗子

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
console.log(foo.getA()); // 10
//test（）独立调用，非严格模式下，自动转向全局window
var test = foo.getA;
console.log(test());  // 20

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

修改后栗子如下

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

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

js中可以用call和apply自行手动设置this的指向，两个函数都拥有两个方法，除了参数略有不同，其功能完全一样。

• 第一个参数都是this所要指向的对象

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

function fn() {
    console.log(this.a);
}
var obj = {
    a: 20
}
//将this绑定为obj
fn.call(obj);//20

而call与apply后面的参数，都要向将要执行的函数传递参数。其中两个的不同之处是call以一个一个的形式传递，apply以数组的形式传递。

function fn(num1, num2) {
    console.log(this.a + num1 + num2);
}
var obj = {
    a: 20
}

fn.call(obj, 100, 10); // 130
fn.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指向。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }, 1000)
    }
}

obj.getA();

常规的解决办法很简单，就是使用一个变量，将this的引用保存起来。我们常常会用到这方法，但是我们也要借助上面讲到过的知识，来判断this是否在传递中被修改了，如果没有被修改，就没有必要这样使用了。

var obj = {
    a: 20,
    getA: function() {
        var self = this;
        setTimeout(function() {
            console.log(self.a)
        }, 1000)
    }
}

当然，也可以使用ES5中已经自带的bind方法。它与我上面封装的bind方法是一样的效果。

var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }.bind(this), 1000)
    }
}

五、构造函数与原型方法上的this

在封装对象的时候，我们几乎都会用到this，但是，只有少数人搞明白了在这个过程中的this指向，就算我们理解了原型，也不一定理解了this。所以这一部分，我认为将会为这篇文章最重要最核心的部分。理解了这里，将会对你学习JS面向对象产生巨大的帮助。

结合下面的例子，我在例子抛出几个问题大家思考一下。

function Person(name, age) {

    // 这里的this指向了谁?
    this.name = name;
    this.age = age;   
}

Person.prototype.getName = function() {

    // 这里的this又指向了谁？
    return this.name;
}

// 上面的2个this，是同一个吗，他们是否指向了原型对象？

var p1 = new Person('Nick', 20);
p1.getName();

我们已经知道，this，是在函数调用过程中确定，因此，搞明白new的过程中到底发生了什么就变得十分重要。

通过new操作符调用构造函数，会经历以下4个阶段。

• 创建一个新的对象；

• 将构造函数的this指向这个新对象；

• 指向构造函数的代码，为这个对象添加属性，方法等；

• 返回新对象。

因此，当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1接收。因此，我们可以说，这个时候，构造函数的this，指向了新的实例对象，p1。

而原型方法上的this就好理解多了，根据上边对函数中this的定义，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。

this绑定规则

• 默认绑定

  即独立函数绑定，在非严格模式下，this指向全局对象，严格模式下，this绑定在undefined

demo :

function foo(){
   console.log(this.a);
}
var a = 2;
foo();//2

foo()是直接使用不带任何修饰的函数进行调用，因此只能使用默认绑定

• 隐式绑定（作为对象方法调用）

需要考虑调用位置是否有上下文对象，在对象内部包含函数引用

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到上下文对象
demo：

function foo（）{
   console.log(this.a);
}
var obj2 = {
   a:42,
   foo:foo
};
var obj1 = {
   a:2,
   obj2:obj2
};
obj1.obj2.foo();//42

调用时只对对象属性引用链的上一层或者最后一层的调用位置起作用
* 显式绑定
在某个对象上强制调用函数，使用call（）或者apply（）方法

demo：

function foo（）{
  console.log(this.a);
}
var obj = {
   a:2
};
foo.apply(obj);

apply（）：改变函数调用对象，第一个参数表示改变后的调用这个函数的对象，（apply（）的参数为空时，默认调用全局对象），因此this指第一个参数。

• new绑定（作为构造函数调用）

通过这个函数生成一个新对象（object）,此时this就指向这个新对象

用new调用函数的步骤：
    *  创建或者构造一个全新的对象
    * 新对象执行[prototype]连接
    * 新对象绑定到函数调用的this
    *  如果函数没有返回其他对象，则new表达式中的函数调用会自动返回这个新对象

demo：

function foo(a){
   this.a = a;
}
var bar = new foo(2);
console.log(bar.a);

用new来调用foo时，会构造一个新对象，并把它绑定到foo（）调用的this中