JavaScript中的this（你不知道的JavaScript）

JavaScript中的this，剛接觸JavaScript時大家都在大肆渲染說其多麼多麼的靈巧重要，然而自己並不關心；隨著自己對JavaScript一步步深入瞭解，突然恍然大悟，原來它真的很重要！所以，自己花費了大約2周的時間去查貼、翻閱之前讀的書籍，將this的全貌展示如下。

一、this是什麼--基於呼叫位置的上下文；呼叫位置不同，this值不同。

大家都JavaScript中this存在兩個誤解：
（1）this指向函式自身
（2）this指向函式的作用域

作用域無法通過JavaScript程式碼訪問，它存在於JavaScript引擎內部。每當把this和詞法作用域的查詢混合使用時，一定要提醒自己，這是無法實現的！

this是在執行時進行繫結的，並不是在編寫時繫結，它的上下文取決於函式呼叫時的各種條件。this的繫結和函式宣告的位置沒有任何關係，只取決於函式的呼叫位置（也就是函式的呼叫方式）！

示例：
[javascript] view plain copy

var foo = "golbal foo";
var myObj = {foo : 'myObj foo'};
var say = function(){
console.log(this.foo);
}
myObj.say = say;
myObj.say(); //結果：myObj foo
say(); //結果：golbal foo

二、為什麼使用this

[javascript] view plain copy

var me = {
name: "fenfei"
};
//不使用this，呼叫
function speak(name){
console.log("Hello, I'm "+ name);
}
speak(me.name); //Hello, I'm fenfei
//使用this，呼叫
function speak(){
console.log("Hello, I'm "

+ this.name);
}
speak.call(me); //Hello, I'm fenfei

this提供了一種更優雅的方式來隱式“傳遞”物件引用，因此可以將API設計得更加簡潔並易於複用。

三. this的四大繫結規則

1. 預設繫結--函式呼叫型別：獨立函式呼叫，this指向全域性物件。

[javascript] view plain copy

var a = "foo";
function foo(){
console.log(this.a);
}
foo(); // "foo"

在嚴格模式下，全域性物件將無法使用預設繫結，因此this會繫結到undefined。

[javascript] view plain copy

var a = "foo";
function foo(){
"use strict";
console.log(this.a);
}
foo(); // TypeError：this is undefined

2. 隱式繫結--呼叫位置是否有上下文物件，或者說被某個物件擁有或者包含

[javascript] view plain copy

function foo(){
console.log(this.a);
}
var obj1 = {
a : 2,
foo : foo
}
var obj2 = {
a : 1,
obj1 : obj1
}
obj2.obj1.foo(); //結果：2

當foo()被呼叫時，它的落腳點指向obj1物件，隱式繫結規則會把函式呼叫中的this繫結到這個上下文物件。
物件屬性引用鏈中只有最頂層或者說最後一次層會影響呼叫位置。

注意：隱式丟失

常見的this繫結問題就是“隱式繫結”的函式會丟失繫結物件，也就是“預設繫結”，從而把this繫結到全域性物件（嚴格模式下為undefined）。

[javascript] view plain copy

var a = "foo";
function foo(){
console.log(this.a);
}
var obj = {
a : 2,
foo : foo
}
var bar = obj.foo;
bar(); //"foo"

雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函式本身，因此此時的bar()其實是不帶任何修飾的函式呼叫，因此應用了預設繫結。

[javascript] view plain copy

var a = "foo";
function foo(){
console.log(this.a);
}
function doFoo(fn){ //var fn = obj.foo
fn();
}
var obj = {
a : 2,
foo : foo
}
doFoo(obj.foo); //"foo"
setTimeout(obj.foo, 100); //"foo"

引數傳遞其實就是一種隱式賦值，因此傳入函式式會被隱式賦值（LHS）

3. 顯示繫結

（1）call、apply
（2）硬繫結
[javascript] view plain copy

function foo(){
console.log(this.a);
}
var obj = { a:2 };
var bar = function(){
相關推薦

JavaScript中的this（你不知道的JavaScript）

JavaScript中的this，剛接觸JavaScript時大家都在大肆渲染說其多麼多麼的靈巧重要，然而自己並不關心；隨著自己對JavaScript一步步深入瞭解，突然恍然大悟，原來它真的很重要！所以，自己花費了大約2周的時間去查貼、翻閱之前讀的書籍，將th

JavaScript提升（你不知道的JavaScript）

最近，在讀《你不知道的JavaScript（上卷）》這本書，書中詳細闡述了JavaScript眾多重要但經常被大家忽略的點，在此強烈推薦！！！書中，第4章講述了“提升”，從示例出發講述了變數和函式提升的

JavaScript中Array方法你該知道的正確開啟方法

前言在過去的幾個月，我發現我的拉取請求中存在四個完全相同的 JavaScript 錯誤。於是我寫了這篇文章，總結了如何在 JavaScript 中正確使用地使用 Array 的方法！ Array物件為JavaScript內建物件，具有以下屬性：用 Array.includes 代替 Ar

安卓中讀取xml的幾種方法（有你不知道的）

1.src目錄下，用反射機制載入：Thread.currentThread().getContextClassLoader().getResourceAsStream("xxoo.xml")，以流的方式返回 2.Assest目錄下：Activity.this.getAsse

Chrome除錯（你不知道的chrome）

1,在控制檯除錯程式碼儲存到本地；開啟Source面板，有一個Filesystem按鈕，下面有一個Add folder to workspace,將資料夾新增到這裡，然後在瀏覽器除錯的程式碼（如新增css樣式）會儲存到原始檔中。 2.Network面板

4種獲取前臺應用的方法（肯定有你不知道的）

我目前已知，並且嘗試過的獲取當前前臺應用的方法有如下幾種： Android5.0以前，使用ActivityManager的getRunningTasks()方法，可以得到應用包名和Activity； Android5.0以後，通過使用量統計功能來實現，只能得

JavaScript中的this—你不知道的JavaScript上卷讀書筆記（三）

情況下修改位置必須細節 fin 有關 zed 重要 this是什麽？ this 是在運行時進行綁定的，並不是在編寫時綁定，它的上下文取決於函數調用時的各種條件。this 的綁定和函數聲明的位置沒有任何關系，只取決於函數的調用方式。當一個函數被調用時，會創建一個活動記

你不知道的javascript（中卷）筆記

沒有 light char 布爾值都是 sin 執行 new 內容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>你不

《你不知道的 JavaScript（上中下卷）》pdf附網盤下載連結+（附一個菜鳥的java學習之路）

技術書閱讀方法論一.速讀一遍（最好在1~2天內完成）人的大腦記憶力有限，在一天內快速看完一本書會在大腦裡留下深刻印象，對於之後複習以及總結都會有特別好的作用。對於每一章的知識，先閱讀標題，弄懂大概講的是什麼主題，再去快速看一遍，不懂也沒有關係，但是一定要在不懂的

你不知道的JavaScript（上）this和物件原型（四）原型

五章原型 1、[[ Prototype ]] JavaScript 中的物件有一個特殊的 [[Prototype]] 內建屬性，其實就是對於其他物件的引用。幾乎所有的物件在建立時 [[Prototype]] 屬性都會被賦予一個非空的值。對於預設的 [[Get]] 操作來說，如果無法在

你不知道的JavaScript（中）讀書筆記（一）

第一章 1、內建型別 JavaScript有七種內建型別【除了物件以外，其他統稱為“基本型別”】：空值（null）未定義（undefined）布林值（boolean）數字（number）字元竄（string）物件（object）符號（symbol，ES6新增的

你不知道的javascript（上卷卷）筆記

java title head javascrip itl utf-8 body doc ctype <!DOCTYPE html> <html> <head> <meta charset="utf-8">

你不知道的JavaScript中，讀書筆記

java symbol 內置 script null scrip ring obj 不知道七種內置類型 null, undefined, boolean, number, string, object, symbol typeof null === ‘object‘ //

翻譯連載 | 附錄 A：Transducing（上）－《JavaScript輕量級函數式編程》 |《你不知道的JS》姊妹篇

產生斷言需要 pipe [] 個數 word 視頻 block 原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者關於譯者：這是一個流淌著滬江血液的純粹工程：認真，是 HTML 最堅實的

《你不知道的javascript上卷》讀書筆記（kyle simpson 著，趙望野、梁譯）

def javascrip arr fin type fine sim imp func 一、關於this篇： 1.this實際上是在函數被調用時發生的綁定，它指向什麽完全取決於函數在哪裏被調用 2.this優先級：new>顯示綁定>隱式綁定>默認綁定。

一、作用域是什麽（學習筆記）—— 《你不知道的JavaScript》

筆記變量如何都是先來 png 模擬特定 function 因為全部都是文字不太好理解，所以盡可能地把所有的文字都畫成了圖，便於理解。作用域是什麽傳統編譯流程： JavaScript 引擎會在語法分析和代碼生成階段，通過特定的步驟，對運行性能進行優化

學習筆記=>《你不知道的JavaScript（上卷）》第五章：作用域閉包

什麼是詞法作用域？　　在之前講過，我們平常寫程式碼的時候，建立一個變數和方法的時候在其書寫的位置（所在環境）會形　　成一個作用域，即為詞法作用域，該作用域中的屬性和方法只能在當前環境內使用。閉包　　最簡單的一個閉包例項： function fun(){ va

JavaScript之你不知道的this

很重要的一句話只有深諳了this，你才有可能用 JavaScript 建立類似谷歌地圖這樣大型的複雜應用一、這篇文章出現的背景 1. this在我們開發過程中的重要性(開發場景) -- 通過一段程式碼簡單瞭解this 提供了一種更優雅的方式來隱式”傳遞”一個物件引用, 讓API

你不知道的JavaScript——do表示式和eval（）

ES7 規範有一項“do 表示式”（do expression）提案，但是具體的用例和語法還沒有廣泛使用，所以這裡只作提及，類似下面這樣： var a, b; a = do { if (true) { b = 4 + 38; } }; a; // 42

一、作用域是什麼（學習筆記）—— 《你不知道的JavaScript》

因為全部都是文字不太好理解，所以儘可能地把所有的文字都畫成了圖，便於理解。作用域是什麼傳統編譯流程： JavaScript 引擎會在語法分析和程式碼生成階段，通過特定的步驟，對執行效能進行優化。包括冗餘元素優化等。 JavaScript 編譯，大部分情況下，發生在程式碼執行前的幾微妙（甚至更短）。

JavaScript中的this（你不知道的JavaScript）

一、this是什麼--基於呼叫位置的上下文；呼叫位置不同，this值不同。

二、為什麼使用this

三. this的四大繫結規則

1. 預設繫結--函式呼叫型別：獨立函式呼叫，this指向全域性物件。

2. 隱式繫結--呼叫位置是否有上下文物件，或者說被某個物件擁有或者包含

3. 顯示繫結

相關推薦