JavaScript,对象里的get与set方法

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 exceededat 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)

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