JS中this的使用指南

lscho 發(fā)布于2019-08-22 16:42 / 3461人閱讀

摘要：那么對于有返回值構造函數(shù)，如何指定呢而從上面，我們可以看出的是這種情況下，不再返回對象，而是返回語句的返回值。

首先來看兩個例子

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。此時函數(shù)內(nèi)部的this調用指向window，而在全局變量中并未定義user，所以報undefined。而第三個和第二個是一樣的。

有一點需要明確的是，this在創(chuàng)建函數(shù)的內(nèi)部是不知道到底指向誰，只有在調用的時候，方能決定！

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，是因為代碼處理分兩個階段，第一階段是變量，函數(shù)聲明，以及正常格式的參數(shù)創(chuàng)建，這是一個解析和進入上下文的階段。第二個階段是代碼執(zhí)行，函數(shù)表達式和不合格的標識符（為聲明的變量）被創(chuàng)建。所以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的指向。

那么對于構造函數(shù)是如何指向的呢？

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

我們發(fā)現(xiàn)這個this指向a，之所以指向a是因為new操作符，改變了this的指向。
那么對于有返回值構造函數(shù)，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的是五種簡單數(shù)據(jù)類型：String，Number，Boolean，Null，Undefined。這種情況下，忽視return值，依然返回this對象。

云服務器 GPU云服務器 js里面的this java中this javascript中this詳解 js中使用數(shù)組

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94587.html

should.js源碼分析與學習

摘要：結構其中為整個項目入口，為中的類，負責對測試信息進行記錄。通過拋出錯誤而不是返回布爾值的方式來通知用戶，能夠更加明顯的通知用戶，也方便向上拋出異常進行傳遞。背景為了研究與學習某些測試框架的工作原理，同時也為了完成培訓中實現(xiàn)一個簡單的測試框架的原因，我對should.js的代碼進行了學習與分析，現(xiàn)在與大家來進行交流下。目錄 ext assertion.js assertion-e...

Turbo 2019-08-21 13:33 評論0 收藏0
使用 Vue.js 和 Chart.js 制作絢麗多彩的圖表

摘要：但是大多數(shù)開箱即用的解決方案用默認的選項并不能做出很絢麗的圖表。這篇文章中，我會教你如何自定義選項來制作很酷的圖表。我們使用來作為的打包器。代碼中，使用了一些實例數(shù)據(jù)和可選參數(shù)傳遞給的數(shù)據(jù)對象，并且設置，使得圖表會充滿外層容器。 showImg(https://segmentfault.com/img/remote/1460000009049816?w=1000&h=424); 本文...

劉厚水 2019-08-20 15:45 評論0 收藏0
一步一步開發(fā)安卓下的react-native應用系列之進階篇

摘要：首先我們打開命令行，切換到項目根目錄下，輸入安裝完成后，請注意，需要把目錄下的所有字體文件拷貝到目錄下，如果沒有該目錄，請自行創(chuàng)建。 ????????看過我前面文章的朋友們現(xiàn)在應該能正常運行自己的第一個RN應用了，那都是小兒科，現(xiàn)在我們來做點進階一點的東西。這篇文章有一些屬于干貨性的東西，請仔細閱讀。特別需要注意我加粗的部分。????????首先我們來看下js文件結構，在項目初始化成功...

xioqua 2019-06-26 17:14 評論0 收藏0
用100行代碼，完成自己的前端構建工具！

摘要：行代碼，你將擁有一個現(xiàn)代化規(guī)范測試驅動高延展性的前端構建工具。在閱讀前，給大家一個小懸念什么是鏈式操作中間件機制如何讀取構建文件樹如何實現(xiàn)批量模板渲染代碼轉譯如何實現(xiàn)中間件間數(shù)據(jù)共享。函數(shù)將參數(shù)中的掛載到上，并返回以便于鏈式操作即可。 ES2017+，你不再需要糾結于復雜的構建工具技術選型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的這些構建...

haitiancoder 2019-08-26 13:54 評論0 收藏0
js 中的 call apply ，試在vue中的使用

摘要：先引用一句基本都會引用的句子，但本次并不是介紹兩個方法的區(qū)別，而是嘗試在中進行使用。二應用在中在實例中的中定義了一個變量，在中打印出來同時調用中的方法。測試在中直接使用實踐證明也是可以打印出來的。注意：該方法的語法和作用與 apply() 方法類似，只有一個區(qū)別，就是 call() 方法接受的是一個參數(shù)列表，而 apply() 方法接受的是一個包含多個參數(shù)的數(shù)組。先引用一句基本都會...

why_rookie 2019-08-23 18:02 評論0 收藏0
深入 Parcel--架構與流程篇

摘要：本篇文章是對的源碼解析，代碼基本架構與執(zhí)行流程，帶你了解打包工具的內(nèi)部原理，在這之前你如果對不熟悉可以先到官網(wǎng)了解介紹下面是偷懶從官網(wǎng)抄下來的介紹極速零配置應用打包工具極速打包使用進程去啟用多核編譯。 showImg(https://segmentfault.com/img/bVbpZRp?w=1241&h=893); 本篇文章是對 Parce 的源碼解析，代碼基本架構與執(zhí)行流程，帶你...

yuxue 2019-08-23 16:00 評論0 收藏0