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

    原文作者:兒獨
    原文地址: https://segmentfault.com/a/1190000014575047
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞