相關(guān)知識(shí)點(diǎn)：
1. 作用域
作用域就是變量與函數(shù)的可訪問范圍分俯，即作用域控制著變量與函數(shù)的可見性和生命周期。
局部作用域
function outer(){
// 聲明變量（局部變量）
var name = "ukerxi";
// 定義內(nèi)部函數(shù)
function inner() {
console.log(name); // 可以訪問到 name 變量
}
}
console.log(name); // 報(bào)錯(cuò)锌唾，undefined篓像；
name是函數(shù)內(nèi)部聲明并賦值嗜逻，擁有局部作用域涩僻，只能在函數(shù)outer內(nèi)部使用，在outer外部使用就會(huì)報(bào)錯(cuò)栈顷，這就是局部作用域的特性逆日，外部無(wú)法訪問。
全局作用域
任何地方都能訪問到的對(duì)象擁有全局作用域萄凤。
(1)函數(shù)外面定義的變量擁有全局作用域
(2)未定義直接賦值的變量自動(dòng)聲明為擁有全局作用域
function outFun2() {
variable = "未定義直接賦值的變量";
var inVariable2 = "內(nèi)層變量2";
}
outFun2(); // 要先執(zhí)行這個(gè)函數(shù)室抽，否則根本不知道里面是啥
console.log(variable); // 未定義直接賦值的變量
console.log(inVariable2); // inVariable2 is not defined
(3)window對(duì)象的屬性擁有全局作用
塊級(jí)作用域
塊級(jí)作用域可通過新增命令 let 和 const 聲明，所聲明的變量在指定塊的作用域外無(wú)法被訪問靡努。塊級(jí)作用域在如下情況被創(chuàng)建：
- 在一個(gè)函數(shù)內(nèi)部
- 在一個(gè)代碼塊（由一對(duì)花括號(hào)包裹）內(nèi)部
let 聲明的語(yǔ)法與 var 的語(yǔ)法一致坪圾。你基本上可以用 let 來(lái)代替 var 進(jìn)行變量聲明，但會(huì)將變量的作用域限制在當(dāng)前代碼塊中惑朦。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
塊級(jí)作用域有以下幾個(gè)特點(diǎn)：
- 聲明變量不會(huì)提升到代碼塊頂部
let/const 聲明并不會(huì)被提升到當(dāng)前代碼塊的頂部兽泄，因此你需要手動(dòng)將 let/const 聲明放置到頂部，以便讓變量在整個(gè)代碼塊內(nèi)部可用漾月。
function getValue(condition) {
if (condition) {
let value = "blue";
return value;
} else {
// value 在此處不可用
return null;
}
// value 在此處不可用
}
- 同一作用域內(nèi)禁止重復(fù)聲明
如果一個(gè)標(biāo)識(shí)符已經(jīng)在代碼塊內(nèi)部被定義已日，那么在此代碼塊內(nèi)使用同一個(gè)標(biāo)識(shí)符進(jìn)行 let 聲明就會(huì)導(dǎo)致拋出錯(cuò)誤。例如：
var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared
在本例中栅屏， count 變量被聲明了兩次：一次使用 var ，另一次使用 let 堂鲜。因?yàn)?let 不能在同一作用域內(nèi)重復(fù)聲明一個(gè)已有標(biāo)識(shí)符栈雳，此處的 let 聲明就會(huì)拋出錯(cuò)誤。
- 循環(huán)中的綁定塊作用域
for循環(huán)的計(jì)數(shù)器缔莲，就很合適使用let命令哥纫。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i); // ReferenceError: i is not defined
上面代碼中，計(jì)數(shù)器i只在for循環(huán)體內(nèi)有效痴奏，在循環(huán)體外引用就會(huì)報(bào)錯(cuò)蛀骇。
下面的代碼如果使用var厌秒，最后輸出的是10。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
上面代碼中擅憔，變量i是var命令聲明的鸵闪，在全局范圍內(nèi)都有效，所以全局只有一個(gè)變量i暑诸。每一次循環(huán)蚌讼，變量i的值都會(huì)發(fā)生改變，而循環(huán)內(nèi)被賦給數(shù)組a的函數(shù)內(nèi)部的console.log(i)个榕，里面的i指向的就是全局的i篡石。也就是說(shuō)，所有數(shù)組a的成員里面的i西采，指向的都是同一個(gè)i凰萨，導(dǎo)致運(yùn)行時(shí)輸出的是最后一輪的i的值，也就是 10械馆。
如果使用let胖眷，聲明的變量?jī)H在塊級(jí)作用域內(nèi)有效，最后輸出的是 6狱杰。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
上面代碼中瘦材，變量i是let聲明的，當(dāng)前的i只在本輪循環(huán)有效仿畸，所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量食棕，所以最后輸出的是6。你可能會(huì)問错沽，如果每一輪循環(huán)的變量i都是重新聲明的簿晓，那它怎么知道上一輪循環(huán)的值，從而計(jì)算出本輪循環(huán)的值千埃？這是因?yàn)?JavaScript 引擎內(nèi)部會(huì)記住上一輪循環(huán)的值憔儿，初始化本輪的變量i時(shí)，就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計(jì)算放可。
另外谒臼，for循環(huán)還有一個(gè)特別之處，就是設(shè)置循環(huán)變量的那部分是一個(gè)父作用域耀里，而循環(huán)體內(nèi)部是一個(gè)單獨(dú)的子作用域蜈缤。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代碼正確運(yùn)行，輸出了 3 次abc冯挎。這表明函數(shù)內(nèi)部的變量i與循環(huán)變量i不在同一個(gè)作用域底哥，有各自單獨(dú)的作用域。
作用域鏈
1.什么是自由變量
當(dāng)前作用域沒有定義的變量，為自由變量 趾徽。自由變量的值如何得到 —— 要到創(chuàng)建 fn 函數(shù)的那個(gè)作用域中取续滋，無(wú)論 fn 函數(shù)將在哪里調(diào)用。
- 什么是作用域鏈
通俗地講孵奶，當(dāng)聲明一個(gè)函數(shù)時(shí)疲酌，局部作用域一級(jí)一級(jí)向上包起來(lái)，就是作用域鏈拒课。
var x = 10
function fn() {
console.log(x) //x為自由變量
}
function show(f) {
var x = 20;
(function() {
f() //10徐勃，而不是20
})()
}
show(fn) //10
閉包
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
優(yōu)點(diǎn)：閉包可以形成獨(dú)立的空間早像，永久的保存局部變量僻肖。
缺點(diǎn)：閉包中的局部變量永遠(yuǎn)不會(huì)被回收,容易造成內(nèi)存泄漏。
如何從外部讀取局部變量卢鹦？
出于種種原因臀脏，我們有時(shí)候需要得到函數(shù)內(nèi)的局部變量。但是冀自，正常情況下這是辦不到的揉稚，只有通過變通方法才能實(shí)現(xiàn)。
那就是在函數(shù)的內(nèi)部熬粗，再定義一個(gè)函數(shù)搀玖。
Js代碼
function f1(){
n=999;
function f2(){
alert(n); // 999
}
}
在上面的代碼中，函數(shù)f2就被包括在函數(shù)f1內(nèi)部驻呐，這時(shí)f1內(nèi)部的所有局部變量灌诅，對(duì)f2都是可見的。但是反過來(lái)就不行含末，f2內(nèi)部的局部變量猜拾，對(duì)f1 是不可見的。這就是Javascript語(yǔ)言特有的“鏈?zhǔn)阶饔糜颉苯Y(jié)構(gòu)（chain scope）佣盒，子對(duì)象會(huì)一級(jí)一級(jí)地向上尋找所有父對(duì)象的變量挎袜。所以，父對(duì)象的所有變量肥惭，對(duì)子對(duì)象都是可見的盯仪，反之則不成立。
既然f2可以讀取f1中的局部變量蜜葱，那么只要把f2作為返回值磨总，我們不就可以在f1外部讀取它的內(nèi)部變量了嗎！
Js代碼
function f1(){
n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
閉包的用途
閉包可以用在許多地方笼沥。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中奔浅。
怎么來(lái)理解這句話呢馆纳？請(qǐng)看下面的代碼。
Js代碼
function f1() {
var n = 999;
nAdd = function(){n+=1}汹桦；
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在這段代碼中鲁驶，result實(shí)際上就是閉包f2函數(shù)。它一共運(yùn)行了兩次舞骆，第一次的值是999钥弯，第二次的值是1000。這證明了督禽，函數(shù)f1中的局部變量n一直保存在內(nèi)存中脆霎，并沒有在f1調(diào)用后被自動(dòng)清除。
為什么會(huì)這樣呢狈惫？原因就在于f1是f2的父函數(shù)睛蛛，而f2被賦給了一個(gè)全局變量，這導(dǎo)致f2始終在內(nèi)存中胧谈，而f2的存在依賴于f1忆肾，因此f1也始終在內(nèi)存中，不會(huì)在調(diào)用結(jié)束后菱肖，被垃圾回收機(jī)制（garbage collection）回收客冈。
這段代碼中另一個(gè)值得注意的地方，就是“nAdd=function(){n+=1}”這一行稳强，首先在nAdd前面沒有使用var關(guān)鍵字场仲，因此 nAdd是一個(gè)全局變量，而不是局部變量键袱。其次燎窘，nAdd的值是一個(gè)匿名函數(shù)，而這個(gè)
匿名函數(shù)本身也是一個(gè)閉包蹄咖，所以nAdd相當(dāng)于是一個(gè)setter褐健，可以在函數(shù)外部對(duì)函數(shù)內(nèi)部的局部變量進(jìn)行操作。
使用閉包的注意點(diǎn)
1）由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中澜汤，內(nèi)存消耗很大蚜迅，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問題俊抵，在IE中可能導(dǎo)致內(nèi)存泄露谁不。解決方法是，在退出函數(shù)之前徽诲，將不使用的局部變量全部刪除刹帕。
2）閉包會(huì)在父函數(shù)外部吵血，改變父函數(shù)內(nèi)部變量的值。所以偷溺，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用蹋辅，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value）挫掏，這時(shí)一定要小心侦另，不要隨便改變父函數(shù)內(nèi)部變量的值。
思考題
如果你能理解下面代碼的運(yùn)行結(jié)果尉共，應(yīng)該就算理解閉包的運(yùn)行機(jī)制了褒傅。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //The Window
我們可以分解一下：
var func = object.getNameFunc(); //可以認(rèn)為 func 內(nèi)部的name為自由變量，func是在全局定義的袄友，因此name應(yīng)該在全局作用域查找殿托。
func() //The Window 此時(shí)this指向window
2. this 指向
this對(duì)象是在函數(shù)運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的：在全局函數(shù)中，this等于window杠河，而當(dāng)函數(shù)被當(dāng)作某個(gè)對(duì)象的方法調(diào)用時(shí)碌尔，this等于那個(gè)對(duì)象。
判斷方法：this和定義在哪兒無(wú)關(guān)券敌，函數(shù)運(yùn)行時(shí)唾戚，如果有. 運(yùn)算符，this指.前的對(duì)象待诅；如果沒有,this指window叹坦。若new關(guān)鍵字調(diào)用時(shí)，即構(gòu)造函數(shù)體內(nèi)部使用了this關(guān)鍵字卑雁，代表了所要生成的對(duì)象實(shí)例募书。有apply/call/bind時(shí)，指代第一個(gè)參數(shù)测蹲。
/例1/
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42; 當(dāng)foo函數(shù)被調(diào)用時(shí)莹捡，其本身是歸obj2所擁有
/例2/
function foo() {
console.log( this.a ); //自由變量
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo;
var a = "global"; // 全局對(duì)象的屬性
bar(); // "global" ;
- 函數(shù)柯里化；
http://www.reibang.com/p/2975c25e4d71
柯里化扣甲，Currying篮赢，是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)（最初函數(shù)的第一個(gè)參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)琉挖。
看這個(gè)解釋有一點(diǎn)抽象启泣，我們就拿被做了無(wú)數(shù)次示例的add函數(shù)，來(lái)做一個(gè)簡(jiǎn)單的實(shí)現(xiàn)示辈。
// 普通的add函數(shù)
function add(x, y) {
return x + y
}
// Currying后
function curryingAdd(x) {
return function (y) {
return x + y
}
}
add(1, 2) // 3
curryingAdd(1)(2) // 3
實(shí)際上就是把a(bǔ)dd函數(shù)的x寥茫，y兩個(gè)參數(shù)變成了先用一個(gè)函數(shù)接收x, 然后返回一個(gè)函數(shù)去處理y參數(shù)。現(xiàn)在思路應(yīng)該就比較清晰了矾麻，就是只傳遞給函數(shù)一部分參數(shù)來(lái)調(diào)用它纱耻，讓它返回一個(gè)函數(shù)去處理剩下的參數(shù)芭梯。
函數(shù)的length屬性返回函數(shù)預(yù)期傳入的參數(shù)個(gè)數(shù)
4. 原型與原型鏈；
https://wangdoc.com/javascript/oop/prototype.html
call/apply/bind 的聯(lián)系與區(qū)別
三者都可用于顯示綁定 this;
call/apply 的區(qū)別方式在于參數(shù)傳遞方式的不同膝迎；
fn.call(obj, arg1, arg2, ...)
fn.apply(obj, [arg1, arg2, ...])
call()方法接受的是若干個(gè)參數(shù)的列表粥帚，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。
bind 返回的是一個(gè)待執(zhí)行函數(shù)限次，是函數(shù)柯里化的應(yīng)用，而 call/apply 則是立即執(zhí)行函數(shù)
call 的源碼實(shí)現(xiàn)
Function.prototype.myCall = function(context) {
if (typeof context === 'object') {
context = context || window;
} else {
context = Object.create(null);//空對(duì)象柴灯，不會(huì)受到原型鏈的干擾卖漫。原型鏈終端指向 null，不會(huì)有構(gòu)造函數(shù)赠群，也不會(huì)有 toString羊始、 hasOwnProperty、valueOf 等屬性
}
console.log('myCall context->', context); //{name: "aaaaa"}
console.log('myCall this->', this);
// ? (msg) {
// console.log('我的名字' + this.name + msg);
// }
//用Symbol來(lái)做屬性 key 值查描，保持唯一性突委，避免沖突
let fn = Symbol();
// 在傳入的上下文對(duì)象中，創(chuàng)建一個(gè)屬性冬三，值指向方法 sayHi匀油，此時(shí)方法中的作用域已經(jīng)改變context
context[fn] = this;
//接收參數(shù),排除第一個(gè)參數(shù)this
let args = [...arguments].slice(1);
const result = context[fn](args);
//刪除避免永久存在
delete(context[fn]);
return result;
}
驗(yàn)證一下：
var mine = { name:'aaaaa' };
var person = {
name: 'bbbb',
sayHi: function(msg) {
console.log('我的名字' + this.name + msg);
}
}
console.log(person.sayHi.myCall(mine, '很高興見到你!')); //我的名字aaaaa很高興見到你!
應(yīng)用場(chǎng)景：
1、將類數(shù)組轉(zhuǎn)化為數(shù)組
Array.prototype.slice.call(arguments);
apply 的源碼實(shí)現(xiàn)
Function.prototype.myApply = function(context) {
if (typeof context === 'object') {
context = context || window;
} else {
context = Object.create(null);
}
let fn = Symbol();
//為上下文添加屬性勾笆， 值為方法this
context[fn] = this;
let result;
if (arguments[1]) {
//如果有參數(shù)數(shù)組敌蚜，參入this方法
result = context[fn](...arguments[1]);
} else {
result = context[fn]();
}
delete(context[fn]);
return result;
}
應(yīng)用場(chǎng)景：
1、求數(shù)組中的最大和最小值
Math.max() //只接收單獨(dú)的參數(shù)窝爪，通過下面的方法可以在數(shù)組上面使用max方法：
Math.max.apply(null, array)弛车； //會(huì)將array數(shù)組參數(shù)展開成單獨(dú)的參數(shù)再傳入
var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1
1、數(shù)組追加
Array.prototype.push.apply(arr1,arr2); //將一個(gè)數(shù)組拆開push到另一個(gè)數(shù)組中蒲每；不用apply則會(huì)將后續(xù)數(shù)組參數(shù)當(dāng)成一個(gè)元素push進(jìn)去纷跛。
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var total = [].push.apply(arr1, arr2);//6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]
Function.prototype.bind()
bind()方法主要就是將函數(shù)綁定到某個(gè)對(duì)象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)邀杏，函數(shù)體內(nèi)的this對(duì)象的值會(huì)被綁定到傳入bind()中的第一個(gè)參數(shù)的值贫奠，例如：f.bind(obj)，實(shí)際上可以理解為obj.f()淮阐，這時(shí)f函數(shù)體內(nèi)的this自然指向的是obj;
function f(y,z){
return this.x+y+z;
}
var m = f.bind({x:1},2);
console.log(m(3)); // 6
分析：
// 這里的bind方法會(huì)把它的第一個(gè)實(shí)參綁定給f函數(shù)體內(nèi)的this叮阅，所以f函數(shù)里的this即指向{x:1}對(duì)象；
// 從第二個(gè)參數(shù)起泣特，會(huì)依次傳遞給原始函數(shù)浩姥，這里的第二個(gè)參數(shù)2即是f函數(shù)的y參數(shù)；
// 最后調(diào)用m(3)的時(shí)候状您，這里的3便是最后一個(gè)參數(shù)z了勒叠，所以執(zhí)行結(jié)果為1+2+3=6兜挨；
// 分步處理參數(shù)的過程其實(shí)是一個(gè)典型的函數(shù)柯里化的過程（Curry）。
使用bind方法一
var a = {
b: function() {
var func = function() {
console.log(this.c);
}.bind(this);
func();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
使用bind方法二
var a = {
b: function() {
var func = function() {
console.log(this.c);
}
func.bind(this)();
},
c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello
bind 的源碼實(shí)現(xiàn)
Function.prototype.myBind = function(context) {
// bind 調(diào)用的方法一定要是一個(gè)函數(shù)
if (typeof this !== 'function') {
throw new TypeError('not a function');
}
var args = Array.prototype.slice.call(arguments, 1);
// 記住當(dāng)前作用域眯分，指向調(diào)用者拌汇。
let self = this;
let bound = function() {
// 將前后參數(shù)合并傳入
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
// 當(dāng)作為構(gòu)造函數(shù)時(shí)，this 指向?qū)嵗拙觯藭r(shí) this instanceof fBound 結(jié)果為 true噪舀，可以讓實(shí)例獲得來(lái)自綁定函數(shù)的值
return self.apply(this instanceof bound ? this : context || this, finalArgs);
}
// 還要考慮修改返回函數(shù)的prototype為綁定函數(shù)的prototype,使得實(shí)例可以繼承原型的值。
// 為了修改 bound.prototype時(shí)不影響原型的值飘诗，使用ES5的 Object.create()方法創(chuàng)建一個(gè)空對(duì)象与倡，繼承this的 prototype 屬性
bound.prototype = Object.create(this.prototype)
return bound;
}
// 測(cè)試用例
var value = 2;
var foo = {
value: 1
};
function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
}
bar.prototype.friend = 'kevin';
var bindFoo = bar.bind2(foo, 'Jack'); // bindFoo 為返回的bound函數(shù)
//使用new操作符創(chuàng)建對(duì)象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器，提供的 this 值被忽略(this 指向?qū)嵗齩bj)昆稿，同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)纺座。
var obj = new bindFoo(20); // 返回正確
// undefined
// Jack
// 20
obj.habit; // 返回正確
// shopping
obj.friend; // 返回正確
// kevin
obj.__proto__.friend = "Kitty"; // 修改原型
bar.prototype.friend; // Kevin
