郑州做网站制作的公司_创建一个自己的公司的英文_seo网络营销_如何推广自己的网站

一.什么是getter和setter？

二.getter和setter的使用

1.对象字面量去定义

2.访问器属性的作用

2.1 计算属性

2.2 数据校验

3.通过Object.prototype.__defineGetter__()和Object.prototype.__defineSetter__()定义（不推荐）

4.通过Object.defineProperty() 方法去定义getter函数和setter函数

5.通过Object.defineProperties() 方法去定义getter函数和setter函数

---

一.什么是getter和setter？

对象的属性有两种，一种是数据属性，就是我们最常见的变量方法之类的。还有一种是访问器属性，它们本质上是获取或设置值时执行的函数，但使用起来更像是属性。

访问器属性由getter和setter表示,其中getter是获取属性值，setter是设置属性值。

二.getter和setter的使用

1.对象字面量去定义

在对象字面量中，它们通过get 关键字和set 关键字去定义。

    let obj = {_name: "于家宝",get name() { // getter去声明name属性，返回 _name 的值return this._name; // obj调用的getter函数，所以此时this指向obj},};console.log(obj.name); // 于家宝 使用时像数据属性那样，而不是obj.name()

我们在访问getter声明的访问器属性的时候，会自动调用getter函数，下面是getter函数的特点：

• 用于读取属性值。
• 定义时使用get关键字。
• 无参数，返回属性值。
• 使用的时候跟属性一样，不需要后面加（）。

如果想要修改getter声明的访问器属性，就必须使用setter函数，否则修改不会生效。

    let obj = {_name: "于家宝",get name() {return this._name;},set name(value) {  // setter用于修改访问器属性this._name = value;},};obj.name = 'yujiabao'console.log(obj.name); // yujiabao

我们在修改访问器属性的时候，会自动调用setter函数，下面是setter函数的特点：

• 用于修改属性值。
• 定义时使用set关键字。
• 必须有参数，参数就是给属性赋的值。

这个时候就完成了对一个访问器属性的声明，那这个访问器属性存在的意义是什么呢，单纯的使用数据属性不是更简单吗，下面我就说明以下访问器属性的作用。

2.访问器属性的作用

2.1 计算属性

我们可以通过访问器属性去实现计算属性的效果。

比如我现在声明一个对象，里面有两个属性，一个是姓氏，一个是名字。

let user = {name: "John",surname: "Smith"
};

现在需要添加一个fullName属性，该属性值由name和surname组成，就可以使用访问器属性。

    let user = {name: "John",surname: "Smith",get fullName() {return `${this.name} ${this.surname}`;},};console.log(user.fullName); // John Smith

此时修改name或者surname，fullName也会随之更新。

    let user = {name: "John",surname: "Smith",get fullName() {return `${this.name} ${this.surname}`;},};console.log(user.fullName); // John Smithuser.name = "Alice";user.surname = "Cooper";console.log(user.fullName); // Alice Cooper

而且也可以通过修改fullName去反向修改name和surname。

    let user = {name: "John",surname: "Smith",get fullName() {return `${this.name} ${this.surname}`;},set fullName(value) {[this.name, this.surname] = value.split(" ");},};user.fullName = "Alice Cooper";console.log(user.name); // Aliceconsole.log(user.surname); // Cooperconsole.log(user.fullName); // Alice Cooper

2.2 数据校验

我们在给变量赋值的时候可以通过get方法去添加一个校验。

    let person = {name: "于家宝",_age: 18,get age() {return this._age;},set age(value) {if (typeof value !== "number") {throw new Error("只能赋值数值型的值");}this._age = value;},};person.age = "18";

3.通过Object.prototype.__defineGetter__()和Object.prototype.__defineSetter__()定义（不推荐）

Object的原型对象上具有__defineGetter__()方法和__defineSetter__()方法，可以去定义getter函数和setter函数。

obj.__defineGetter__(prop,func)

作用：将一个对象的属性绑定到一个函数上，当访问这个属性的时候自动调用这个函数，一般用来定义getter函数。

参数：

• prop：要定义或者修改的属性名，是一个字符串，这里是用于定义一个新的属性。
• func：绑定的函数，当prop被访问的时候自动调用。

返回值：无。

    let person = {name: "于家宝",_age: 18,};person.__defineGetter__("age", function () {return this._age;});console.log(person.age);  // 18

obj__defineSetter__(prop,func)

作用：将一个对象的属性绑定到一个函数上，当给这个属性赋值的时候自动调用这个函数，一般用来定义setter函数。

参数：

• prop：要修改或者定义的属性名，是一个字符串，这里是用于定义一个新的属性。
• func：绑定的函数，当prop被赋值的时候自动调用。

返回值：无。

    let person = {name: "于家宝",_age: 18,};person.__defineGetter__("age", function () {return this._age;});person.__defineSetter__("age", function (value) {this._age = value;});console.log(person.age); // 18person.age = 19;console.log(person.age); // 19

4.通过Object.defineProperty() 方法去定义getter函数和setter函数

通过Object.defineProperty() 方法可以在对象上定义或者修改一个属性，并设置属性描述符，我们可以在这里设置其属性描述符get和set。

Object.defineProperty(obj,prop,descriptor)

作用：给目标对象定义或修改一个属性，并设置该属性的属性描述符。

参数：

• obj：目标对象。
• prop：要定义或者修改的属性名称，是个字符串。
• descriptor：将被定义或者修改的属性描述符。

返回值：目标对象。

    let person = {name: "于家宝",_age: 18,};Object.defineProperty(person, "age", {get: function () {return this._age;},set: function (v) {this._age = v;},});console.log(person.age); // 18person.age = 19;console.log(person.age); // 19

5.通过Object.defineProperties() 方法去定义getter函数和setter函数

和Object.defineProperty() 方法差不多，只是这个方法可以同时设置多个属性。

Object.defineProperties(obj,props)

作用：给目标对象定义或修改一个或多个属性，并可以设置属性的属性描述符。

参数：

• obj：目标对象。
• props：一个对象，键值对是要设置的属性名和其属性描述符。

返回值：目标对象。

    let person = {_name: "于家宝",_age: 18,};Object.defineProperties(person, {name: {get: function () {return this._name;},set: function (v) {this._name = v;},},age: {get: function () {return this._age;},set: function (v) {this._age = v;},},});console.log(person.name); // 于家宝person.name = "yujiabao";console.log(person.name); // yujiabaoconsole.log(person.age); // 18person.age = 19;console.log(person.age); // 19