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对象。