01/10/2018, 14:13

Let và Var trong Javascript

function drawShape(){

var mContent = document.getElementById("mContent");
mContent.innerHTML = "";

for(var i = 1; i<= 10; i++){
	var elmP	= document.createElement("p");
	elmP.innerHTML = i;
	
	elmP.onclick = function(){
		alert("Selected: #" + i);
	}
	// i = 10
	mContent.appendChild(elmP);
}

}
Đoạn mã trên sẽ in ra các số từ 1 đến 10 và khi click vào thì nó đều hiện thông báo là 11 nhưng em đổi từ var thành let trong vòng for thì lại hiện ra thông báo đúng khi click từ 1-10. Mọi người giải thích giúp em tại sao lại vậy ạ.

Nguyễn Quốc Thái viết 16:24 ngày 01/10/2018

Mình không chuyên JS, nhưng theo mình hiểu là như thế này:

var tạo 1 variable trong scope của function drawShape, let tạo 1 variable trong scope của for loop.
Vì tính năng trên của let, khi bạn tạo lambda/closure để gán vào event onclick của element p, i được copy vào lambda/closure, giữ giá trị 1 đến 10.
Nếu bạn dùng var, lambda/closure lấy giá trị của i khi event onclick xảy ra. Khi event xảy ra, cái for loop của bạn đã hoàn thành, i = 11, nên giá trị i trong lambda/closure sẽ là 11.

*grab popcorn* viết 16:15 ngày 01/10/2018

Đọc cái này nhé
Loop and Closure

Khanhvm viết 16:27 ngày 01/10/2018

khi đọc về ts có nhắc về cái sida của js là không hủy biến khi hết vòng lặp. ts dùng let thay var để giải quyết vdd này.

Kien Nguyen viết 16:23 ngày 01/10/2018

var tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó
let tạo ra một biến có phạm vi truy cập được trong block bao quanh nó

function drawShape(){
	var mContent = document.getElementById("mContent");
	mContent.innerHTML = "";
	// var elmP;

	for(var i = 1; i<= 10; i++){
		var elmP	= document.createElement("p"); // elmP ở đây cũng như là elmP ở trên
		elmP.innerHTML = i;
		
		elmP.onclick = function(){
			alert("Selected: #" + i);
		}
		// i = 10
		mContent.appendChild(elmP);
	}
}

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Đức Thái

0 chủ đề

0 bài viết

Tác giả nổi bật