国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[JavaScript 隨筆] 關于 this 你必須知道這幾點

鄒強 / 875人閱讀

摘要:關于中的坑大家都踩過。那這里的和是嚴格相等的。這里介紹的是通過創建對象時的。提示一下,數組對象的函數本身就是有這個功能的,也就是說可以達到要求。事件有兩種記法,一個是也是類似,那么在中出現的表示觸發該事件的元素,也就是。

TL;DR: this 指向調用該方法的對象,只有函數執行時,this 才有定義。

關于 JavaScript 中 this 的坑大家都踩過。像本文開頭的這句話,道理你都懂,但是……所以這里就總結了幾個 this 最常用的使用場景。

全局環境

在瀏覽器的全局環境中,this === window 。
但是,當使用了 "use strict"; 進入嚴格模式時,this === undefined 。

如果是在 nodejs 環境中,全局對象會更復雜一些,因為它有兩種執行方式。一個是命令行方式,即輸入

$ node

進入類似于瀏覽器的控制臺一樣的界面,可以逐行執行代碼。那這里的 this 和 global 是嚴格相等的。但如果是

$ node program.js

這樣執行一個文件的話,nodejs 會為每個文件創建一個自執行匿名函數的塊,這里面的 this 并是全局對象 global 。但是,如果聲明變量時沒有加 var 的話,這些變量還是會加到 global 上去。

函數調用

函數中的 this 可能更常見一點吧。

function foo() {
  console.log(this.name);
}

如果直接判斷這里的 this 是全局對象的話,就太沖動了(還記得最開始這句話嗎?只有當函數調用時才能判斷 this 真正引用的對象是什么)。

如果它作為一個全局函數【foo()】,或者閉包【return foo;】,又或者是回調函數【other(foo)】的話,那么它在執行時就是全局對象了。

還有三個我們經常遇到的方法可以改變 this 的引用,就是 call、apply 和 bind 。

foo.call(thisArg);

那么這里的 this 就指向了 thisArg,但當它為 null 或者 undefined,this 會指向全局對象。

還有一種函數調用是使用 new 關鍵字。

new foo();

這里的 this 指向的是構造出來的新對象。

那么其他情況就必然是 x.foo() 類似的調用方式了,看到這條語句的時候再去看 foo 的定義,它里面 this 引用的就是對象 x 。
數學學得好的話,可以反應過來 x 可以表示任何對象,比如 a,a.b,或者其他更復雜的表達式。

好,來測試一下,有如下代碼

var o = {
  foo: function() { return this; }
};

function bar() {
  return o.foo;
}

console.log(bar()());

結果是什么?反正就兩個選擇,一是 this 指向全局對象,二是指向 o 。

原型

在上一篇文章 《繼承的實現方式及原型概述》 中其實有提到過一部分原型方面的知識,那這里就稍微深入一點。

這里介紹的是通過 new 創建對象時的 this 。每個函數對象(用 function 關鍵字修飾的變量)自帶 prototype 屬性,在 prototype 上定義的屬性都會繼承給 this 。這些屬性被每個實例共享,實例中會創建所有 prototype 上的屬性,值為這些屬性的引用。

文字一多心里難免煩煩的……

首先,這里通過 new 創建了兩個實例,它們有相同的 prototype 。原型中的數據是創建在堆上的,所以繼承下來的屬性和方法都會指向同一個引用(左邊的箭頭)。

然后,在 this 上定義的屬性和方法是創建在棧上的,所以這些屬性和方法會有各自獨立的內存區域(右邊的箭頭)。

假如在 this 上定義的變量與 prototype 上沖突了,那么 prototype 中的那個變量會“隱藏”起來。

如果有 child.foo = "tom"; 那么思考一下怎樣才能讓 child.foo 重新獲得 prototype 中的 foo 值?

一種是可以直接 Parent.prototype.foo 就完事了。另外一種可以通過

delete child.foo; 
console.log(child.foo); // 重新獲得 prototype 中的 foo 值

前者的缺點在于,假設 foo 是個函數的話,那么 Parent.prototype.foo() 時,其中的 this 指向的是 Parent.prototype,而不是 child 實例。

很多道理都很簡單,那么再來考一下……

var slice = ___?

slice({"0": "a", "1": "b", "length": 2}) => ["a", "b"]

簡單來說就是用一個表達式定義一個變量(函數),它可以將類數組對象(比如說 arguments)轉化成數組。提示一下,數組對象的 slice 函數本身就是有這個功能的,也就是說 Array.prototype.slice.call(arguments) 可以達到要求。

DOM 事件

聽說長篇大論不會受歡迎,但是我仔細想想還是得把這部分寫下來。

事件有兩種記法,一個是

el.addEventListener("event", handler);

attachEvent 也是類似,那么在 handler 中出現的 this 表示觸發該事件的元素,也就是 el 。

另一種是

el.onevent = handler;

同樣,handler 中的 this 還是 el 。

最后一個題……

var o = {
  foo: function() { return this; }
}

document.onload = o.foo;

請問,當 load 事件觸發時,這里的 this 是什么?三個選擇:o, window, document.

小結

從這里開始是“廣告”時間了……

其實 this 的討論可以展開很多,可能上面記的內容中有很多欠缺的地方,這個希望大家可以指正。

那我們的知識庫總是會隨著學習和努力慢慢擴大的,個人能力是一方面,花的精力是另一方面。只要肯靜下心去琢磨,很多“網上各種人說這個難那個難”的知識(比如說閉包、原型,或者和知識面廣度有關的,比如說數組中 slice 的高級用法等),花點時間總會搞懂的。

所以學習沒有捷徑,也沒有培訓班,有心就可以了。

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

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

相關文章

  • 繼承的實現方式及原型概述 | JavaScript 隨筆

    摘要:每一個對象直接量都是的子類,即構造函數中的構造函數與普通函數并沒有什么兩樣,只不過在調用時,前面加上了關鍵字,就當成是構造函數了。由于沒有傳入變量,在調用的構造函數時,會出錯這個問題可以通過一個空對象來解決改自。 showImg(https://segmentfault.com/img/bVmNZj); 對于 OO 語言,有一句話叫Everything is object,雖然 Ja...

    chenjiang3 評論0 收藏0
  • [JavaScript 隨筆] 理解嚴格相等、非嚴格相等和隱式類型轉換

    摘要:顯然,相等判斷是基于數字比較的,而條件判斷是基于布爾值。嚴格相等嚴格相等的邏輯相對簡單粗暴,如果類型不同,就不考慮隱式轉換了,直接為假。 JavaScript 中大概有這幾種 類型: undefined null string boolean number object function 之所以在 類型 上加了雙引號,是因為嚴格來說,null 的類型是 object。但本文討論的主...

    rickchen 評論0 收藏0
  • 一個JAVA WEB偽全棧的VUE入坑隨筆:從登錄開始(VUEX)

    摘要:此文章用于記錄本人學習歷程,有共同愛好者可加好友一起分享。從上周天,由于本周有公司籃球比賽,所以耽誤兩天晚上,耗時三個晚上勉強做了一個登錄功能。這里的用戶信息和登錄狀態都是直接取的中的用戶信息進行屬性值初始化。 此文章用于記錄本人VUE學習歷程,有共同愛好者可加好友一起分享。從上周天,由于本周有公司籃球比賽,所以耽誤兩天晚上,耗時三個晚上勉強做了一個登錄功能。中間的曲折只有自己知道,有...

    Zack 評論0 收藏0
  • [譯]JSX:硬幣的另一面

    摘要:它不過是硬幣的另一面。因此,既然我們能夠接受與通過這種方式混合在一塊兒,那么是時候讓介入并向我們展示硬幣的另一面了第三階段的并不是一個激進的改變,是因為我們這個行業從一開始就注定和應該是在一起的。 React框架剛剛發布的時候,JSX顛覆了很多人的想法。習慣了HTML標簽與JavaScript代碼分離的前端工程師們,看到JSX大概都會不禁吐槽:這些奇怪的標簽出現在JavaScript里...

    mudiyouyou 評論0 收藏0
  • 前端文檔收集

    摘要:系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術點 常用meta整理 網頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<