成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS this 分析

warnerwu / 2723人閱讀

摘要：指向分細(xì)我們?cè)谥醒芯康亩际呛瘮?shù)中的中的代表的是當(dāng)前行為執(zhí)行的主體中的代表的是當(dāng)前行為執(zhí)行的環(huán)境區(qū)域例如在飯店吃餃子執(zhí)行主體就是上下文就是飯店吃餃子就是行為吃餃子吃餃子輸出指吃餃子輸出指的還是是誰(shuí)和函數(shù)在哪定義的和在哪執(zhí)行的沒(méi)有任

1. this指向分細(xì) 1.1 this

this(我們?cè)趈s中研究的都是函數(shù)中的this)

JS中的this代表的是當(dāng)前行為執(zhí)行的主體

JS中的context代表的是當(dāng)前行為執(zhí)行的環(huán)境(區(qū)域)

//例如:A 在 飯店 吃 餃子
//執(zhí)行主體就是A 上下文就是飯店 吃餃子就是行為
function 吃餃子() {
    console.log(this);
}
A.吃餃子()//輸出this ---> 指A
(function() {
    A.吃餃子()//輸出this --->指的還是A
})
//this是誰(shuí) 和函數(shù)在哪定義的和在哪執(zhí)行的沒(méi)有任何關(guān)系,就是指執(zhí)行主體
1.2 如何區(qū)分this(目前只分析三種 后續(xù)會(huì)更新)

1、函數(shù)執(zhí)行,首先看函數(shù)前面是否有".",有的話前面是誰(shuí),this就是誰(shuí),沒(méi)有的話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、自執(zhí)行函數(shù)中的this永遠(yuǎn)是指window

3、給元素的的某一個(gè)事件綁定方法,當(dāng)事件觸發(fā)的時(shí)候,執(zhí)行對(duì)應(yīng)的方法,this是指當(dāng)前的元素

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 經(jīng)典面試題分析 
var num = 20;
var obj = { //對(duì)象只是堆內(nèi)存,不是作用域,想訪問(wèn)變量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 賦值給了自執(zhí)行函數(shù)的形參 而不是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

此題涉及主要知識(shí)點(diǎn)如下

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

附示意圖

動(dòng)力: 這是我的學(xué)習(xí)筆記,您能從中得到收獲和進(jìn)步,是我分享的動(dòng)力,幫助別人,自己也會(huì)更快樂(lè)

期望: 不喜勿噴,謝謝合作！如果涉及版權(quán)請(qǐng)及時(shí)聯(lián)系我,馬上刪除!

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100251.html

相關(guān)文章

  • 談?wù)剬?duì)模塊化的理解

    摘要：重要的模塊化規(guī)范有幾個(gè)，模塊機(jī)制，，。模塊化的目的在于營(yíng)造安全封閉的作用域且具有易于引用接口，按我的理解可分為模塊定義模塊引入兩部分。它的定義如下模塊標(biāo)識(shí)符模塊對(duì)外輸出的值調(diào)用該模塊的模塊。在中，有一部分模塊由提供，稱之為核心模塊。 重要的模塊化規(guī)范有幾個(gè)：commonjs，ES6模塊機(jī)制，AMD，CMD。由于業(yè)務(wù)中一直接觸的都是Vue+webpack+babel架構(gòu)的項(xiàng)目，在封裝代碼...

    silvertheo 評(píng)論0 收藏0

  • React.js 小書 Lesson26 - 實(shí)戰(zhàn)分析：評(píng)論功能（五）

    摘要：修改請(qǐng)輸入用戶名請(qǐng)輸入評(píng)論內(nèi)容我們?cè)黾恿撕头謩e用于加載和保存評(píng)論列表數(shù)據(jù)?，F(xiàn)在發(fā)布評(píng)論，然后刷新可以看到我們的評(píng)論并不會(huì)像以前一樣消失。非常的不錯(cuò)，持久化評(píng)論的功能也完成了。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能六。 React.js 小書 Lesson26 - 實(shí)戰(zhàn)分析：評(píng)論功能（五） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

    Nekron 評(píng)論0 收藏0

  • 一步一步搭建前端監(jiān)控系統(tǒng)：JS錯(cuò)誤監(jiān)控篇

    摘要：摘要徒手寫錯(cuò)誤監(jiān)控。為什么用定時(shí)器呢，因?yàn)樵趩雾?yè)應(yīng)用中，路由的切換和地址欄的變化是無(wú)法被監(jiān)控的，我確實(shí)沒(méi)有想到特別好的辦法來(lái)監(jiān)控，所以用了這種方式，如果有人有更好的辦法，請(qǐng)給我留言，謝謝。 摘要： 徒手寫JS錯(cuò)誤監(jiān)控。 作者：一步一個(gè)腳印一個(gè)坑 原文：搭建前端監(jiān)控系統(tǒng)（二）JS錯(cuò)誤監(jiān)控篇 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 背景：市面上的監(jiān)控系統(tǒng)有很多，大多收費(fèi)，對(duì)于...

    EdwardUp 評(píng)論0 收藏0

  • should.js源碼分析與學(xué)習(xí)

    摘要：結(jié)構(gòu)其中為整個(gè)項(xiàng)目入口，為中的類，負(fù)責(zé)對(duì)測(cè)試信息進(jìn)行記錄。通過(guò)拋出錯(cuò)誤而不是返回布爾值的方式來(lái)通知用戶，能夠更加明顯的通知用戶，也方便向上拋出異常進(jìn)行傳遞。 背景 為了研究與學(xué)習(xí)某些測(cè)試框架的工作原理，同時(shí)也為了完成培訓(xùn)中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的測(cè)試框架的原因，我對(duì)should.js的代碼進(jìn)行了學(xué)習(xí)與分析，現(xiàn)在與大家來(lái)進(jìn)行交流下。 目錄 ext assertion.js assertion-e...

    Turbo 評(píng)論0 收藏0

  • javascript引擎執(zhí)行的過(guò)程的理解--語(yǔ)法分析和預(yù)編譯階段

    摘要：所以覺(jué)得把這個(gè)執(zhí)行的詳細(xì)過(guò)程整理一下，幫助更好的理解。類似的語(yǔ)法報(bào)錯(cuò)的如下圖所示三預(yù)編譯階段代碼塊通過(guò)語(yǔ)法分析階段之后，語(yǔ)法都正確的下回進(jìn)入預(yù)編譯階段。另開(kāi)出新文章詳細(xì)分析，主要介紹執(zhí)行階段中的同步任務(wù)執(zhí)行和異步任務(wù)執(zhí)行機(jī)制事件循環(huán)。 一、概述 js是一種非常靈活的語(yǔ)言，理解js引擎的執(zhí)行過(guò)程對(duì)于我們學(xué)習(xí)js是非常有必要的?？戳撕芏噙@方便文章，大多數(shù)是講的是事件循環(huán)（event loo...

    molyzzx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<