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

rottengeek 發(fā)布于2019-08-26 13:50 / 474人閱讀

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

引言

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

this

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

為什么引入this

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

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

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

this的規(guī)則

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

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

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

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

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

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

call 、apply、bind可以改變this關鍵字；

構造函數(shù)中的this指向當前類的實例；

改變this

apply call bind可以改變this

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

還記得我之前說的引入this是為了進行更好的復用嗎？
js里面沒有類，但是通過原型、繼承js在努力模仿類。同一個類當然能通過繼承復用代碼，不同類不繼承的情況下怎么復用呢？通過改變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)

閉包

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

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

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

現(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能訪問的上下文實際上是foo執(zhí)行時候的上下文。所以foo執(zhí)行完以后上下文不會被銷毀，會繼續(xù)存在。

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

作用與應用 作用1：保存變量

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

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

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

作用2：保護變量（不受污染）

應用: 單例模式

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

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

優(yōu)缺點

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

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

總結(jié)

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

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

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

JS核心知識點梳理——上下文、作用域、閉包、this（上）

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

Andrman 2019-08-26 13:50 評論0 收藏0
JS核心知識點梳理——上下文、作用域、閉包、this（下）

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

XUI 2019-08-26 13:50 評論0 收藏0
JavaScript - 收藏集 - 掘金

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

izhuhaodev 2019-08-21 11:44 評論0 收藏0
好程序員Web前端培訓入門之JS基礎知識梳理匯總

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

int64 2019-08-23 16:29 評論0 收藏0
好程序員Web前端培訓入門之JS基礎知識梳理匯總

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

kviccn 2019-08-02 16:09 評論0 收藏0