成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯]淺顯易懂的 this 取值規(guī)則

X_AirDu / 468人閱讀

摘要：遵循以下規(guī)則，按優(yōu)先級(jí)排列。換句話說，當(dāng)處于被調(diào)用函數(shù)的左邊，則就是左邊的對(duì)象。試一下通過兩種不同的方式調(diào)用函數(shù)時(shí)的值。找到應(yīng)用的規(guī)則很顯然應(yīng)用的是規(guī)則使用符號(hào)。在使用工具庫(kù)時(shí)發(fā)現(xiàn)取值不符合上述規(guī)則時(shí)，請(qǐng)查看庫(kù)文檔。

翻譯自文章The Simple Rules to ‘this’ in Javascript。

確定什么是 this 并非難事。總的來說，通過查找函數(shù)被調(diào)用時(shí)的位置（和方法）就可以決定。遵循以下規(guī)則，按優(yōu)先級(jí)排列。

規(guī)則

通過 new 關(guān)鍵字調(diào)用構(gòu)造函數(shù)，函數(shù)內(nèi)的 this 是一個(gè)全新的對(duì)象。

function ConstructorExample() {
    console.log(this);
    this.value = 10;
    console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

通過 apply 、 call 或 bind 調(diào)用一個(gè)函數(shù)，函數(shù)內(nèi)的 this 就是傳入的參數(shù)。

function fn() {
    console.log(this);
}
var obj = {
    value: 5
};
var boundFn = fn.bind(obj);
boundFn();     // -> { value: 5 }
fn.call(obj);  // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

如果一個(gè)函數(shù)作為對(duì)象的方法調(diào)用，即使用 . 符號(hào)調(diào)用該函數(shù)， this 是調(diào)用該函數(shù)的對(duì)象。換句話說，當(dāng) . 處于被調(diào)用函數(shù)的左邊，則 this 就是左邊的對(duì)象。

var obj = {
    value: 5,
    printThis: function() {
        console.log(this);
    }
};
obj.printThis(); // -> { value: 5, printThis: ? }

如果函數(shù)作為普通函數(shù)調(diào)用，意味著調(diào)用方式不符合以上任意一種， this 就是全局對(duì)象。在瀏覽器中就是 window 。

function fn() {
    console.log(this);
}
// If called in browser:
fn(); // -> Window {stop: ?, open: ?, alert: ?, ...}

*這個(gè)規(guī)則可以類比于規(guī)則3——不同之處在于這個(gè)函數(shù)自動(dòng)掛載到了 window 對(duì)象上，所以可以這么理解，當(dāng)我們調(diào)用 fn() 時(shí)其實(shí)調(diào)用的事 window.fn() ，所以 this 就是 window 。

console.log(fn === window.fn); // -> true

如果符合上述多個(gè)規(guī)則，則越前面的規(guī)則會(huì)決定 this 的值。

如果函數(shù)是一個(gè) ES2015 箭頭函數(shù)，會(huì)忽略上述所有規(guī)則， this 設(shè)置為它被創(chuàng)建時(shí)的上下文。為了找到 this 的值，需要找到函數(shù)被創(chuàng)建時(shí)的環(huán)境中 this 的值。

const obj = {
    value: "abc",
    createArrowFn: function() {
        return () => console.log(this);
    }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: "abc", createArrowFn: ? }

我們返回去看規(guī)則3，當(dāng)我們調(diào)用 obj.createArrowFn() 時(shí)， createArrowFn 中的 this 就是 obj 對(duì)象，我們用 . 符號(hào)調(diào)用。如果我們?cè)谌种袆?chuàng)建一個(gè)箭頭函數(shù)， this 就是 window 。

應(yīng)用規(guī)則

下面在幾個(gè)例子中應(yīng)用一下我們的規(guī)則。試一下通過兩種不同的方式調(diào)用函數(shù)時(shí) this 的值。

找到應(yīng)用的規(guī)則 
var obj = {
    value: "hi",
    printThis: function() {
        console.log(this);
    }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ?}
print(); // -> Window {stop: ?, open: ?, alert: ?, ...}

obj.printThis() 很顯然應(yīng)用的是規(guī)則3——使用 . 符號(hào)。 print() 應(yīng)用了規(guī)則4，在調(diào)用 print() 時(shí)，我們沒有使用 new 、 bind/call/apply 或 . 符號(hào)，所以這里的 this 是全局對(duì)象 window 。

多重規(guī)則應(yīng)用

如上文提到，當(dāng)應(yīng)用多個(gè)規(guī)則時(shí)，優(yōu)先應(yīng)用前面的規(guī)則。

var obj1 = {
    value: "hi",
    print: function() {
        console.log(this);
    },
};
var obj2 = { value: 17 };

如果規(guī)則2和3同時(shí)應(yīng)用，規(guī)則2優(yōu)先。

obj1.print.call(obj2); // -> { value: 17 }

如果規(guī)則1和3同時(shí)應(yīng)用，規(guī)則1優(yōu)先。

new obj1.print(); // -> {}
關(guān)于工具庫(kù)

一些 JavaScript 庫(kù)有時(shí)候會(huì)在函數(shù)中主動(dòng)綁定它認(rèn)為最有用的內(nèi)容到 this 上。比如在 JQuery中，在觸發(fā)事件時(shí) DOM 元素被綁定到了 this 上。在使用工具庫(kù)時(shí)發(fā)現(xiàn)取值不符合上述規(guī)則時(shí)，請(qǐng)查看庫(kù)文檔。很可能使用了 bind 語(yǔ)法。

該文章首發(fā)于我的個(gè)人站點(diǎn)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94366.html

相關(guān)文章

  • 譯-使用Scroll Snapping實(shí)現(xiàn)CSS控制頁(yè)面滾動(dòng)

    摘要：過去滾動(dòng)捕捉只能通過實(shí)現(xiàn)，但現(xiàn)在得益于新的滾動(dòng)捕捉模塊，這種效果已經(jīng)可以通過實(shí)現(xiàn)了。同時(shí)令人慶幸的是瀏覽器可以根據(jù)用戶的滾動(dòng)方式自動(dòng)控制并判斷是否利用捕捉點(diǎn)捕捉。 特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉(zhuǎn)載，煩請(qǐng)注明出處。 滾...

    lastSeries 評(píng)論0 收藏0

  • 譯-使用Scroll Snapping實(shí)現(xiàn)CSS控制頁(yè)面滾動(dòng)

    摘要：過去滾動(dòng)捕捉只能通過實(shí)現(xiàn)，但現(xiàn)在得益于新的滾動(dòng)捕捉模塊，這種效果已經(jīng)可以通過實(shí)現(xiàn)了。同時(shí)令人慶幸的是瀏覽器可以根據(jù)用戶的滾動(dòng)方式自動(dòng)控制并判斷是否利用捕捉點(diǎn)捕捉。 特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉(zhuǎn)載，煩請(qǐng)注明出處。 滾...

    Tychio 評(píng)論0 收藏0

  • PHPer書單

    摘要：想提升自己，還得多看書多看書多看書下面是我收集到的一些程序員應(yīng)該看得書單及在線教程，自己也沒有全部看完。共勉吧當(dāng)然，如果你有好的書想分享給大家的或者覺得書單不合理，可以去通過進(jìn)行提交。講師溫銘，軟件基金會(huì)主席，最佳實(shí)踐作者。 想提升自己，還得多看書！多看書！多看書！下面是我收集到的一些PHP程序員應(yīng)該看得書單及在線教程，自己也沒有全部看完。共勉吧！當(dāng)然，如果你有好的書想分享給大家的或者...

    jimhs 評(píng)論0 收藏0

  • [譯] 最深刻而易懂的ES6解構(gòu)教程

    摘要：被解構(gòu)的數(shù)據(jù)項(xiàng)位于賦值運(yùn)算符的右側(cè)，可以是任何數(shù)組和對(duì)象的組合，允許隨意嵌套。數(shù)組模式位于賦值運(yùn)算符的左側(cè)，被結(jié)構(gòu)的數(shù)組在其右側(cè)。 解構(gòu)是ES6的新特性，用于從JavaScript對(duì)象和數(shù)組中提取數(shù)據(jù)，語(yǔ)法上比ES5所提供的更加簡(jiǎn)潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會(huì)發(fā)現(xiàn)越多塑造數(shù)據(jù)和函數(shù)的方式，這些實(shí)現(xiàn)方式在過去幾乎是不可能的。本文將深...

    AlphaGooo 評(píng)論0 收藏0

  • 串口I2C通信詳解介紹（小白初學(xué)，淺顯易懂，基本知識(shí)）

    摘要：每個(gè)字節(jié)后必須跟一個(gè)響應(yīng)位。低速率一般是同一個(gè)板子上的兩個(gè)芯片間通信，數(shù)據(jù)量不大，速率低。速率幾百，速率可能不同，不能超過的最高速率。 介紹：I2C通訊協(xié)議(Inter－Integrated Circuit)引腳少，硬件實(shí)現(xiàn)簡(jiǎn)單，可擴(kuò)展性強(qiáng)，不需要USART、CAN等通訊協(xié)議的外部收發(fā)設(shè)備，...

    wua_wua2012 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<