摘要：的構造函數等同于下。創建一個新的對象將構造函數的指向這個新對象指向構造函數的代碼，為這個對象添加屬性，方法等返回新對象。

原文鏈接 - http://www.jianshu.com/p/d647aa6d1ae6

首先，了解下執行上下文的生命周期。

在執行上下文的創建階段，會分別生成變量對象，建立作用域鏈，以及確定this指向。
其中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
}

function fn () {
    this = obj; // 這句話試圖修改this，運行后會報錯
    console.log(this.a);
}

fn();

關于全局對象的this，是一個比較特殊的存在。全局環境中的this，指向window本身。因此，這也相對簡單，沒有那么多復雜的情況需要考慮。

// 通過this綁定到全局對象
this.a2 = 20;

// 通過聲明綁定到變量對象，但在全局環境中，變量對象就是它自身
var a1 = 10;

// 僅僅只有賦值操作，標識符會隱式綁定到全局對象
a3 = 30;

// 輸出結果會全部符合預期
console.log(a1, a2, a3);
console.log(window.a1, window.a2, window.a3);

在總結函數中this指向之前，我想我們有必要通過一些奇怪的例子，來感受一下函數中this的捉摸不定。

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

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

// demo03
var 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指向，找到函數的調用者以及區分他是否是獨立調用就變得十分關鍵。

// 為了能夠準確判斷，我們在這里使用嚴格模式，因為非嚴格模式會自動指向全局
"use strict";
function fn() {
    console.log(this);
}

fn();  // fn是調用者，獨立調用，undefined
window.fn();  // fn是調用者，被window所擁有，window

但是需要特別注意的是，在上面的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()); // error

實際開發中，并不推薦這樣使用this

再來看一些容易理解錯誤的例子，加深一下對調用者與是否獨立運行的理解。

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

var 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

function foo() {
    console.log(this.a)
}
function active(fn) {
    fn(); // 真實調用者，為獨立調用
}
var a = 20;
var obj = {
    a: 10,
    getA: foo
}
active(obj.getA);

JavaScript內部提供了一種機制，讓我們可以自行手動設置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與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的存在，這讓JavaScript變得十分靈活。因此就讓call / apply擁有了很多有用處的場景。簡單總結幾點，也歡迎大家補充。
1.將類數組對象轉換為數組

function exam(a, b, c, d, e) {
    console.log(arguments); // { "0": 2, "1": 8, "2": 9, "3": 10, "4": 3 }
    var arg = [].slice.call(arguments);
    console.log(arg); // [ 2, 8, 9, 10, 3 ]
}
exam(2, 8, 9, 10, 3);

// 也常常使用該方法將DOM中的nodelist轉換為數組
// [].slice.call( document.getElementsByTagName("li") );

2.根據自己的需要靈活修改this指向

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

3.實現繼承

// 定義父級的構造函數
var Person = function(name, age) {
    this.name = name;
    this.age  = age;
    this.gender = ["man", "woman"];
}
// 定義子類的構造函數
var Student = function(name, age, high) {
    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("xiaoming", 12, "150cm").message(); // { 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;
}

4、在向其他執行上下文的傳遞中，確保this的指向保持不變

如下面的例子中，我們期待的是getA被obj調用時，this指向obj，但是由于匿名函數的存在導致了this指向的丟失，在這個匿名函數中this指向了全局，因此我們需要想一些辦法找回正確的this指向。

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

常規的解決辦法很簡單，就是使用一個變量，將this的引用保存起來。我們常常會用到這方法，但是我們也要借助上面講到過的知識，來判斷this是否在傳遞中被修改了，如果沒有被修改，就沒有必要這樣使用了。

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

另外就是借助閉包與apply方法，封裝一個bind方法。

function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}
var obj = {
    a: 20,
    getA: function() {
        setTimeout(bind(function() {
            console.log(this.a)
        }, this), 1000)
    }
}
obj.getA(); // 20

當然，也可以使用ES5中已經自帶的bind方法。它與上面封裝的bind方法是一樣的效果。

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

在封裝對象的時候，我們幾乎都會用到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。