JS中this的使用指南

首先來看兩個例子

var user='lilei'
function fn(){
    console.log(user);
    console.log(this.user);
}
fn();
console.log(this.user);

輸出結果

lilei
lilei
lilei

這個很好解釋，user定義的是全局變量，fn調用的時候，至關因而window.fn(),而this就是指向調用它的對象，也就是window，因此第二個console輸入的是lilei.而在最外層，this.user這裏面的this實際上是指向window的，因此也就至關於window.user，輸出lilei。

node中輸出

lilei
undefined
undefined

再看個例子

function fn(){
    var user='lilei'
    console.log(user);
    console.log(this.user);
}
fn();
console.log(this.user);

輸出結果

lilei
undefined
undefined

這裏面牽涉到局部變量和全局變量相同時，局部變量會覆蓋全局變量。因此第一個天然是lilei。此時函數內部的this調用指向window，而在全局變量中並未定義user，因此報undefined。而第三個和第二個是同樣的。

有一點須要明確的是，this在建立函數的內部是不知道到底指向誰，只有在調用的時候，方能決定！

var user='lihua'
function fn(){
    console.log(user);
    var user='lilei';
    console.log(this.user);
    this.user=123;
}
fn();
console.log(this.user);

輸出結果

undefined
lihua
123

第一個之因此打印undefined，是由於代碼處理分兩個階段，第一階段是變量，函數聲明，以及正常格式的參數建立，這是一個解析和進入上下文的階段。第二個階段是代碼執行，函數表達式和不合格的標識符（爲聲明的變量）被建立。因此fn就至關於

function fn(){
    var user；
    console.log(user);
    user='lilei';
    console.log(this.user);
    this.user=123;
}

打印undefined是天然而然的事情。第二個打印lihua，沒什麼解釋的。第三個是由於修改了this.user，因此會打印123。

也就是說，this指向的是最後調用他的對象。不過能夠經過call，apply，bind來改變this的指向。

那麼對於構造函數是如何指向的呢？

function Fn(){
    this.user = "lilei";
}
var a = new Fn();
console.log(a.user); //lilei

咱們發現這個this指向a，之因此指向a是由於new操做符，改變了this的指向。
那麼對於有返回值構造函數，this如何指定呢？

function Fn(){
    this.user = "lilei";
    return 1;
}
var a = new Fn();
console.log(a.user); //lilei

而

function Fn(){
    this.user = "lilei";
    return {user:'lihua'};
}
var a = new Fn();
console.log(a.user); //lihua

從上面，咱們能夠看出

return的是Object 這種狀況下，再也不返回this對象，而是返回return語句的返回值。a.user的時候那麼調用的{user:lihua}的值。

這種狀況咱們能夠這樣理解

function Fn(){
    this.user = "lilei";
    return 1;
}
var a = new Fn();
等價於
function Fn(){}
var a = new Object();
a.__proto__ = Fn.prototype;
Fn.call(a)

而

function Fn(){
    this.user = "lilei";
    return {user:'lihua'};
}
var a = new Fn();

等價於

function Fn(){}
var a = new Object();
a.__proto__ =  {user:'lihua'}.prototype;
{user:'lihua'}.call(a)

若是return的是五種簡單數據類型：String，Number，Boolean，Null，Undefined。這種狀況下，忽視return值，依然返回this對象。