this 的工作原理

Salamander 發布于2019-08-21 10:20 / 387人閱讀

摘要：的工作原理有一套完全不同于其它語言的對的處理機制。全局范圍內當在全部范圍內使用，它將會指向全局對象。因此中的不會指向，因為只可能出現在上述的五種情況中。雖然的晚綁定特性似乎并不友好，但是這確實基于原型繼承賴以生存的土壤。

this 的工作原理

JavaScript 有一套完全不同于其它語言的對 this 的處理機制。
在五種不同的情況下，this 指向的各不相同。

全局范圍內

this;

當在全部范圍內使用 this，它將會指向全局對象。

譯者注：瀏覽器中運行的 JavaScript 腳本，這個全局對象是 window。

函數調用

foo();

這里 this 也會指向全局對象。

ES5 注意: 在嚴格模式下（strict mode），不存在全局變量。
這種情況下 this 將會是 undefined。

方法調用

test.foo();

這個例子中，this 指向 test 對象。

調用構造函數

new foo();

如果函數傾向于和 new 關鍵詞一塊使用，則我們稱這個函數是構造函數。
在函數內部，this 指向新創建的對象。

顯式的設置 this

function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 數組將會被擴展，如下所示
foo.call(bar, 1, 2, 3); // 傳遞到foo的參數是：a = 1, b = 2, c = 3

當使用 Function.prototype 上的 call 或者 apply 方法時，函數內的 this 將會被
顯式設置為函數調用的第一個參數。

因此函數調用的規則在上例中已經不適用了，在foo 函數內 this 被設置成了 bar。

  注意: 在對象的字面聲明語法中，this 不能用來指向對象本身。

  因此 var obj = {me: this} 中的 me 不會指向 obj，因為 this 只可能出現在上述的五種情況中。
譯者注：這個例子中，如果是在瀏覽器中運行，obj.me 等于 window 對象。

常見誤解

盡管大部分的情況都說的過去，不過第一個規則（譯者注：這里指的應該是第二個規則，也就是直接調用函數時，this 指向全局對象）
被認為是JavaScript語言另一個錯誤設計的地方，因為它從來就沒有實際的用途。

Foo.method = function() {
    function test() {
        // this 將會被設置為全局對象（譯者注：瀏覽器環境中也就是 window 對象）
    }
    test();
}

一個常見的誤解是 test 中的 this 將會指向 Foo 對象，實際上不是這樣子的。

為了在 test 中獲取對 Foo 對象的引用，我們需要在 method 函數內部創建一個局部變量指向 Foo 對象。

Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 來指向 Foo 對象
    }
    test();
}

that 只是我們隨意起的名字，不過這個名字被廣泛的用來指向外部的 this 對象。
在閉包一節，我們可以看到 that 可以作為參數傳遞。

方法的賦值表達式

另一個看起來奇怪的地方是函數別名，也就是將一個方法賦值給一個變量。

var test = someObject.methodTest;
test();

上例中，test 就像一個普通的函數被調用；因此，函數內的 this 將不再被指向到 someObject 對象。

雖然 this 的晚綁定特性似乎并不友好，但是這確實基于原型繼承賴以生存的土壤。

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

當 method 被調用時，this 將會指向 Bar 的實例對象。

GPU云服務器云服務器 cdn的工作原理 webrtc的工作原理 hashmap的工作原理工作流的主要原理

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

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

深入淺出，JS原型鏈的工作原理

摘要：前言原型鏈，即原型鏈條。原型的作用在中，每個對象都有自己的原型。訪問的屬性方法依舊不存在于該原型，則會繼續訪問該原型的原型前言：原型鏈，即原型鏈條。它是由原型、原型的原型、原型的原型的原型...這一規則組合成的，經常被應用于繼承。原型的作用在JS中，每個對象都有自己的原型。當我們訪問對象的屬性和方法時，JS會先訪問對象本身的屬性和方法。如果對象本身不包含這些屬性和方法，則訪問對象...

Ali_ 2019-08-23 13:52 評論0 收藏0
JavaScript是如何工作的：深入類和繼承內部原理+Babel和 TypeScript 之間轉換

摘要：下面是用實現轉成抽象語法樹如下還支持繼承以下是轉換結果最終的結果還是代碼，其中包含庫中的一些函數。可以使用新的易于使用的類定義，但是它仍然會創建構造函數和分配原型。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 15 篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是...

PrototypeZ 2019-08-23 14:54 評論0 收藏0
【譯】this 是什么？JavaScript 對象的內部工作原理

摘要：關鍵字會實例化一個新的對象實例，并在執行構造函數時將指向該實例。原文鏈接譯是什么對象的內部工作原理原文鏈接：What is this? The Inner Workings of JavaScript Objects (需要梯子) 原文作者：Eric Elliott 譯文永久鏈接：【譯】什么是 this？JavaScript 對象的內部工作原理譯者：士心翻譯目的：函數動...

Hwg 2019-08-23 17:06 評論0 收藏0
原理剖析（第 003 篇）ThreadPoolExecutor工作原理分析

摘要：原理剖析第篇工作原理分析一大致介紹相信大家都用過線程池，對該類應該一點都不陌生了我們之所以要用到線程池，線程池主要用來解決線程生命周期開銷問題和資源不足問題我們通過對多個任務重用線程以及控制線程池的數目可以有效防止資源不足的情況本章節就著原理剖析（第 003 篇）ThreadPoolExecutor工作原理分析 - 一、大致介紹 1、相信大家都用過線程池，對該類ThreadPoolE...

CatalpaFlat 2019-08-15 14:41 評論0 收藏0
原理剖析（第 010 篇）Netty之服務端啟動工作原理分析(上)

摘要：端引導類線程管理組線程管理組將設置到服務端引導類中指定通道類型為，一種異步模式，阻塞模式為設置讓服務器監聽某個端口已等待客戶端連接。原理剖析（第 010 篇）Netty之服務端啟動工作原理分析(上) - 一、大致介紹 1、Netty這個詞，對于熟悉并發的童鞋一點都不陌生，它是一個異步事件驅動型的網絡通信框架； 2、使用Netty不需要我們關注過多NIO的API操作，簡簡單單的使用即可...

coordinate35 2019-08-16 11:12 評論0 收藏0