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

資訊專欄INFORMATION COLUMN

JS核心知識點(diǎn)梳理——上下文、作用域、閉包、this（中）

rottengeek / 519人閱讀

摘要：引言滿滿的干貨，面試必系列，參考大量資料，并集合自己的理解以及相關(guān)的面試題，對核心知識點(diǎn)中的作用域閉包上下文進(jìn)行了梳理。本篇重點(diǎn)介紹閉包和。所以，有另一種說法認(rèn)為閉包是由函數(shù)和與其相關(guān)的引用環(huán)境組合而成的實(shí)體。

引言

滿滿的干貨，面試必bei系列，參考大量資料，并集合自己的理解以及相關(guān)的面試題，對JS核心知識點(diǎn)中的作用域、閉包、this、上下文進(jìn)行了梳理。上一篇介紹了作用域和上下文。因為感覺這兩個概念互相糾纏，上下文的生成會依賴作用域規(guī)則。本篇重點(diǎn)介紹閉包和this。

this

先介紹this，因為我覺得this最簡單了，掌握住分析的方法，依照方法去分析，毫無難度。

為什么引入this

因為我們解耦，為什么要解耦？因為我們要復(fù)用！
舉個例子：我費(fèi)了九牛二虎之力寫了一個方法，可以對某個數(shù)組a進(jìn)行復(fù)雜的操作

var a = [xxx,xxx,....]
function foo (){
  a xxx // do something to a
  xxx a  // do something to a
}

這個方法只能a用 耦合性太強(qiáng)。當(dāng)其他數(shù)組b想用這個方法的時候由于方法里面的操作對象固定是a導(dǎo)致失敗。
當(dāng)然我也不能寫成b，因為如果數(shù)組c要用難道我們再改成c?
怎么辦，顯然這個操作的對象不能是固定的，應(yīng)該說最好是一個變量，誰調(diào)用，這個變量就是誰。
this就這么產(chǎn)生了！所以說this的可變是業(yè)務(wù)的需要，我們要的就是它的可變。當(dāng)然你要是掌握不了它的變化規(guī)則，那么對你來說引入this就是一場災(zāi)難了。

this的規(guī)則

總原則: 函數(shù)中的this，指的是當(dāng)前函數(shù)的執(zhí)行主體；誰讓函數(shù)執(zhí)行的，那么this就指向誰

在全局作用域下，this指向window；

函數(shù)體中的this，看函數(shù)執(zhí)行前有沒有".",如果有，那么點(diǎn)前面是誰，this就指向誰；如果沒有“.”，那么會指向window;

如果給元素的事件行為綁定方法，那么方法中的this，就會指向當(dāng)前被綁定的那個元素；

回調(diào)函數(shù)中的this指向window；

自執(zhí)行函數(shù)中的this永遠(yuǎn)指向window；

call 、apply、bind可以改變this關(guān)鍵字；

構(gòu)造函數(shù)中的this指向當(dāng)前類的實(shí)例；

改變this

apply call bind可以改變this

問題來了，為什么要改變this?

還記得我之前說的引入this是為了進(jìn)行更好的復(fù)用嗎？
js里面沒有類，但是通過原型、繼承js在努力模仿類。同一個類當(dāng)然能通過繼承復(fù)用代碼，不同類不繼承的情況下怎么復(fù)用呢？通過改變this。
舉個例子，Array類有reverse方法。只要是數(shù)組，都繼承了Array的reverse方法，可以直接調(diào)用。

[1,2,3].reverse()  //[3,2,1]

現(xiàn)在有個類數(shù)組arguments,由于不屬于Array類，沒有辦法繼承reverse方法，但是我就是想用，咋辦？改變this

Array.prototype.reverse.call(argumengts)
閉包 
在計算機(jī)科學(xué)中，閉包（英語：Closure），又稱詞法閉包（Lexical Closure）或函數(shù)閉包（function closures），是引用了自由變量的函數(shù)。這個被引用的自由變量將和這個函數(shù)一同存在，即使已經(jīng)離開了創(chuàng)造它的環(huán)境也不例外。所以，有另一種說法認(rèn)為閉包是由函數(shù)和與其相關(guān)的引用環(huán)境組合而成的實(shí)體。 wiki

閉包這個東西咋說呢，不同的程序員，不同的資料都有不同的理解。你把它理解為一個函數(shù)，也可以把它理解為函數(shù)+執(zhí)行環(huán)境。

我們這里不糾結(jié)閉包的定義。而是關(guān)注閉包的現(xiàn)象，應(yīng)用，再結(jié)合相關(guān)面試題去攻克它，最后談一下我對閉包的思考。

現(xiàn)象

話說了一籮筐，你倒是給我上代碼呀.....
各位看官息怒，小的再多說幾句

之前我們說過了，函數(shù)執(zhí)行，生成執(zhí)行環(huán)境。函數(shù)執(zhí)行完，銷毀執(zhí)行環(huán)境。嗯，聽上去很正常，不用的東西就銷毀嘛。

但是如果函數(shù)執(zhí)行完，該函數(shù)上下文還用用怎么辦，有用的東西肯定不敢銷毀了。這個就是閉包的現(xiàn)象，那么能引起這個現(xiàn)象的鄙人就把它理解為閉包！

function foo () {
    var a = 1
    return function bar () {
        a++
        console.log(a)
    }
}
var b = foo() //函數(shù)執(zhí)行完，我就問你foo的上下文你敢銷毀嗎？
b()  //  2
b()  //  3

大家看foo執(zhí)行完的結(jié)果賦值給了b,也就是函數(shù)bar賦值給了b,未來我可能讓b執(zhí)行的，也就是讓bar執(zhí)行，所以我需要保證bar能訪問上下文不被銷毀。bar能訪問的上下文實(shí)際上是foo執(zhí)行時候的上下文。所以foo執(zhí)行完以后上下文不會被銷毀，會繼續(xù)存在。

我的理解是 函數(shù)向外層作用域暴露出了一個內(nèi)部引用，那么就存在閉包現(xiàn)象（真的沒必要糾結(jié)閉包到底是啥，是函數(shù)？內(nèi)部整體？是xxx?`。

作用與應(yīng)用 作用1：保存變量

應(yīng)用: 函數(shù)柯里化

var add = (a)=>(b)=> a+b
add(2)(3) //5

優(yōu)點(diǎn)：延遲執(zhí)行，提前傳參，逼格高

作用2：保護(hù)變量（不受污染）

應(yīng)用: 單例模式

 //jQ源碼
 (function(){
      var jQuery=function(){
          //jq代碼
       }
      window.$=window.jQuery=jQuery;  //這個通過window對象暴露給外面，根return的暴露是一個意思
   })()
//函數(shù)執(zhí)行完了，里面的引用暴露給外面了，所以上下文不銷毀

優(yōu)點(diǎn)：變量和函數(shù)都寫到立即執(zhí)行函數(shù)里面了，避免了污染外層作用域

優(yōu)缺點(diǎn)

閉包無處不在，也許你不經(jīng)意就寫了個閉包。

需要注意的是，由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

總結(jié)

本篇詳細(xì)介紹了閉包和this的來源，規(guī)律，應(yīng)用。由于篇幅有限，將在下一篇中會結(jié)合各大公司面試題來鞏固這些知識，希望給大家?guī)韼椭?/p>

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

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

相關(guān)文章

  • JS核心知識點(diǎn)梳理——上下文、作用域、閉包、this（上）

    摘要：引言滿滿的干貨，面試必系列，參考大量資料，并集合自己的理解以及相關(guān)的面試題，對核心知識點(diǎn)中的作用域閉包上下文進(jìn)行了梳理。如果在小區(qū)這個作用域找到了張老師，我就會在張老師的輔導(dǎo)下學(xué)鋼琴我張老師房間鋼琴構(gòu)成了學(xué)琴的上下文環(huán)境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 滿滿的干貨，面試必bei系列，參考大...

    Andrman 評論0 收藏0

  • JS核心知識點(diǎn)梳理——上下文、作用域、閉包、this（下）

    摘要：引言前面兩篇文章介紹了上下文作用域閉包。這里我精心挑選了一些特別經(jīng)典的面試題不定期更新，跪求收藏。閉包組這類題目還是挺簡單的，我總結(jié)了幾個要注意的地方有沒有閉包如果有閉包，看創(chuàng)建了幾個閉包。不要在腦子里想，每步的結(jié)果用紙和筆演算下 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 前面兩篇文章介紹了上下文、作...

    XUI 評論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。插....

    izhuhaodev 評論0 收藏0

  • 好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識梳理匯總

    摘要：好程序員前端培訓(xùn)入門之基礎(chǔ)知識梳理匯總，前端工程師是當(dāng)前各大企業(yè)都比較稀缺的人才，薪資待遇和就業(yè)前景都很不錯。作用域鏈的前端，始終是當(dāng)前執(zhí)行代碼所在環(huán)境的變量對象。 　　好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識梳理匯總，Web前端工程師是當(dāng)前各大企業(yè)都比較稀缺的人才，薪資待遇和就業(yè)前景都很不錯。不論是專業(yè)還是非專業(yè)，有基礎(chǔ)亦或是無基礎(chǔ)，都想通過學(xué)習(xí)Web前端實(shí)現(xiàn)高薪就業(yè)。不過，學(xué)習(xí)要一...

    int64 評論0 收藏0

  • 好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識梳理匯總

    摘要：好程序員前端培訓(xùn)入門之基礎(chǔ)知識梳理匯總，前端工程師是當(dāng)前各大企業(yè)都比較稀缺的人才，薪資待遇和就業(yè)前景都很不錯。作用域鏈的前端，始終是當(dāng)前執(zhí)行代碼所在環(huán)境的變量對象。 　　好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識梳理匯總，Web前端工程師是當(dāng)前各大企業(yè)都比較稀缺的人才，薪資待遇和就業(yè)前景都很不錯。不論是專業(yè)還是非專業(yè)，有基礎(chǔ)亦或是無基礎(chǔ)，都想通過學(xué)習(xí)Web前端實(shí)現(xiàn)高薪就業(yè)。不過，學(xué)習(xí)要一...

    kviccn 評論0 收藏0

發(fā)表評論

0條評論

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