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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM