深入理解JavaScript：函數中的this指什么？

fuyi501 發布于2019-08-22 15:21 / 1592人閱讀

摘要：到底是什么函數被調用時的位置是動態的箭頭函數不在此范圍，因為它的是函數定義時的上下文，是靜態的判斷規則如果是在中調用，則為新創建的對象通過，調用，是之前定的對象第一個參數注意若第一個參數是，則執行第四條判斷規則在么某個上下文中調用，是該上下

this到底是什么？

函數被調用時的位置（是動態的！）
(箭頭函數不在此范圍，因為它的this是函數定義時的上下文，是靜態的！)

判斷規則

1.如果是在new中調用，this則為新創建的對象
2.通過call，apply調用，this是之前定的對象（第一個參數）
（注意若第一個參數是null，undefined則執行第四條判斷規則）
3.在么某個上下文中調用，this是該上下文對象
4.上面3個都不是的話，this是全局對象（嚴格模式是undefined）

速記

1.new（該函數使用new構造調用了）
2.顯式（該函數顯示使用call，apply調用）
3.隱式（該函數為某個對象的屬性值，作為對象的屬性方法調用）
4.默認（無特征，直接調用了）

加深理解

看代碼吧～

new綁定

function foo(a){
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2

顯式綁定

function foo(a){
    this.a = a;
}
var obj = {a:2};
foo.call(obj); // 2

隱式綁定

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

// trap 2or22???
function foo(){
    console.log(this.a);
}
var obj1 = {
    a: 2,
    foo: foo
};
var obj2 = {
    a: 22,
    obj1: obj1
};
obj2.obj1.foo(); // tip 函數foo是誰的屬性值呢？

綁定默認

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

常規考點～

// trap 0or1??? why? 如何打印另外一個值～
function foo(){
    setTimeout(function(){
        console.log(this.a);
    },1000);
}
var obj = {a:1};
var a = 0;
foo.call(obj); // tip 包含this的函數究竟是在哪里被執行的呢？0和1的區別在于？

GPU云服務器云服務器深入理解javascript javaScript中的this javascript是指什么 javascript中的函數

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

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

由ES規范學JavaScript(三)：深入理解this

摘要：有三個重要組成部分和。參考小結函數中的是由調用函數的方式決定的。構造函數中的當構造函數通過操作符來調用時，表示正在創建的對象。情況沒有明確作用對象的情況下，通常為全局對象例如函數的回調函數，它的就是全局對象。一. this的來源 this是JavaScript的關鍵字，它最初應該是從Java、C++等面向對象的語言中借鑒來的。比如，在Java中沒有函數只有方法，this只能用在類的...

wthee 2019-08-19 17:23 評論0 收藏0
我對JavaScript中this的一些理解

摘要：匿名函數的執行環境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數的指向為什么是作為對象方法的調用，指向該對象當函數作為某個對象的方法調用時，就指這個函數所在的對象。因為日常工作中經常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。這段時間翻閱了一些書籍也查閱了網上一些資料然后結合自己的經驗，為了能讓自...

focusj 2019-08-23 15:23 評論0 收藏0
【進階2-2期】JavaScript深入之從作用域鏈理解閉包

摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...

simpleapples 2019-08-23 13:47 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
《深入理解ES6》筆記—— JavaScript中的類class（9）

摘要：新建一個類該函數返回一個類的實例給函數傳入通過立即調用類構造函數可以創建單例。派生類是指繼承自其它類的新類。在構造函數中訪問之前要調用，負責初始化。在構造函數中使用通常表示當前的構造函數名。 ES5中的近類結構 ES5以及之前的版本，沒有類的概念，但是聰明的JavaScript開發者，為了實現面向對象，創建了特殊的近類結構。 ES5中創建類的方法：新建一個構造函數，定義一個方法并且賦值...

gggggggbong 2019-08-20 18:23 評論0 收藏0