function Foo(name,age){ this.name=name this.age=age this.class='class-1' //return this?//默認有這一行 } var f=new Foo('zhangsan',20) //var f1=new Foo('lisi',22) //創建多個對象
構造函數-擴展
var a={} //其實是var a=new Object()的語法糖 var b=[] //其實是var b=new Array()的語法糖 function Foo(){...} //其實是var Foo=new Function(...) 使用instanceof判斷一個函數是否是一個變量的構造函數 所有的引用類型（對象、數組、函數）都有構造函數，a的構造函數是Object()，b的構造函數是Array()，Foo的構造函數是Function()。所以假如想要判斷一個變量是否為數組就可以使用 var a={} a instanceof Array //false
原型規則和實例（熟記）
所有的引用類型都具有對象特性，即可自由擴展屬性（null除外）
所有引用類型都有一個__proto__（隱式原型屬性），屬性值是一個普通的對象
所有函數都有一個prototype （顯式原型屬性），屬性值也是一個普通的對象
所有引用類型的__proto__屬性值指向它的構造函數的prototype的屬性值
當試圖得到一個引用類型的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的__proto__(即它構造函數的prototype)中尋找 var obj={};obj.a=100; var arr=[];arr.a=100; function fn(){} fn.a=100
范圍：一段<script>或者一個函數?或者eval代碼 全局：變量定義、函數聲明?（提前拿出來）?? ? ? ? ? ? ? ? ? ?針對一段<script> 函數：變量定義、函數聲明、this、arguments ?（提前拿出來）? ? ? ? ? ??? ? ? ??針對一個函數 eval不常用，也不推薦大家用。 在一段js代碼拿過來真正一句一句運行之前，瀏覽器已經做了一些“準備工作”，在“準備工作”中完成了哪些工作： 1.變量、函數表達式——變量聲明，默認賦值為undefined； 2.this——賦值； 3.函數聲明——賦值； 這三種數據的準備情況我們稱之為“執行上下文”或者“執行上下文環境”。 ps：注意函數聲明和函數表達式的區別 //函數聲明 function fn(){ ??//..... } //函數表達式 var fn1=function(){ //..... } //全局console.log(a);?//undefined var a=100 fn('zhangsan')?//zhangsan 20 function fn(name){ //函數 console.log(this); //Window console.log(arguments);?//"zhangsan" age=20 console.log(name,age); var age ??//age會提前 }
this
this要在執行時才確認值，定義時無法確認 var a={ name:'A', fn:function(){ console.log(this.name); } } a.fn()?//this===a a.fn.call({name:'B'})?//this==={name:'B'} var fn1=a.fn fn1()?//this===Window
- 作用域
js沒有塊級作用域 if(true){ var name='zhangsan' } console.log(name);?//zhangsan 只有函數和全局作用域 var a=100 function fn(){ var a=200 console.log('fn',a) } console.log('global',a) ?//global 100 fn()?//fn 200
?作用域鏈
自由變量 var a=100 function fn(){? ?? var b=200? ?? console.log(a)?//當前作用域沒定義的變量，即'自由變量'? ?? console.log(b) } fn()?//100 200 調用在當前作用域不存在的變量，便會向父級作用域查找。需要注意的是，父級作用域是函數定義時產生的，并非函數調用時。 var a=100 function F1(){ var b=200 function F2(){ var c=300 console.log(a)?//a是自由變量，在F2中未找到便向父級作用域F1查找，仍未找到，繼續向上查找，在Window中找到 console.log(b)?//b是自由變量 console.log(c) } F2() } F1()?//100 200 300
- 閉包
使用場景，函數作為返回值；函數作為參數傳遞 //閉包的使用場景：函數作為返回值 function F1(){ var a=100 //返回一個函數 return function(){ console.log(a)?//自由變量，父作用域查找，仍未找到，繼續向上查找，在Window中找到 } } //f1得到一個函數 var f1=F1() var a=200 f1()? //100 ?? //閉包的使用場景：函數作為參數傳遞 function F1(){ var a=100 return function(){ console.log(a)?//自由變量，父作用域查找 } } var f1=F1() function F2(fn){ var a=200 fn() } F2(f1)?//100#####解題##### **1.說一下對變量提升的理解** 在ES6之前，JavaScript沒有塊級作用域(一對花括號{}即為一個塊級作用域)，只有全局作用域和函數作用域。變量提升即將變量聲明提升到它所在作用域的最開始的部分。 在<script>或函數中，各個變量、函數的聲明與定義會被提前 執行上下文。變量、函數表達式、this、函數聲明，這幾種數據的準備情況稱之為“執行上下文” **2.說明this幾種不同的使用場景** this的幾種執行情況：
作為構造函數執行
作為對象屬性執行
作為普通函數執行
call apply bind
//構造函數 function Foo(name){ this.name=name } var f=new Foo('zhangsan') //對象屬性 var obj={ name:'zhangsan', printName:function(){ console.log(this.name) } } obj.printName() //普通函數 function fn(){ console.log(this); } fn() ? ?//window //call apply bind function fn1(name,age){ alert(name) console.log(this) ? ? } fn1.call({x:100},'zhangsan',20) ???//({x:100} //apply fn1.apply({x:100},['zhangsan',20]) ???//({x:100} call, apply方法區別是,從第二個參數起, call方法參數將依次傳遞給借用的方法作參數, 而apply直接將這些參數放到一個數組中再傳遞 //bind var fn2=function (name,age){?//bind在函數聲明的形式后不可用，必須是函數表達式 alert(name) console.log(this) }.bind({y:200}) fn2('zhangsan',20) ??//{y: 200} **3.創建10個```<a>```標簽，點擊時彈出對應序號** //錯誤的寫法 var i,a; for(i=0;i<10;i++){ //除了click函數內部，都為全局作用域，會被覆蓋。因此最終 i 的值為10 //全局作用域 a = document.createElement('a'); a.innerHTML = i+'</br>' ; a.addEventListener('click',function(e){ e.preventDefault(); alert(i); ?//i為自由變量，向上去父作用域查找時，值已經變成10. 因為click事件執行時，其它部分早已執行完畢。 })???????? document.body.appendChild(a); } //正確的寫法 var i for(i=0;i<10;i++){ //多包了一層，除了click函數，其它變量的作用于都變成了函數作用域，而不是全局作用域，因此不會被覆蓋。相當于創建了10個函數 (function(i){ ? ? ? //函數作用域 var a=document.createElement('a') a.innerHTML=i a.addEventListener('click',function(e){ e.preventDefault() alert(i) ??//i為自由變量，向上去父作用域查找，就找到調用時的i值 （加粗處） }) document.body.appendChild(a) })(i) } 工作實例： 不用閉包 結果永遠是i的最大值+1，因此必須使用閉包 **4.如何理解作用域** 回答要點： 自由變量 ???//當前作用域沒定義的變量，即'自由變量'? ?? 作用域鏈，即自由變量的查找 閉包的兩個場景 **5.實際開發中閉包的應用** //閉包實際應用中主要用于封裝變量，收斂權限 function isFirstLoad(){ var _list=[] return function(id){ if(_list.indexOf(id)>=0){ return false }else { _list.push(id) return true } } } //使用 var firstLoad=isFirstLoad()9 firstLoad(10) //true firstLoad(10) //false firstLoad(20) //true //在isFirstLoad函數外，無法修改_list的值
