1:get語法將對象屬性綁定到查詢該屬性時將被調用的函數;當嘗試設置屬性時set,set語法將對象屬性綁定到要調用的函數。
2:示例中的name是數據屬性;get、set后的age屬性是訪問器屬性,訪問器屬性:當外部js給age賦值時走的時setter函數,當外部js獲取age時 走的getter函數,setter和getter是隱藏函數,會取我們寫在age后邊的函數。
①get 和set 都為箭頭函數,可以同時操作一個屬性
const person = {
name: "zhangsan",
age: 11,
get: () => { this.age },
set: (value) => { this.age = value },
}
console.log(person.age); //11
person.age = 18;
console.log(person.age); //18
/////////////////////////////////////////////////
② get和set不設置為箭頭函數,
var person = {
_name: "zhangsan",
_age: 18,
get age() {
return this._age;
},
set age(value) {
console.log('set')
if (value > 100) {
console.log(`輸入的年齡${value}大於100,不正確`)
} else {
this._age = value;
}
}
};
person.age = 111;
console.log(person.age) // set ;輸入的年齡111大於100,不正確 ;18
person.age = 10;
console.log(person.age) //set; 10
或者
var person = {
name: "zhangsan",
get age() {
return 18
},
set age(value) {
console.log('set')
if (value > 100) {
console.log(`輸入的年齡${value}大於100,不正確`)
} else {
this.age = value;
}
}
};
console.log(person.age) //18
///////////////////////////////////////////////
///////////////////////////////////////////////
備注:錯誤示例,出現哈桑遞歸的錯誤
var person = {
name: "zhangsan",
age: 18,
get age() {
return this.age;
},
};
console.log(person.age); //報錯 t.html:23 Uncaught RangeError: Maximum call stack size exceeded; "超出最大調用堆棧大小"
報錯
t.html:23 Uncaught RangeError: Maximum call stack size exceeded
at Object.get age [as age] (t.html:23)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
at Object.get age [as age] (t.html:24)
錯誤原因:出現這種錯誤最常見的原因是:在代碼中的某個地方,您正在調用一個函數,該函數又調用另一個函數,依此類推,直到達到調用堆棧限制。這幾乎總是因為具有未滿足的基本情況的遞歸函數