填坑十萬個為什麼?(13)

NO IMAGE

簡介:很多概念不清或忘記,重新構建自己的知識體系。每天問自己1~多個問題。我是菜鳥 成為大神之路!

1. 經典面試題 for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}打印結果?分析?

for(var i = 0; i < 10; i++) {
console.log(new Date(),i);
setTimeout(() => {
console.log(new Date(),i)
}, 1000);//一秒
}
答案:打印10個10
這道題涉及了異步、作用域、閉包
😀settimeout是異步執行,1ms後往任務隊列裡面添加一個任務,只有主線上的全部執行完,才會執行任務隊列裡的任務,
當主線執行完成後,i是10,所以此時再去執行任務隊列裡的任務時,i全部是10了。
😁對於打印10次是:每一次for循環的時候,settimeout都執行一次,但是裡面的函數沒有被執行,而是被放到了任務隊列裡面,
等待執行,for循環了10次,就放了10次,當主線程執行完成後,才進入任務隊列裡面執行。
(注意:for循環從開始到結束的過程,需要維持幾微秒或幾毫秒。)

填坑十萬個為什麼?(13)

① 若要輸出從0到9,將 var 改為 let
for(let i = 0; i < 10; i++) {
console.log(new Date(),i);
setTimeout(() => {
console.log(new Date(),i)
}, 1000);//一秒
}
當我把var 變成let 時
😂打印出的是:0~10當解決變量作用域,因為for循環頭部的let不僅將i綁定到for循環快中,
事實上它將其重新綁定到循環體的每一次迭代中,確保上一次迭代結束的值重新被賦值。
😂setTimeout裡面的function()屬於一個新的域,通過 var 定義的變量是無法傳入到這個函數執行域中的,
通過使用 let 來聲明【塊變量】,這時候變量就能作用於這個塊,所以 function就能使用 i 這個變量了;
😂這個匿名函數的參數作用域 和 for參數的作用域不一樣,是利用了這一點來完成的。
這個匿名函數的作用域有點類似類的屬性,是可以被內層方法使用的。
② 若要輸出從0到9,改寫為閉包

閉包相關解釋下一問。

// 使用閉包
for(var i = 0; i < 10; i++) {
console.log(new Date(),i);
(function (i) {
setTimeout(() => {
console.log(new Date(),i);
}, 1000);
})(i);
}

2.閉包的作用域?代碼執行過程?

經常遇到閉包的相關問題

代碼一:
// 以1問中例子為例
for(var i = 0; i < 10; i++) {
console.log(new Date(),i);
(function (i) {
setTimeout(() => {
console.log(new Date(),i);
}, 1000);
})(i);
}
代碼一是閉包,寫為代碼二不為閉包的形式,(function(i){})(i) '理解為自執行函數' 自執行函數的相關參考在12天和參考文章中,之後我會對著一塊內容進行學習👍。
代碼二:
var fun = function(x){
setTimeout(() => {
console.log(new Date(),x);
}, 1000);
}
for(var i = 0; i < 10; i++) {
console.log(new Date(),i);
fun(i);
}
JavaScript 變量可以是局部變量或全局變量。
私有變量可以用到閉包。
什麼是閉包:
> 就是函數的局部變量集合,只是這些局部變量在函數返回後會繼續存在。
> 就是函數的“堆棧”在函數返回後並不釋放,我們也可以理解為這些函數堆棧並不在棧上分配而是在堆上分配
> 當在一個函數內定義另外一個函數就會產生閉包
> "注:變量聲明時如果不使用 var 關鍵字,那麼它就是一個全局變量,即便它在函數內定義。"
注意:通常人們對閉包的理解是不完全的,認為在 JavaScript 中只有嵌入的函數才是閉包。但其實任何擁有 free variable(自由變量)
的函數都是以閉包的形式存在的。因為本質上,閉包是 free variable 問題的一種解決方案。http://liximomo.github.io/javascript-closure
閉包的注意點
1)由於閉包會使得函數中的變量都被保存在內存中,內存消耗很大,所以不能濫用閉包,否則會造成網頁的性能問題,在IE中可能導致內存洩露。
解決方法是,在退出函數之前,將不使用的局部變量全部刪除。
2)閉包會在父函數外部,改變父函數內部變量的值。所以,如果你把父函數當作對象(object)使用,把閉包當作它的公用方法(Public Method),
把內部變量當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數內部變量的值。

閉包需要注意的兩種情況—-函數作為返回值,函數作為參數傳遞。

例子:函數作為返回值

1. function greeting(name) {
2. 		var text = 'Hello '; // local variable
// 每次調用時,產生閉包,並返回內部函數對象給調用者
3. 		return function() {return text += name; }
}
4. 	var sayHello=greeting("Closure");
5. 	document.write(sayHello());
6. 	document.write("<br>");
7. 	document.write(sayHello());
8. 	document.write("<br>");
9. 	document.write(sayHello());
10. document.write("<br>");
11. document.write(sayHello());
12. document.write("<br>");
13. document.write(sayHello());// 通過閉包訪問到了局部變量text
代碼解析:
> 執行第4行時第一行的函數運行一次,返回內嵌函數引用作為第4行sayHello變量的值。
> 之後的第5到13行執行的函數操作其實只是執行sayHello指向的函數(即返回的內嵌函數)。
> 解釋text為什麼能自增,閉包的概念。

例子:函數作為參數傳遞

1. var num = 10;
2. var fun = function(var num){
3.    console.log(num);
}
4. !function(f){
5.     var num = 100;
6.     f(num);
7. }(fun)
代碼解析:
> 第四行'!'表示高優先級,被'!'標註的先執行。
> 第7行將fun指向的引用2行函數傳給參數f在函數中執行f(?)函數,此時log出來的值是10。
> 解釋看js作用域

3.var let const的區別?

① 什麼是var的變量提升補充2019年1月5日23:31:41 來源網易課堂
'代碼1'
var a = 10;
function foo(){
console.log(a);//打印:10
}
'代碼2'
var a = 10;
function foo(){
console.log(a);//打印:undefined
var a = 5;
}
'問代碼2為什麼輸出的是undefined這裡變量提前了,實際代碼相當於如下'
'代碼3'
var a = 10;
function foo(){
var a;
console.log(a);//打印:undefined
a = 5;
}
② let 聲明的變量只在它所在的代碼塊有效
function demo(){
{
var a = 12;
let c = 10;
console.log(a);//這裡會打印出12;
console.log(c);//這裡會打印出10;
}
console.log(a);//這裡會打印出12
console.log(c);//這裡打印出的內容為 "c is not defined";
//說明聲明的c變量只在{}代碼塊中能夠訪問,其他地方都訪問不到;
}
demo();
③ let不存在變量提升

let 不像var 那樣會發生 ‘變量提升’ 現象,因此,變量需要先聲明然後再使用,否則報錯;

// var 的情況
console.log(vardata);  // undefined
var vardata = 2;
// let的情況;
console.log(letdata);  // letdata is not defined 報錯
let letdata = 2;
④ let暫時性死區

快級作用域內存在let命令,它所聲明的變量就綁定在這個區域,不再受外部影響;

var tmp = 123;
if (true) {
tmp = 'abc';
let tmp;
console.log(tmp); // tmp is not defined
}
⑤ let不允許重複聲明

let 不允許在相同作用域內,重複聲明同一個變量。

function foo() {
let v = 10;
var v = 1;//Identifier 'v' has already been declared
console.log(v);
}
foo();
function foo1() {
let v1 = 10;
let v1 = 1;//Identifier 'v1' has already been declared
console.log(v1);
}
foo1();
⑥ const 聲明一個只讀的常量,一旦聲明,常量的值就不允許改變
⑦ const 一旦聲明瞭變量,就必須初始化,不能留到以後賦值。如果使用const聲明一個變量,但是不賦值,也會報錯
⑧ const 的作用域與let命令相同;只在聲明所在的塊級作用域內有效。
⑨ const 不可重複聲明 (和let一樣)

參考文章:
let的含義及let與var的區別
閉包文檔
博客-深入理解javascript原型和閉包
JS關於閉包
函數 + 函數創建時的環境 = 閉包

相關文章

填坑十萬個為什麼?(17)

填坑十萬個為什麼?(16)前15天小結

填坑十萬個為什麼?(15)

填坑十萬個為什麼?(14)