本篇學習目標

?$了解函數（高級）原型原型鏈概念$

?$掌握函數作用域$

?$掌握閉包的使用與缺點$

?$了解js對象高級嘗試$

?$掌握對象的幾種創建形式$

?$掌握對象的繼承模式$

1.函數（高級）

1. 1 原型與原型鏈

1). 所有函數都有一個特別的屬性:

prototype : 顯式原型屬性

2). 所有實例對象都有一個特別的屬性:

__proto__ : 隱式原型屬性

3). 顯式原型與隱式原型的關系

函數的prototype: 定義函數時被自動賦值, 值默認為{}, 即用為原型對象
實例對象的__proto__: 在創建實例對象時被自動添加, 并賦值為構造函數的prototype值
原型對象即為當前實例對象的父對象

4). 原型鏈

所有的實例對象都有__proto__屬性, 它指向的就是原型對象
這樣通過__proto__屬性就形成了一個鏈的結構---->原型鏈
當查找對象內部的屬性/方法時, js引擎自動沿著這個原型鏈查找
當給對象屬性賦值時不會使用原型鏈, 而只是在當前對象中進行操作

5). 詳圖

function Foo () {}var f1 = new Foo()var f2 = new Foo()var o1 = {}var o2 = {}

1. 2 執行上下文與執行上下文棧

1). 變量提升與函數提升

變量提升: 在變量定義語句之前, 就可以訪問到這個變量(undefined)
函數提升: 在函數定義語句之前, 就執行該函數
先有函數提升, 后有變量提升

2). 理解

執行上下文: 由js引擎自動創建的對象, 包含對應作用域中的所有變量屬性
執行上下文棧: 用來管理產生的多個執行上下文

3). 分類:

全局: window
函數: 對程序員來說是透明的

4). 生命周期

全局 : 準備執行全局代碼前產生, 當頁面刷新/關閉頁面時死亡
函數 : 調用函數時產生, 函數執行完時死亡

5). 包含哪些屬性:

全局 :
用var定義的全局變量 ==>undefined
使用function聲明的函數 ===>function
this ===>window
函數
用var定義的局部變量 ==>undefined
使用function聲明的函數 ===>function
this ===> 調用函數的對象, 如果沒有指定就是window
形參變量 ===>對應實參值
arguments ===>實參列表的偽數組

6). 執行上下文創建和初始化的過程

全局:
在全局代碼執行前最先創建一個全局執行上下文(window)
收集一些全局變量, 并初始化
將這些變量設置為window的屬性
函數:
在調用函數時, 在執行函數體之前先創建一個函數執行上下文
收集一些局部變量, 并初始化
將這些變量設置為執行上下文的屬性

1. 3 作用域與作用域鏈

1). 理解:

作用域: 一塊代碼區域, 在編碼時就確定了, 不會再變化
作用域鏈: 多個嵌套的作用域形成的由內向外的結構, 用于查找變量

2). 分類:

• 全局
• 函數
• js沒有塊作用域(在ES6之前)

3). 作用

作用域: 隔離變量, 可以在不同作用域定義同名的變量不沖突
作用域鏈: 查找變量

4). 區別作用域與執行上下文

作用域: 靜態的, 編碼時就確定了(不是在運行時), 一旦確定就不會變化了
執行上下文: 動態的, 執行代碼時動態創建, 當執行結束消失
聯系: 執行上下文環境是在對應的作用域中的

1. 4 閉包

1). 理解:

當嵌套的內部函數引用了外部函數的變量時就產生了閉包
通過chrome工具得知: 閉包本質是內部函數中的一個對象, 這個對象中包含引用的變量屬性

2). 作用:

延長局部變量的生命周期
讓函數外部能操作內部的局部變量

3). 寫一個閉包程序

    function fn1() {var a = 2;function fn2() {a++;console.log(a);}return fn2;}var f = fn1();f();f();

4). 閉包應用:

循環遍歷加監聽: 給多個li加點擊監聽, 讀取當前下標
模塊化: 封裝一些數據以及操作數據的函數, 向外暴露一些行為
JS框架(jQuery)大量使用了閉包

5). 缺點:

變量占用內存的時間可能會過長
可能導致內存泄露
解決: 及時釋放 : f = null; //讓內部函數對象成為垃圾對象

1. 5 內存溢出與內存泄露

1). 內存溢出

一種程序運行出現的錯誤
當程序運行需要的內存超過了剩余的內存時, 就出拋出內存溢出的錯誤

2). 內存泄露

占用的內存沒有及時釋放
內存泄露積累多了就容易導致內存溢出
常見的內存泄露:
意外的全局變量
沒有及時清理的計時器或回調函數
閉包

2.對象（高級）

2.1 對象的創建模式

1). Object構造函數模式

	var obj = {}obj.name = 'Tom'obj.setName = function(name){this.name=name}

2). 對象字面量模式

	var obj = {name : 'Tom',setName : function(name){this.name = name}}

3). 構造函數模式

	function Person(name, age) {this.name = namethis.age = agethis.setName = function(name){this.name=name}}new Person('tom', 12)

4). 構造函數+原型的組合模式

	function Person(name, age) {this.name = namethis.age = age}Person.prototype.setName = function(name){this.name=name}new Person('tom', 12)

2. 2 繼承模式

1). 原型鏈繼承 : 得到方法

	function Parent(){}Parent.prototype.test = function(){}function Child(){}Child.prototype = new Parent() //子類原型指向父類的實例Child.prototype.constructor = Child //原型的構造器指向構造函數var child = new Child() child.test() //調用父類型的方法

2). 借用構造函數 : 得到屬性

	function Parent(xxx){this.xxx = xxx}Parent.prototype.test = function(){}function Child(xxx,yyy){Parent.call(this, xxx) //借用父類型的構造函數 相當于:this.Parent(xxx)}var child = new Child('a', 'b')  //child.xxx為'a', 但child沒有test()

3). 組合

	function Parent(xxx){this.xxx = xxx}Parent.prototype.test = function(){}function Child(xxx,yyy){Parent.call(this, xxx) //借用構造函數   this.Parent(xxx)}Child.prototype = new Parent() //得到test()Child.proptotype.constructor = Childvar child = new Child() //child.xxx為'a', 也有test()

2.3 理解

1). 定義一個函數背后做了什么?

創建一個Function的實例對象
給對象添加prototype屬性, 其值為object空對象(原型對象)
給原型對象添加constructor屬性, 指向當前函數對象

2). new一個對象背后做了些什么?

創建一個新的空對象
給對象設置__proto__, 值為構造函數對象的prototype屬性值
通過對象執行構造函數體(給對象添加屬性/方法)

本期推薦

很多粉絲問我對于學習Vue哪些書籍比較好，比較靠譜
今天小編為大家推薦這本 《Vue.js全家桶零基礎入門到進階項目實戰》

本書貫穿入門準備實操、基礎核心案例、中級進階實戰、綜合進階項目進行講解，循序漸進、環環相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然。包含的主要技術：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、攔截器、組件通信、跨域問題、上線部署等。
本書適合有 HTML、CSS、JavaScript 基礎的 Vue.js 零基礎小白、前端開發人員、后端開發人員。同時，也適合以下人員閱讀：在校生，需要掌握流行的新技術，做到與職場同步；在職人員，工作中需要學習使用Vue；有基礎學員，需要系統、全面、高效使用 Vue 技術。
本書優勢
1.技術全面、完整、系統—對標企業項目技術棧
2.講解詳細、通俗易懂——分析循序漸進且邏輯強
3.有學習討論交流群——快速成為前端工程師

購書渠道

渠道1點擊購買

渠道2點擊購買

寫在最后

?$原創不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$