问题来源　

　　本文是基于廖雪峰老师JavaScript课程中的方法一节以及阮一峰老师JavaScript 的 this 原理

所记。

　　首先，我们了解一下JavaScript中的方法：在一个对象中绑定函数，称为这个对象的方法。下面，给对象xiaoming绑定一个函数：

var xiaoming = {

    name: '小明',

    birth: 1990,

    age: function () {

        var y = new Date().getFullYear();

        return y - this.birth;

    }

};

xiaoming.age;　　// function xiaoming.age()

xiaoming.age(); // 28

从这段代码中，可以看到使用了this关键字。

this的介绍

　　在一个方法中，this指向的就是该方法绑定的对象。其中 this.birth 就是指向对象 xiaoming 的 birth 属性。

对比出情形

　　通过拆分函数，对比上面的代码。从下面的结果看出，单独调用含有this关键字的函数，返回的是NaN。

function getAge() {

    var y = new Date().getFullYear();

    return y - this.birth;

}

var xiaoming = {

    name: '小明',

    birth: 1990,

    age: getAge

};

xiaoming.age(); // 28, 正常结果

getAge(); // NaN

你以为这就完了吗？下面这种写法，还是有错：

var fn = xiaoming.age; // 先拿到xiaoming的age函数

fn(); // NaN

原因是：在一个对象中调用含有this关键字的函数，此时this就是指向该对象；单独调用，例如上述的 getAge() ，此时this指向的就是全局对象: window 。所以，要保证this指向正确，必须用 obj.xxx() 的形式调用！至此，我们就了解了this问题的来源。由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误："Uncaught TypeError: Cannot read property 'birth' of undefined"。

'use strict';

var xiaoming = {

    name: '小明',

    birth: 1990,

    age: function () {

        var y = new Date().getFullYear();

        return y - this.birth;

    }

};

var fn = xiaoming.age;

fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

当你重构方法时：

'use strict';

var xiaoming = {

    name: '小明',

    birth: 1990,

    age: function () {

        function getAgeFromBirth() {

            var y = new Date().getFullYear();

            return y - this.birth;

        }

        return getAgeFromBirth();

    }

};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

　　下面，廖老师给出了修复方法，用一个that变量首先捕获this：

'use strict';

var xiaoming = {

    name: '小明',

    birth: 1990,

    age: function () {

        var that = this; // 在方法内部一开始就捕获this

        function getAgeFromBirth() {

            var y = new Date().getFullYear();

            return y - that.birth; // 用that而不是this

        }

        return getAgeFromBirth();

    }

};

xiaoming.age(); //

用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

　　下面还有一个问题来源，是阮一峰老师所写。下面写法一和写法二指向同一个函数，但是执行结果可能不一样。

var obj = {

  foo: function () {}

};

var foo = obj.foo;

// 写法一

obj.foo();

// 写法二

foo();

下面是结果不一样的例子：

var obj = {

  foo: function () { console.log(this.bar) },

  bar: 1

};

var foo = obj.foo;

var bar = 2;

obj.foo(); //

foo(); //

结果不一样的原因，很简单。就是 xiaoming 那个例子中的说明：如果在对象中使用this，其指向的就是对象。这里， obj.foo(); // foo运行在obj环境，所以this指向obj,也就是 obj.bar = 1 ； foo(); // 对于foo()来说，foo运行在全局环境，所以this指向全局环境，也就是 window.bar = 2 。所以，this出现问题的情形已经很清楚了，所处对象的原因。

深层原因

　　接下来，借阮一峰老师的解释，说明 JavaScript 这样处理的原理。

内存的数据结构

　　首先，给一段代码： var obj = { foo: 5 }; 这里的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。即变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

　　原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。注意，foo属性的值保存在属性描述对象的value属性里面。

{

  foo: {

    [[value]]: 5

    [[writable]]: true

    [[enumerable]]: true

    [[configurable]]: true

  }

}

　　但是，属性的值可能是一个函数： var obj = { foo: function () {} }; 。这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

{

  foo: {

    [[value]]: 函数的地址

    ...

  }

}

由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

var f = function () {};

var obj = { f: f };

// 单独执行

f();

// obj 环境执行

obj.f();

环境变量

　　JavaScript 允许在函数体内部，引用当前环境的其他变量。下面代码中，函数体里面使用了变量x。该变量由运行环境提供。

var f = function () {

  console.log(x);

};

函数可在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

var f = function () {

  console.log(this.x);

}

上面代码中，函数体里面的this.x就是指当前运行环境的x。

var f = function () {

  console.log(this.x);

};

var x = 1;

var obj = {

  f: f,

  x: 2,

};

// 单独执行

f() //

// obj 环境执行

obj.f() //

上面代码中，函数f()在全局环境执行，this.x指向全局环境window的x=1。但是在obj环境中，this就是指向obj中的x=2。

回答问题

　　obj.foo()是通过obj找到foo，所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数本身，所以foo()就变成在全局环境执行。

感谢

　　感谢两位老师的讲解！

巴特西

JavaScript方法中this关键字使用注意