JS this 分析

warnerwu 發布于2019-08-23 14:12 / 2721人閱讀

摘要：指向分細我們在中研究的都是函數中的中的代表的是當前行為執行的主體中的代表的是當前行為執行的環境區域例如在飯店吃餃子執行主體就是上下文就是飯店吃餃子就是行為吃餃子吃餃子輸出指吃餃子輸出指的還是是誰和函數在哪定義的和在哪執行的沒有任

1. this指向分細 1.1 this

this(我們在js中研究的都是函數中的this)

JS中的this代表的是當前行為執行的主體

JS中的context代表的是當前行為執行的環境(區域)

//例如:A 在 飯店 吃 餃子
//執行主體就是A 上下文就是飯店 吃餃子就是行為
function 吃餃子() {
    console.log(this);
}
A.吃餃子()//輸出this ---> 指A
(function() {
    A.吃餃子()//輸出this --->指的還是A
})
//this是誰 和函數在哪定義的和在哪執行的沒有任何關系,就是指執行主體

1.2 如何區分this(目前只分析三種后續會更新)

1、函數執行,首先看函數前面是否有".",有的話前面是誰,this就是誰,沒有的話this指window

function fn() { console.log(this) };
var obj = { fn: fn };
fn()//this--->指window
var obj = { fn: fn };
obj.fn()//this指obj
function sum() {
    fn()//this---->指window
}
sum();
var oo = {
    sum: function() {
        fn()//this --->指window
    }
}
oo.sum();

2、自執行函數中的this永遠是指window

3、給元素的的某一個事件綁定方法,當事件觸發的時候,執行對應的方法,this是指當前的元素

function fn() {
    console.log(this);
}
document.getElementById("#div1").onclick = fn;
//fn中的this --->指 "#div1"
document.getElementById("#div1").onclick = function() {
    //this --->指 "#div1";
    fn()//this --->指window
}

1.3 經典面試題分析

var num = 20;
var obj = { //對象只是堆內存,不是作用域,想訪問變量num,必須是obj.num的形式
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num = 45;
        return function() {
            this.num *=4;
            num +=20;
            console.log(num)
        }
    })(num)
    //此處傳參 是全局變量的num的值20 賦值給了自執行函數的形參 而不是obj的30 如果傳入obj下的30 需要寫成obj.num
}
var fn = obj.fn;
fn();//輸出65
obj.fn();//85
console.log(window.num);//240
console.log(obj.num);//120

此題涉及主要知識點如下

a、函數內部返回的引用類型的值(函數/對象)被外部變量占用,此函數執行形成的作用域不銷毀
b、給obj對象賦值的過程中自執行函數執行并return 一個函數
c、自執行函數的this指向window
d、obj.fn fn中的this 指向obj
e、自執行函數在全局作用下并不進行預解釋,但是函數內部執行會形成私有作用域,函數內部會進行預解釋
f、如果要分析此題,畫圖是最容易的且最直觀的
g、在函數執行的過程中一定要區分this.num 和私有變量num 這個是解答此題的關鍵
h、當前作用域中沒有num變量也沒有參數傳入要往上級作用域查找num(如何找也是一個知識點)

附示意圖

動力: 這是我的學習筆記,您能從中得到收獲和進步,是我分享的動力,幫助別人,自己也會更快樂

期望: 不喜勿噴,謝謝合作！如果涉及版權請及時聯系我,馬上刪除!

GPU云服務器云服務器 js中的this js里面的this js中的this機制 js中的this與html

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

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

談談對模塊化的理解

摘要：重要的模塊化規范有幾個，模塊機制，，。模塊化的目的在于營造安全封閉的作用域且具有易于引用接口，按我的理解可分為模塊定義模塊引入兩部分。它的定義如下模塊標識符模塊對外輸出的值調用該模塊的模塊。在中，有一部分模塊由提供，稱之為核心模塊。重要的模塊化規范有幾個：commonjs，ES6模塊機制，AMD，CMD。由于業務中一直接觸的都是Vue+webpack+babel架構的項目，在封裝代碼...

silvertheo 2019-08-22 11:11 評論0 收藏0
React.js 小書 Lesson26 - 實戰分析：評論功能（五）

摘要：修改請輸入用戶名請輸入評論內容我們增加了和分別用于加載和保存評論列表數據。現在發布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節中我們將介紹小書實戰分析評論功能六。 React.js 小書 Lesson26 - 實戰分析：評論功能（五）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

Nekron 2019-08-21 17:33 評論0 收藏0
一步一步搭建前端監控系統：JS錯誤監控篇

摘要：摘要徒手寫錯誤監控。為什么用定時器呢，因為在單頁應用中，路由的切換和地址欄的變化是無法被監控的，我確實沒有想到特別好的辦法來監控，所以用了這種方式，如果有人有更好的辦法，請給我留言，謝謝。摘要：徒手寫JS錯誤監控。作者：一步一個腳印一個坑原文：搭建前端監控系統（二）JS錯誤監控篇 Fundebug經授權轉載，版權歸原作者所有。背景：市面上的監控系統有很多，大多收費，對于...

EdwardUp 2019-08-23 18:30 評論0 收藏0
should.js源碼分析與學習

摘要：結構其中為整個項目入口，為中的類，負責對測試信息進行記錄。通過拋出錯誤而不是返回布爾值的方式來通知用戶，能夠更加明顯的通知用戶，也方便向上拋出異常進行傳遞。背景為了研究與學習某些測試框架的工作原理，同時也為了完成培訓中實現一個簡單的測試框架的原因，我對should.js的代碼進行了學習與分析，現在與大家來進行交流下。目錄 ext assertion.js assertion-e...

Turbo 2019-08-21 13:33 評論0 收藏0
javascript引擎執行的過程的理解--語法分析和預編譯階段

摘要：所以覺得把這個執行的詳細過程整理一下，幫助更好的理解。類似的語法報錯的如下圖所示三預編譯階段代碼塊通過語法分析階段之后，語法都正確的下回進入預編譯階段。另開出新文章詳細分析，主要介紹執行階段中的同步任務執行和異步任務執行機制事件循環。一、概述 js是一種非常靈活的語言，理解js引擎的執行過程對于我們學習js是非常有必要的?？戳撕芏噙@方便文章，大多數是講的是事件循環（event loo...

molyzzx 2019-08-23 14:35 評論0 收藏0