访问器属性原理及应用场景 -

访问器属性

属性访问器提供了两种方式用于访问一个对象的属性，它们分别是点号和方括号。
语法为：object.property 和 object[‘property’]

实例代码如下：

const person1 = {};
person1['firstname'] = 'Mario';
person1['lastname'] = 'Rossi';
console.log(person1.firstname);
// expected output: "Mario"
const person2 = {
  firstname: 'John',
  lastname: 'Doe'
};
console.log(person2['lastname']);
// expected output: "Doe"

应用实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问器属性</title>
</head>
<body>
    <script>
        // 访问器属性
        let user={
            //常规属性
            data:{
                name:'mary',
                age:18,
            },
            // 获取年龄
            getAge(){
                return this.data.age;
            },
            //设置年龄
            setAge(age){
                if (age>=18 & age<=120){
                    this.data.age=age;
                }else{
                    console.log('非法数据');
                }
            },
        };
        console.log(user.getAge());
        user.setAge(80);
        console.log(user.getAge());
        console.log('----------');
        // 对于用户来说，获取年龄，习惯性会用这种方式获取
        // console.log(user.age);
        // console.log(user.data.age);
        user={
            //常规属性
            data:{
                name:'mary',
                age:18,
            },
            //将传统的方法，修改成一个伪装成属性的方法
            get age(){
                return this.data.age;
            },
            //设置年龄,将之前的设置方法修改成了一个属性
            //方法-->属性：伪装成方法的属性，“访问器属性”
            set age(age){
                if (age>=18 & age<=120){
                    this.data.age=age;
                }else{
                    console.log('非法数据');
                }
            },
        };
        console.log(user.age);
        console.log('----------');
        user.age=150;
        console.log(user.age);
        //访问器属性，本质上还是方法，但是调用的时候还是属性
    </script>
</body>
</html>

控制台效果如下：