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)
错误原因:出现这种错误最常见的原因是:在代码中的某个地方,您正在调用一个函数,该函数又调用另一个函数,依此类推,直到达到调用堆栈限制。这几乎总是因为具有未满足的基本情况的递归函数