JavaScript访问器属性和getter/setter方法
2023-11-28 11:17:03
<!-- 文章正文 -->
## 1. 对象与属性
在JavaScript中,对象是键值对的集合。这些值是对象的属性,它可以是一个基本类型或对象,也可以是方法(method)。
const person = {
name: "John Doe",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
上面这个对象有一个`name`基本类型,和一个`greet`方法。
用上面这种定义方法是最简单的,称为**用字面量定义** 。将对象的属性和方法直接写在对象内。
其中,定义方法时,有两种写法:
// 使用函数定义方法
const person = {
name: "John Doe",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name);
}
};
// 使用箭头函数定义方法
const person = {
name: "John Doe",
age: 30,
greet: () => {
console.log("Hello, my name is " + this.name);
}
};
两种写法都是合法的,但在ES5中,推荐使用函数关键字定义方法,因为箭头函数是ES6才引入的新特性。
## 2. 访问器属性
访问器属性是ES5中引入的一种新的属性类型,它允许我们通过getter和setter方法来访问和修改对象的属性。
const person = {
_name: "John Doe",
get name() {
return this._name;
},
set name(value) {
this._name = value;
}
};
上面的代码中,`name`属性就是一个访问器属性。它有一个getter方法和一个setter方法。
* getter方法用于获取属性的值。
* setter方法用于设置属性的值。
访问器属性的语法如下:
get
// getter方法
}
set
// setter方法
}
## 3. getter/setter方法
getter/setter方法是ES5中引入的一种新的方法类型,它允许我们通过访问器属性来访问和修改对象的属性。
const person = {
get name() {
return this._name;
},
set name(value) {
this._name = value;
}
};
上面的代码中,`name`属性就是一个getter/setter方法。它有一个getter方法和一个setter方法。
* getter方法用于获取属性的值。
* setter方法用于设置属性的值。
getter/setter方法的语法如下:
get
// getter方法
}
set
// setter方法
}
## 4. 访问器属性和getter/setter方法的使用场景
访问器属性和getter/setter方法可以用来实现各种各样的功能,比如:
* 对属性进行验证。
* 对属性进行转换。
* 对属性进行私有化。
* 对属性进行延迟加载。
* 对属性进行惰性求值。
## 5. 访问器属性和getter/setter方法的优缺点
访问器属性和getter/setter方法有以下优点:
* 可以对属性进行更好的控制。
* 可以实现更多的功能。
访问器属性和getter/setter方法有以下缺点:
* 代码更复杂。
* 性能开销更大。
## 6. 访问器属性和getter/setter方法在ES5和ES6中的实现方式
在ES5中,访问器属性和getter/setter方法的实现方式如下:
const person = {
_name: "John Doe",
get name() {
return this._name;
},
set name(value) {
this._name = value;
}
};
在ES6中,访问器属性和getter/setter方法的实现方式如下:
class Person {
#name = "John Doe";
get name() {
return this.#name;
}
set name(value) {
this.#name = value;
}
}
其中,`#name`属性就是一个私有属性。它只能在类的内部访问。
## 7. 总结
访问器属性和getter/setter方法是JavaScript中两种新的属性和方法类型。它们可以用来实现各种各样的功能,比如对属性进行验证、转换、私有化、延迟加载和惰性求值等。