執(zhí)行上下文可以理解為當(dāng)前代碼的執(zhí)行環(huán)境,它會(huì)形成一個(gè)作用域。
- 范圍:一段< script >或者一個(gè)函數(shù)
- 全局:變量定義,函數(shù)聲明 (在一段< script >里)
- 函數(shù):變量定義,函數(shù)聲明,this,arguments
console.log(a);var a = a; fn('dong');function(){}
這段代碼中現(xiàn)將var a與函數(shù)fn()提出來放在執(zhí)行代碼之前
++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==windowfn1;
this要在執(zhí)行時(shí)才能確認(rèn)值,定義時(shí)無法確認(rèn).
作為構(gòu)造函數(shù)執(zhí)行
function Foo(name){ this.name = name; }var f = new ('dong');
作為對(duì)象屬性執(zhí)行
var obj = { name :'a', printName:function(){ console.log(this.name); } } obj.printName(); //a
作為普通函數(shù)執(zhí)行
function fn(){ console.log(this);//this===window}
call apply bind
//callfunction fn1(name,age){ alert(name,age); console.log(this); } fn1.call({x:100},'dong',200);//彈出dong 200//打印{x:100}//call將this指向第一個(gè)參數(shù)的值//常用它來改變函數(shù)的this值//apply與call類似//bindfunction fn1(name,age){ alert(name); console.log(this); } fn.call({x:100},'dong',20);//this為{x:100}var fn2 =function (name,age){ alert(name); console.log(this); }.bind({y:200});//必須用函數(shù)表達(dá)式的方式fn2.call('dong',20); //this為{y:200}
++作用域++
//無塊級(jí)作用域if(true){ var name = 'dong'; } console.log(name);//函數(shù)和全局作用域var a =100; function fn(){ var a =200; console.log('fn',a); } console.log('global',a);fn();
++作用域鏈++
一個(gè)自由變量,一直不斷地往父級(jí)作用域上找,形成的一個(gè)鏈?zhǔn)浇Y(jié)構(gòu),就叫作用域鏈。
var a = 100;function(){ var b = 200; console.log(a);//當(dāng)前作用域中沒有定義a,a就是自由變量 console.log(b); }
var a = 100;function F1(){ var b =200; function F2(){ var c = 300; console.log(a); console.log(b); console.log(c); } }
++閉包++
函數(shù)作為返回值
函數(shù)作為參數(shù)來傳遞
function F1(){ var a = 100; return function(){ console.log(a); } }var f1 = F1();//表示變量f1是一個(gè)函數(shù)var a = 200; f1(); //100//全局里的a與在F1作用域里的a是沒有關(guān)系的,一個(gè)函數(shù)的父級(jí)作用域是它定義時(shí)候的作用域而不是它執(zhí)行的作用域,所以a這個(gè)自由變量直接在它的父級(jí)作用域中直接找到。
function F1(){ var a = 100; return function(){ console.log(a); } }var f1 = F1();function F2(fn){ var a = 200; fn(); } F2(f1);//100
相關(guān)題目
對(duì)變量提升的理解
說明this幾種不同的使用場(chǎng)地
作為構(gòu)造函數(shù)執(zhí)行;作為對(duì)象屬性執(zhí)行;作為普通對(duì)象執(zhí)行;call apply bind (具體代碼見上部分)
- 創(chuàng)建10個(gè)< a >標(biāo)簽,點(diǎn)擊的時(shí)候出來對(duì)應(yīng)的序號(hào)
//考察作用域var i,a;for(var i = 0;i<10;i++){ a = document.creatElement('a'); a.innerHTML = i +<br/>; a.addEventListener('click',function(e){ e.preventDefault(); alert(i); //自由變量需要從父級(jí)作用域獲取值 }) document.body.appendChild(a); }//這時(shí)候監(jiān)聽事件里的函數(shù)的自由變量,已經(jīng)變?yōu)?0了,所以,不管點(diǎn)擊哪個(gè)它的序號(hào)都是10
//正確方法var i;for (i = 0;i < 10;i++){ (function(i){ var a = document.creatElement('a'); a.addEventListener('click',function(e){ e.preventDefault(); alert(i); }) document.body.appendChild(a); })(i);//自調(diào)用函數(shù)立即執(zhí)行}//(function(i){})(i)//自執(zhí)行函數(shù),就是不用調(diào)用,只要定義完成就能立即執(zhí)行的函數(shù)
理解作用域
自由變量;作用域鏈,即自由變量的查找;閉包的兩個(gè)場(chǎng)景。
實(shí)際開發(fā)中閉包的應(yīng)用(作用域的實(shí)際應(yīng)用)
//主要作用用于封裝變量,收斂權(quán)限funciton isFirstLoad(){ var _list = []; return function(id){ if(_list.indexOf(id) >= 0){ return false; }else{ _list.push(id); return true; } } }//使用var firstLoad = idFirstLoad(); firstLoad(10); //truefirstLoad(10); //falsefirstLoad(20); //true//在isFirstLoad函數(shù)外面,根本不可能修改掉__ list的值
相關(guān)推薦:
javascript作用于作用域鏈實(shí)例分享
javascript中關(guān)于作用于作用域鏈的詳解
Javascript-作用域和作用域鏈及閉包的詳解(圖文)
以上就是JS作用域鏈和閉包實(shí)例分享的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!