js 閉包與原型
阿新 • • 發佈:2018-11-01
參考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
一、閉包Closures
js中的閉包是函式 (一個封閉的對外不公開的包裹結構或空間)
1、閉包要解決的問題
- 在函式外部訪問不到函式內部的資料
- 要解決的問題就是需要在外部間接的訪問函式內部的資料
2、基本結構
function outer(){
var data = "資料";
return function(){
return data;
}
}
function outer(){
var data = "資料";
return {
getData:function(){
return data;
},
setData:function(value){
data = value;
return data;
}
}
}
3、閉包的應用
1)用閉包來解決定時器的問題
由於js是單執行緒執行的,會先執行主任務,然後執行次要任務(包括setTimeOut和setInterval中的回撥函式中的程式碼)
例如:
for(var i = 0 ; i < 10; i++){
setTimeout(function(){
console.log(i);
},0);
}
並不會如願打印出1~10,而是打印出10個10 因為for迴圈執行完畢後才會執行setTimeout回撥函式,如果時間到了就執行
解決:
for(var i = 0; i< 3; i++){
function foo(j){
return function(){
console.log(j);
};
}
var f = foo(i);
setTimeout(f, 0);
}
這樣打印出來就是1 2 3
2)用閉包來儲存環境
閉包共享相同的函式定義,但是儲存了不同的詞法環境
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
點選時文字會發生改變12、14、16
但是如果改變寫法 :
function makeSizer(size) {
document.body.style.fontSize = size + 'px';
}
這樣寫的話文字大小都是12,因為它們共享了同一個詞法環境,第一個執行後,後面和前面的是公用一個詞法環境
3)建立物件或類時使用閉包
在建立新的物件或者類時,方法通常應該關聯於物件的原型,而不是定義到物件的構造器中。原因是這將導致每次構造器被呼叫時,方法都會被重新賦值一次(也就是,每個物件的建立)。
例如我們可以這樣寫:
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function() {
return this.name;
};
MyObject.prototype.getMessage = function() {
return this.message;
};
二、原型