JS 函數(shù)
函數(shù)分為兩類具名函數(shù)谬哀、匿名函數(shù)，其變型可以包括自執(zhí)行函數(shù)严肪、遞歸函數(shù)
-
具名函數(shù)
含有名字的函數(shù)
function say(){//...}定義了一個(gè)名稱為 say 的函數(shù) say();//調(diào)用名稱為 say 的函數(shù) var say = function(){//...} var say1 = function say(){//...}//不建議這樣寫 -
匿名函數(shù)
不含名字的函數(shù)
setTimeout(function(){ },100); li.onclick = function(){} -
自執(zhí)行函數(shù)
創(chuàng)建即執(zhí)行的函數(shù)史煎，可以創(chuàng)建塊級(jí)作用域
(function(){ //.. })(); -
遞歸函數(shù)
自己在某些條件下調(diào)用自己的函數(shù)
function calc(num){ if(num<1){ return 1; }else{ return num*calc(num-1); } } console.log(calc(4));//24 一個(gè)典型的階乘遞歸 1*2*3*4?
JS 作用域
概念：當(dāng)某個(gè)函數(shù)被調(diào)用時(shí)谦屑，會(huì)創(chuàng)建一個(gè)執(zhí)行環(huán)境及相應(yīng)的作用域（鏈），該執(zhí)行環(huán)境定論了變量或函數(shù)有權(quán)訪問的其它數(shù)據(jù)篇梭，決定了各自的行為
每一個(gè)執(zhí)行環(huán)境都有一個(gè)變量對(duì)象[[Scope]]氢橙，該對(duì)象保存著執(zhí)行環(huán)境中的所有變量和函數(shù)，我們的代碼無法訪問這個(gè)對(duì)象恬偷，JS 解析器在處理數(shù)據(jù)時(shí)會(huì)使用到它充蓝。
全局執(zhí)行環(huán)境
在 JS 中，根據(jù)宿主的不同喉磁，全局執(zhí)行環(huán)境對(duì)象也不同，對(duì)于 WEB 而言官脓，全局執(zhí)行環(huán)境是 window 對(duì)象协怒。
所有的全局變量和函數(shù)都是做為 window 對(duì)象的屬性和方法創(chuàng)建的。
var name = "zhar";
function say(){
console.log(name);
}
console.log(name);//zhar
console.log(window.name);//zhar
say();//zhar
window.say();//zhar
局部執(zhí)行環(huán)境
每個(gè)函數(shù)有自己的執(zhí)行環(huán)境卑笨。
當(dāng)執(zhí)行流進(jìn)入一個(gè)函數(shù)時(shí)孕暇，函數(shù)的環(huán)境會(huì)被推入一個(gè)環(huán)境棧中。函數(shù)執(zhí)行完成后赤兴，棧將環(huán)境推出妖滔。
作用域鏈
當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)，會(huì)創(chuàng)建一個(gè)作用域鏈對(duì)象（scope chain）桶良。
作用域鏈的首位座舍，始終是當(dāng)前執(zhí)行環(huán)境的變量對(duì)象。這是一個(gè)包含 arguments 和其它命名參數(shù)值的活動(dòng)對(duì)象陨帆。第二位是外部函數(shù)的活動(dòng)對(duì)象曲秉，第三位是外部函數(shù)的外部函數(shù)的活動(dòng)對(duì)象，......疲牵，直到作為作用域終點(diǎn)的全局執(zhí)行環(huán)境承二。
var name = "zhar";
function say(){
var age = 30;
console.log(name+"-"+age+"-"+address);// 錯(cuò)誤：address is not defined
function info(){
var address = "北京";
console.log(name+"-"+age+"-"+address);//zhar-30-北京
}
info()
}
say();//
console.log(name+"-"+age+"-"+address);// 錯(cuò)誤：age is not defined
這段代碼共有三個(gè)執(zhí)行環(huán)境：全局環(huán)境（window）、say()局部環(huán)境纲爸、info()局部環(huán)境亥鸠。
在全局環(huán)境中有一個(gè)變量 name 和一個(gè)函數(shù) say，在 say 中有一個(gè)變量 age 和一個(gè)函數(shù) info识啦，在 info 中有一個(gè)變量 address负蚊。通過報(bào)錯(cuò)信息可以看到，say 中可以訪問到當(dāng)前環(huán)境中的 age 及全局環(huán)境中的 name颓哮，info 可以訪問到當(dāng)前環(huán)境中的 address盖桥、say 環(huán)境中的 age、全局環(huán)境中的 name题翻，而在 window 環(huán)境中則只可以訪問到 name揩徊。
可以得出：內(nèi)部環(huán)境可以通過作用域鏈訪問到所有的外部環(huán)境腰鬼，但外部環(huán)境不能訪問內(nèi)部環(huán)境中的任何變量或函數(shù)。
作用域鏈?zhǔn)怯袑蛹?jí)塑荒、線性的熄赡；
JS 在查找變量時(shí)，在當(dāng)前環(huán)境查找到變量便停止繼續(xù)向上搜索
var name = 'zhar';
function say(){
var name = 'tom';
console.log(name);//tom
}
say();
console.log(name);//zhar
作用域鏈?zhǔn)疽鈭D：
沒有塊級(jí)作用域
在 JS 中并沒有像強(qiáng)類型語言中的塊級(jí)作用域齿税，比如在 JAVA 中一對(duì)花括號(hào)中彼硫，是一個(gè)塊級(jí)的作用域
var name = 'zhar'
if(true){
var name = 'tom';
}
console.log(name);
//按著上面作用域鏈中描述的情況，name 應(yīng)該輸出為 zhar凌箕，但實(shí)際情況為 tom拧篮，便是因?yàn)樵?JS 中沒有塊級(jí)作用域的概念
//另外一種塊級(jí)作用域的典型情況為 for 循環(huán)
for(var i=0;i<5;i++){
//dosomething
}
console.log(i);//5
變量提升
var name = 'zhar';
function say(){
console.log(name);//undefined
var name = 'tom';
}
say();
上面的示例代碼中就存在著變量提升
-
聲明式
say();//運(yùn)行正常 function say(){ console.log("Hello"); }此為聲明式語句，JS 解析器會(huì)將聲明式語句提升至當(dāng)前執(zhí)行環(huán)境的頂端
-
賦值式
將上面的代碼更改如下：
say();//運(yùn)行錯(cuò)誤 Uncaught TypeError: say is not a function var say = function(){ console.log("Hello"); }此為賦值式語句牵舱，JS 解析器會(huì)將賦值式語句提升到當(dāng)前執(zhí)行環(huán)境的頂端串绩，并且賦值為 undefined
更加直接的例子便是該知識(shí)點(diǎn)開始的代碼
JS閉包
概念：外部函數(shù)返回的，持有外部函數(shù)局部變量的內(nèi)部函數(shù)
（有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)）
換句話說芜壁，JS 中任意一個(gè)函數(shù)都能成為閉包函數(shù)
創(chuàng)建閉包
通常就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)（匿名）函數(shù)
function say(){
var name = "zhar";
return function(){
return name+"-30";
}
}
//獲取閉包
var hi = say();//Function
console.log(hi());//zhar-30
上面示例中礁凡，第三行代碼做為 say 方法的一個(gè)內(nèi)部函數(shù)，訪問了外部的 name 屬性慧妄，該函數(shù)被返回顷牌，在其它地方被調(diào)用時(shí)，仍然可以訪問到 say 方法內(nèi)的 name 屬性
根據(jù)前面所學(xué)的作用域鏈的知識(shí)塞淹，可以得出匿名函數(shù)中 包含了外部作用域中的 name 屬性的引用窟蓝，當(dāng)匿名函數(shù)被返回后，它的作用域鏈包含上級(jí)函數(shù)（say）的活動(dòng)對(duì)象（name）饱普。這樣疗锐，當(dāng) say 函數(shù)執(zhí)行完成后，其活動(dòng)對(duì)象也并不會(huì)被銷毀费彼，因?yàn)槟涿瘮?shù)的作用域鏈仍然在引用這個(gè)活動(dòng)對(duì)象滑臊。
由于閉包所引用的變量不會(huì)被自動(dòng)銷毀的特性，在使用閉包時(shí)要非常小心箍铲，有可能會(huì)引起內(nèi)存占用過多
閉包常見場(chǎng)景
-
循環(huán)添加事件 BUG
var lis = document.querySelectorAll("li"); for(var i=0;i<lis.length;i++){ lis[i].onclick = function(){ console.log(this.innerHTML,i); } } //在上面的代碼中雇卷，innerHTML能夠得到正確的值，但 i 并不能颠猴，這是由于在 onclick 所指定的匿名函數(shù)中使用了外部環(huán)境中的同一個(gè)活動(dòng)對(duì)象 "i"关划，當(dāng)外部環(huán)境執(zhí)行完成后，i 的值是 lis 的長(zhǎng)度翘瓮，所以引用了所有 i 的對(duì)象值都變?yōu)榱?lis的長(zhǎng)度 //修改代碼如下： for (var i = 0; i < lis.length; i++) { lis[i].onclick = (function(index) { return function() { console.log(lis[index].innerHTML, index); } })(i); } //修改后的代碼將 onclick 指定的匿名函數(shù)改為了立即執(zhí)行贮折，并將外部環(huán)境的 i 值做為參數(shù)傳遞給該函數(shù)(參數(shù)是做為值傳遞)，而在匿名函數(shù)內(nèi)部资盅，由一個(gè)閉包函數(shù)來引用 index //另一種方法(這種方法只是做為一種擴(kuò)展调榄，與本知識(shí)點(diǎn)無關(guān)) for (var i = 0; i < lis.length; i++) { lis[i].index = i; lis[i].onclick = function() { console.log(this.innerHTML, this.index); }; } -
使用閉包封裝一個(gè)完整的對(duì)象操縱功能
對(duì)于一些封裝踊赠，開發(fā)者并不想對(duì)外暴露一些屬性或變量，此時(shí)每庆，可通過閉包來創(chuàng)建
var PERSON = function() { var obj = { name: "zhar", age: 30, address: "北京" }; return { get: function(pName) { return obj[pName]; }, add: function(pName, pVal) { obj[pName] = pVal; }, del: function(pName) { delete obj[pName]; }, update: function(pName, pVal) { obj[pName] = pVal; } } }(); console.log(PERSON.get("name"));//zhar PERSON.add("desc","175"); console.log(PERSON.get("desc"));//175 PERSON.del("age"); console.log(PERSON.get("age"));//undefined
關(guān)于作用域筐带、閉包的一些經(jīng)典題目
function f1() {
var n = 999;
nAdd = function() {
n += 1
}
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result();
nAdd();
result();
function show(i) {
var a = i;
function inner() {
a = 10;
console.log(1,a);
}
inner();
console.log(2,a);
}
var a = 0;
show(5);
console.log(3,a);
var too = "old";
if (true) {
var too = "new";
}
console.log(1,too);
function test() {
var too = "new";
}
test()
console.log(2,too);
var i = 0;
function outPut(i) {
console.log(i)
}
function outer() {
outPut(i);
function inner() {
outPut(i);
var i = 1;
outPut(i);
}
inner();
outPut(i);
}
outer();
function fun(n, o) {
console.log(o)
return {
fun: function(m) {
return fun(m, n);
}
};
}
var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);
c.fun(2);
c.fun(3);
var a = function(){
a=2;
console.log(1111,a);
}
function a(){
a=1;
console.log(2222,a);
}
a();
a();
this
this 是 JS 中的一個(gè)關(guān)鍵字，代表了函數(shù)運(yùn)行時(shí)缤灵，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象伦籍，只能在函數(shù)內(nèi)部使用
我們要討論的是 this 的指向
this 的指向并不能在創(chuàng)建是就決定了，而是由執(zhí)行環(huán)境決定的
this 指向
全局環(huán)境（純粹的函數(shù)調(diào)用）
在全局環(huán)境下腮出，this 就代表 window（這是針對(duì) WEB 應(yīng)用來講的）
var name = 'zhar';
function say(){
console.log(this.name);//zhar
}
say();
同樣帖鸦，在 setTimeout 或 setInterval 這樣的延時(shí)函數(shù)中調(diào)用也屬于全局對(duì)象
var name = 'zhar';
setTimeout(function(){
console.log(this.name);//zhar
},0);
對(duì)象環(huán)境
var obj = {
name : "zhar",
say : function(){
console.log(this.name);//zhar
}
}
obj.say();
如上面的代碼所示，函數(shù)被其所必對(duì)象調(diào)用胚嘲，那么 this 便指向 obj 對(duì)象
觀察下面的代碼
var name = 'tom';
var obj = {
name : "zhar",
say : function(){
console.log(this.name);
}
}
var fun = obj.say;
fun();//輸出 ?
另外一種情況：
var name = 'tom';
var obj = {
name : "zhar",
say : function(){
return function(){
console.log(this.name);
}
}
}
obj.say()();//輸出 作儿？
構(gòu)造函數(shù)環(huán)境
構(gòu)造函數(shù)中 this 會(huì)指向創(chuàng)建出來的一個(gè)對(duì)象，使用new調(diào)用構(gòu)造函數(shù)時(shí)慢逾，會(huì)先創(chuàng)建出一個(gè)空對(duì)象，然后調(diào)用call函數(shù)把構(gòu)造函數(shù)中的指針修改為指向這個(gè)空對(duì)象灭红，執(zhí)行完構(gòu)造函數(shù)后侣滩，這個(gè)空對(duì)象也就有了相關(guān)的屬性方法并返回這個(gè)對(duì)象。
function Person() {
this.name = 'zhar';
}
var p = new Person();
console.log(p.name);
構(gòu)造函數(shù)不需要返回值变擒，如果指定返回值要小心君珠，指定返回一個(gè)對(duì)象，則 this 的指向?qū)l(fā)生變化
function Person() {
this.name = 'zhar';
return {};
}
var p = new Person();
console.log(p.name);//undefined
//--------------------------------------
function Person() {
this.name = 'zhar';
return {name:'tom'};
}
var p = new Person();
console.log(p.name);//tom 如果構(gòu)造函數(shù)返回對(duì)象(Object,Array,Function)娇斑，那 this 將指向這個(gè)對(duì)象策添，其它基礎(chǔ)類型則不受影響
//--------------------------------------
function Person() {
this.name = 'zhar';
return 1;//number string boolean 等
}
var p = new Person();
console.log(p.name);//zhar
事件環(huán)境
在 DOM 事件中使用 this，this 指向了觸發(fā)事件的 DOM 元素本身
li.onclick = function(){
console.log(this.innerHTML);
}
更改 this 指向
-
使用局部變量替代
var name = "zhar"; var obj = { name : "zhar", say : function(){ var _this = this;//使用一個(gè)變量指向 this setTimeout(function(){ console.log(_this.name); },0); } } obj.say();?
-
使用 call 或 apply 方法
call 是函數(shù)的一個(gè)方法毫缆，MDN上的官方定義為：call方法調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的
this值和分別提供的參數(shù)語法：
fun.call(thisObj[,arg1[,arg2[,...]]])通俗來講：call 用來更改 this 的指向
通過一系列代碼來展示 call 的用法：
var name = 'zhar'; function say(){ console.log(this.name); }; say();//zhar; var obj = { name : 'tom', say : function(){ console.log(this.name); } } say.call(obj);//tom 將 say 函數(shù)中的 this 替換為傳入的對(duì)象 obj.say();//tom obj.say.call(null);//zhar 將 obj.say 函數(shù)的 this 替換為了 null唯竹，也就意味著指向了全局環(huán)境//前面課程的繼承代碼 function Person(){ this.name = "人"; } function Student(){ Person.call(this,null); } var s = new Student(); console.log(s.name);li.onclick = function(){ console.log(this.innerHTML);//此處的 this 代表著 DOM 元素 function update(){ this.innerHTML += " new "; } //update();//這樣做的話，this 的指向?qū)⒆優(yōu)閣indow update.call(this);//通過 call 方法修改函數(shù)內(nèi) this 的指向 }//call 的傳參 function say(arg1,arg2){ console.log(this.name,arg1,arg2); }; var obj = { name : 'tom', say : function(){ console.log(this.name); } } say.call(obj,'one','two');//tom one two?
apply
applay 與 call 的作用相同苦丁，不同之處在于傳參的形式浸颓，apply 是以數(shù)組的形式傳遞參數(shù)的，而 call 方法的參數(shù)可以是任意類型
//apply 的傳參 function say(arg1,arg2){ console.log(this.name,arg1,arg2); }; var obj = { name : 'tom', say : function(){ console.log(this.name); } } say.apply(obj,['one','two']);//tom one two
堆棧
理解了堆棧內(nèi)存才會(huì)對(duì)值引用和地址引用有更好的理解
棧（stack）和堆（heap）
stack 為自動(dòng)分配的空間旺拉，它由系統(tǒng)自動(dòng)釋放
heap 為動(dòng)態(tài)分配的內(nèi)存产上，大小不定也不會(huì)自動(dòng)釋放
基本數(shù)據(jù)類型存放于棧內(nèi)存中，Undefined Null String Number Boolean蛾狗，它們是直接按值存放的晋涣，可以直接訪問
引用數(shù)據(jù)類型存放于堆內(nèi)存中，變量只是保存的一個(gè)指針沉桌，該指針指向堆內(nèi)存中的地址谢鹊，當(dāng)訪問引用類型數(shù)據(jù)（Array算吩、Object、Function等）時(shí)撇贺，先從棧中獲得該對(duì)象的指針赌莺，再?gòu)亩阎腥〕鰧?duì)象的數(shù)據(jù)
值傳遞與地址傳遞
var a = 10;
var b = a;
b = 20;
console.log(a,b);
//以上的代碼修改 b 的值并不會(huì)影響 a 的值
var a = [1,2,3,4];
var b = a;
var c = a[0];
console.log(b);
console.log(c);
b[0] = 9;
c = 10;
console.log(a);//[9,2,3,4]
//以上代碼可以看出 當(dāng)改變 b 中的數(shù)據(jù)時(shí)，a 中的數(shù)據(jù)也發(fā)生了變化松嘶；改變 c 的 數(shù)據(jù)時(shí)艘狭，a 不會(huì)受影響
//a 是數(shù)組，屬引用類型翠订，當(dāng)將 a 賦值給 a 時(shí)巢音，傳遞的是棧中的地址，而不是堆內(nèi)存中的對(duì)象尽超。
//而 c 只是從 a 堆內(nèi)存中獲取的一個(gè)數(shù)據(jù)值官撼，保存于棧中。修改 c 時(shí)似谁，是在棧中直接修改
淺拷貝與深拷貝
在定義引用數(shù)據(jù)類型時(shí)傲绣，變量存放的只是一個(gè)地址。當(dāng)使用對(duì)象拷貝巩踏，傳遞的也只是一個(gè)地址秃诵。因此在訪問拷貝對(duì)象屬性時(shí)，會(huì)根據(jù)地址找到源對(duì)象指向的堆內(nèi)存中塞琼。
?
淺拷貝
var obj1 = {
name : "zhar",
desc : ["北京"]
}
function copy(o1){
var newObj = {};
for(var key in o1){
newObj[key] = o1[key];
}
return newObj;
}
// var obj2 = obj1;
var obj2 = copy(obj1);
obj2.name = "tom";
obj2.desc.push("昌平");
console.log(obj1);//{ name: 'zhar', desc: [ '北京', '昌平' ] }
深拷貝
var obj1 = {
name : "zhar",
desc : ["北京"]
}
function copy(obj,target){
var newObj = target || {};
console.log(obj)
for(var key in obj){
if(typeof obj[key] === "object"){
newObj[key] = (obj[key].constructor===Array)?[]:{};
copy(obj[key],newObj[key]);
}else{
newObj[key] = obj[key];
}
}
return newObj;
}
var obj2 = copy(obj1);
垃圾回收
Javascript 具有自動(dòng)垃圾回收機(jī)制菠净，執(zhí)行環(huán)境會(huì)管理代碼執(zhí)行過程中使用的內(nèi)存。
使我們不必像 C 或 C++開發(fā)者那樣彪杉，手動(dòng)去管理內(nèi)存的釋放毅往。
自動(dòng)回收機(jī)制原理：
垃圾回收器按照固定的時(shí)間間隔找出不再繼續(xù)使用的變量，然后釋放其占用的內(nèi)存派近。
兩種策略：
-
標(biāo)記清除
最常用的垃圾回收方式攀唯。當(dāng)變量進(jìn)入環(huán)境時(shí)，將變量標(biāo)記為"進(jìn)入環(huán)境"渴丸；當(dāng)變量離開環(huán)境時(shí)革答，將其標(biāo)記為"離開環(huán)境"。
到2008年曙强，各瀏覽器使用的清除策略都是標(biāo)記清除残拐，差別在于時(shí)間間隔不同
-
引用計(jì)數(shù)
引用計(jì)數(shù)是跟蹤每個(gè)值被引用的次數(shù)；當(dāng)有一個(gè)變量被引用時(shí)碟嘴，則這個(gè)值的引用次數(shù)加1溪食，當(dāng)取消一個(gè)引用時(shí)，次數(shù)減1娜扇。當(dāng)引用值變?yōu)? 時(shí)错沃，將由垃圾收集器回收
引用計(jì)數(shù)方式有嚴(yán)重的問題栅组，就是，當(dāng)變量相互引用時(shí)枢析，如：
var obj1 = {} var obj2 = {} obj1.a = obj2; obj2.b = obj1;對(duì)于上面的代碼玉掸，存在相互引用，其引用計(jì)數(shù)永遠(yuǎn)為2醒叁，就會(huì)導(dǎo)致對(duì)象永遠(yuǎn)不會(huì)被回收司浪。
obj = null;
