題目:
1: 說(shuō)一下對(duì)變量提升的理解
2: 說(shuō)明 this 的幾種不同使用場(chǎng)景
3: 創(chuàng)建 10 個(gè) < a > 標(biāo)簽,點(diǎn)擊的時(shí)候彈出響應(yīng)的序列號(hào)
4: 如何理解作用域
5: 實(shí)際開(kāi)發(fā)中閉包的應(yīng)用
知識(shí)點(diǎn)
執(zhí)行上下文
- 范圍: 一段< script >或者一個(gè)函數(shù)中
- 全局: 變量定義, 函數(shù)聲明
- 函數(shù): 變量定義, 函數(shù)聲明, this, arguments
PS:注意函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
<script>
console.log(a); // undefind
var a = 100;
fn('jiangdeng'); //jiangdeng 20
function fn(name) {
// var age = undefind;
age = 20;
console.log(name,age);
var age; //會(huì)被提到此函數(shù)內(nèi)的頂部
}
<script>
- 解析 : 一個(gè) < script > 標(biāo)簽內(nèi)的所有代碼,在一個(gè)< script >中定義一個(gè)全局的上下文;在執(zhí)行第一行之前,首先會(huì)把所有的變量聲明,函數(shù)聲明拿出來(lái);先把 var a 拿到上面來(lái),這個(gè)時(shí)候還沒(méi)給它賦值成100,先用undefind來(lái)代替一下;然后第五行有一個(gè)函數(shù)聲明,把整個(gè)函數(shù)拿到上面來(lái); 在執(zhí)行這塊的時(shí)候先做了兩件事,把 a 的聲明拿上來(lái) 并通過(guò)undefined賦值來(lái)占位,然后把函數(shù)拿到上面來(lái);
- 注意: 寫(xiě)代碼的時(shí)候要先聲明,然后執(zhí)行
函數(shù)聲明方式
//fn(); 可以執(zhí)行;執(zhí)行的時(shí)候會(huì)把聲明的函數(shù)提到前面去
function fn(){
//函數(shù)聲明
console.log('函數(shù)聲明的方式,函數(shù)可以前置執(zhí)行')
}
//fn1(); 不能執(zhí)行,走到 var fn1的時(shí)候fn1不是一個(gè)函數(shù),這個(gè)時(shí)候fn1提到前面去就是 var fn1 = undefind;
var fn1 = function(){
//函數(shù)表達(dá)式
console.log('函數(shù)表達(dá)式的方式,函數(shù)不能前置執(zhí)行')
}
console.log(a);
var a = 100; //會(huì)報(bào)錯(cuò),原因同上
//相當(dāng)于 var a = undefind;
//然后執(zhí)行console.log(a)的時(shí)候 a 等于 undefind;>報(bào)錯(cuò)
//最后 a = 100;
// 用函數(shù)聲明的方式相當(dāng)于把fn拿到前面去了;
fn('jiangdeng'); //jiangdeng
function fn(name,age) {
console.log(name,age);
}
fn('jiangdeng'); //jiangdeng 20
function fn(name) {
age = 20;
console.log(name,age);
var age;
}
- 在函數(shù)里面也是一樣的,在執(zhí)行之前,后面的 var age 會(huì)被提前到前面去;
this
- this 要在執(zhí)行時(shí)才能確認(rèn)值,定義時(shí)無(wú)法確認(rèn)
var a = {
name:'A',
fn:function () {
console.log(this.name)
}
}
a.fn();// "A"; this === a
a.fn.call({name:'B'}) // "B"; this === {name:"B"}
var fn1 = a.fn;
fn1(); // undefind; this === window;作為普通函數(shù)執(zhí)行 這個(gè)時(shí)候的 this 是 window
回答問(wèn)題:說(shuō)明 this 的幾種不同使用場(chǎng)景?
- 作為構(gòu)造函數(shù)執(zhí)行
- 作為對(duì)象屬性執(zhí)行
- 作為普通函數(shù)執(zhí)行 這個(gè)時(shí)候的 this 是 window
- call apply bind
代碼演示
- 構(gòu)造函數(shù)中的this
function Foo(name,age) {
this.name = name;
this.age = age;
return this;
}
var f = new Foo('jiangdeng',22);
- 對(duì)象屬性中的this
var obj = {
name : 'A',
printName : function(){
console.log(this.name)
}
}
//把函數(shù)作為對(duì)象屬性來(lái)執(zhí)行
obj.printName() // this指向obj這個(gè)對(duì)象
- 普通函數(shù)
function fn() {
console.log(this) // this === window
}
fn()
- call apply bind
function fn(name,age) {
alert(name);
console.log(this);
}
var fn1 = fn.call({a:100},'jiangdeng',22); //this === {a:100};
- bind ()創(chuàng)建一個(gè)函數(shù)的實(shí)例,其this值會(huì)綁定到傳給bind()函數(shù)的值)
var fn = function(name,age){
alert(name);
console.log(this);
}.bind({a:100});
fn('jiangdeng',22)
作用域
- 沒(méi)有塊級(jí)作用域 (大括號(hào)是沒(méi)辦法約束里面的變量的)
- 只有函數(shù)和全局作用域
//沒(méi)有塊級(jí)作用域
if (true) {
var a = 1000; //在括號(hào)里面和在括號(hào)外面聲明變量沒(méi)有區(qū)別
}
console.log(a)
//函數(shù)和全局作用域
var a = 1000;
function fn(){
var a = 2000;
console.log(a)
}
console.log(a) // 1000
fn() // 2000
作用域鏈
var a = 1000;
function fn(){
var b = 2000;
//當(dāng)前作用域沒(méi)有定義的變量,即自由變量
console.log(a)
console.log(b)
}
fn() //1000,2000
自由變量:當(dāng)前作用域沒(méi)有定義的變量,即自由變量
fn 作用域內(nèi)沒(méi)有定義a變量,就去它的父級(jí)作用域,即全局作用域去找 a ;
函數(shù)的父級(jí)作用域是什么? 就是函數(shù)在定義的時(shí)候父級(jí)作用域,不是在執(zhí)行時(shí)候的父級(jí)作用域;
var a = 1000;
function F1() {
var b = 2000;
function F2() {
var c = 3000;
console.log(a); //a 是自由變量
console.log(b); //b 是自由變量
console.log(c);
}
F2()
}
F1() //1000 2000 3000
不要管 F1 ,F2 在什么地方執(zhí)行,要看它們?cè)谀睦锒x的
作用域鏈:一個(gè)自由變量不斷的往它父級(jí)作用域找,形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)
閉包
//閉包的使用場(chǎng)景：函數(shù)作為返回值
function F1() {
var a = 1000;
//返回一個(gè)函數(shù)(函數(shù)作為返回值)
return function() {
console.log(a) // a 是自由變量,去它的父級(jí)作用域?qū)ふ? }
}
//f1 得到一個(gè)函數(shù)
var f1 = F1(); //F1執(zhí)行后返回的是一個(gè)函數(shù),把它賦值給f1
var a = 2000;
f1(); //1000
//補(bǔ)充一點(diǎn)知識(shí):F1()執(zhí)行返回的結(jié)果是 {console.log(a)},
//為什么不是1000呢?因?yàn)镕1雖然執(zhí)行了,但是里面的函數(shù)還沒(méi)有執(zhí)行,要想得到1000必須還得加一個(gè)(),如F1()();
- 一個(gè)函數(shù)的作用域和它的父級(jí)作用域在它定義的時(shí)候就確定好了,所以確定函數(shù)的作用域不看它執(zhí)行時(shí)候的作用域,要看它定義時(shí)候的作用域 **;
閉包的使用場(chǎng)景:
- 函數(shù)作為返回值(如上面demo)
- 函數(shù)作為參數(shù)傳遞(把函數(shù)傳到另一個(gè)函數(shù)中執(zhí)行),跟上面類(lèi)似;
function F1() {
var a = 100;
return function() {
console.log(a)// a 是自由變量,去它的父級(jí)作用域?qū)ふ? }
}
var f1 = F1();
function F2(fn) {
var a = 200;
//雖然fn()執(zhí)行的結(jié)果(f1傳入后)是返回下列注釋的函數(shù),但并沒(méi)有什么卵用,因?yàn)楹瘮?shù)的作用域不看它執(zhí)行時(shí)候的作用域,看它聲明定義時(shí)候的作用域
fn() // >>function () {console.log(a)}
}
F2(f1) // 100
題目解答:
1: 說(shuō)一下對(duì)變量提升的理解
考察的是對(duì)執(zhí)行上下文的理解,主要內(nèi)容是:
- 變量定義
- 函數(shù)聲明 ,函數(shù)表達(dá)式
- 應(yīng)用的場(chǎng)景,一是script標(biāo)簽內(nèi),一是構(gòu)造函數(shù)中 ,
變量的聲明和定義都會(huì)被提前
2: 說(shuō)明 this 的幾種不同使用場(chǎng)景
- 作為構(gòu)造函數(shù)執(zhí)行
- 作為對(duì)象屬性執(zhí)行
- 作為普通函數(shù)執(zhí)行 這個(gè)時(shí)候的 this 是 window
- call apply bind
//構(gòu)造函數(shù)
function Foo(name){
this.name=name
}
var f=new Foo('zhangsan')
//對(duì)象屬性
var obj={
name:'zhangsan',
printName:function(){
console.log(this.name)
}
}
obj.printName()
//普通函數(shù)
function fn(){
console.log(this);
}
fn()
//call apply bind
function fn1(name,age){
alert(name)
console.log(this)
}
fn1.call({x:100},'zhangsan',20)
var fn2=function (name,age){ //bind在函數(shù)聲明的形式后不可用即寒，必須是函數(shù)表達(dá)式
alert(name)
console.log(this)
}.bind({y:200})
fn2('zhangsan',20)
3: 創(chuàng)建 10 個(gè) a 標(biāo)簽,點(diǎn)擊的時(shí)候彈出響應(yīng)的序列號(hào)
//這是錯(cuò)誤的寫(xiě)法
var i;
for (i = 0; i < 10; i++) {
var a = document.createElement('a');
a.innerHTML = i + '<br>';
a.addEventListener('click', function(e) {
e.preventDefault();
alert(i); // i 自由變量,要去父作用域去尋找
})
document.body.append(a);
}
錯(cuò)誤寫(xiě)法的結(jié)果是每個(gè)a標(biāo)簽上點(diǎn)擊的時(shí)候,彈出來(lái)的都是10
錯(cuò)誤的原因: alert(i) 里面的 i 是一個(gè)自由變量;會(huì)去 function 的父作用域找,這個(gè)時(shí)候 i 早就成 10了 (本來(lái)是9,自增1);
//正確寫(xiě)法
var i;
for (i = 0; i < 10; i++) {
(function(i) {
var a = document.createElement('a');
a.innerHTML = i + '<br>';
a.addEventListener('click', function(e) {
e.preventDefault();
alert(i);
})
document.body.appendChild(a);
})(i)
}
把 i 作為參數(shù)傳進(jìn)函數(shù)里面,讓它作為函數(shù)的作用域中的一個(gè)變量;當(dāng) i 等于0的時(shí)候,存儲(chǔ)這個(gè)變量,然后執(zhí)行...這里相當(dāng)于生成了十個(gè)函數(shù),每次執(zhí)行的參數(shù)都不同
4: 如何理解作用域
- 自由變量
- 作用域鏈 , 即自由變量的查找
- 閉包的兩個(gè)場(chǎng)景
5: 實(shí)際開(kāi)發(fā)中閉包的應(yīng)用
- 閉包實(shí)際應(yīng)用中主要用于封裝變量,收斂權(quán)限;
- 在下面的例子中,在isFirstLoad函數(shù)的中能用到的就只有 return 回的那一部分;而_list在外面是無(wú)法修改到的
//閉包實(shí)際應(yīng)用中主要用于封裝變量,收斂權(quán)限
function isFirstLoad() {
var _list = [];
return function (id) {
if (_list.indexOf(id) >= 0) {
return false
}else{
_list.push(id)
return true
}
}
}
// 使用
var firstLoad = isFirstLoad();
firstLoad(10); //true
firstLoad(10);//false
firstLoad(20);//true
firstLoad(20);//false
//在isFirstLoad函數(shù)外缔俄，無(wú)法修改_list的值
