一、Accessor介绍
Accessor即存取器，是一种用于访问和设置对象属性的方式。它允许开发者在获取对象属性值或设置对象属性值时，执行特定的操作，比如进行数据校验、数据过滤、计算等操作。
在ES5之前，只能通过getter和setter函数实现类似的功能。而ES5引入了Accessor，让开发者能够更方便地实现这些功能。Accessor可以理解为getter/setter函数的语法糖。
二、Accessor的语法
//定义一个对象
let obj = {
_name: "Alice",
get name() {
return this._name.toUpperCase();
},
set name(value) {
if (value.length < 4) {
console.log("Name is too short!");
return;
}
this._name = value;
}
};
//获取属性值
console.log(obj.name); //"ALICE"
//设置属性值
obj.name = "Bob"; //输出 "Name is too short!"
obj.name = "Charlie";
console.log(obj.name); //"CHARLIE"
上面的代码中，obj对象有一个_name属性，通过get和set方法实现。在获取name属性值时，会返回_name的大写形式；在设置name属性值时，如果字符串长度小于4，会输出错误信息。如果长度符合要求，则会将字符串赋值给_name属性。
三、Accessor vs. Getter/Setter函数
在ES5之前，只能通过getter和setter函数实现访问和设置对象属性的操作。让我们来比较一下Accessor和Getter/Setter函数的异同。
1.语法不同
Accessor的语法更加简单，与普通对象属性一样。Getter/Setter函数需要通过Object.defineProperty()方法定义属性描述符。
2.访问属性值的方式不同
Accessor通过对象.属性名的方式访问属性值；而Getter/Setter函数是通过对象调用函数的方式访问属性值。
//Getter/Setter函数的使用
let obj = {
_name: "Alice",
get name() {
return this._name.toUpperCase();
},
set name(value) {
if (value.length < 4) {
console.log("Name is too short!");
return;
}
this._name = value;
}
};
console.log(obj.getName()); //"ALICE"
obj.setName("Bob"); //输出 "Name is too short!"
obj.setName("Charlie");
console.log(obj.getName()); //"CHARLIE"
//Accessor的使用
let obj = {
_name: "Alice",
get name() {
return this._name.toUpperCase();
},
set name(value) {
if (value.length < 4) {
console.log("Name is too short!");
return;
}
this._name = value;
}
};
console.log(obj.name); //"ALICE"
obj.name = "Bob"; //输出 "Name is too short!"
obj.name = "Charlie";
console.log(obj.name); //"CHARLIE"
3.操作多个属性时不同
Accessor可以同时操作多个属性，而Getter/Setter函数只能操作一个属性。
//Accessor操作多个属性
let obj = {
_firstName: "Alice",
_lastName: "Green",
get fullName() {
return this._firstName + " " + this._lastName;
},
set fullName(value) {
let parts = value.split(" ");
this._firstName = parts[0];
this._lastName = parts[1];
}
};
obj.fullName = "Bob Dylan";
console.log(obj.fullName); //"Bob Dylan"
//Getter/Setter函数只能操作一个属性
let obj = {};
Object.defineProperty(obj, "name", {
get: function() {
return this._name.toUpperCase();
},
set: function(value) {
if (value.length < 4) {
console.log("Name is too short!");
return;
}
this._name = value;
}
});
obj.name = "Bob"; //输出 "Name is too short!"
obj.name = "Charlie";
console.log(obj.name); //"CHARLIE"
四、Accessor的应用场景
1.数据校验
Accessor允许开发者在设置属性值前，对属性值进行校验。比如，可以针对字符串长度、数值范围、对象类型等进行校验。
let obj = {
_age: 0,
get age() {
return this._age;
},
set age(value) {
if (value 100) {
console.log("Age should be between 0 and 100!");
return;
}
this._age = value;
}
};
obj.age = -1; //输出 "Age should be between 0 and 100!"
obj.age = 101; //输出 "Age should be between 0 and 100!"
2.计算属性
Accessor允许开发者在获取和设置属性值时，执行特定操作，比如进行数据计算、数据过滤、数据转换等操作。
let obj = {
_price: 0,
_quantity: 0,
get total() {
return this._price * this._quantity;
},
set price(value) {
this._price = value;
},
set quantity(value) {
this._quantity = value;
}
};
obj.price = 10;
obj.quantity = 5;
console.log(obj.total); //50
3.数据过滤
Accessor允许开发者在获取和设置属性值时，对属性值进行过滤。比如，可以对字符串进行去除空格、转换为小写等操作。
let obj = {
_name: "",
get name() {
return this._name.trim().toLowerCase();
},
set name(value) {
this._name = value;
}
};
obj.name = " ALICE ";
console.log(obj.name); //"alice"
五、Accessor的注意事项
虽然Accessor很方便，但是开发者需要注意以下几点：
1.命名规范
开发者需要遵循属性命名规范，避免与其他属性或方法产生冲突。
2.效率问题
Accessor虽然方便，但是运行效率较低。在需要高效运行的场景下，建议使用普通的对象属性和方法。
3.内存泄漏问题
Accessor可能会引起内存泄漏问题。建议在不需要使用Accessor时，删除相应的属性或方法。
4.兼容性问题
Accessor在ES5之前的浏览器中没有实现。如果需要兼容老版本的浏览器，建议使用Getter/Setter函数。
六、总结
通过本文的介绍，我们了解了Accessor的语法、与Getter/Setter函数的区别、应用场景以及注意事项。Accessor可以让开发者更加方便地访问和设置对象属性，具有较好的可读性和可维护性。但是需要合理应用，在性能和兼容性上需要注意。