📜  JavaScript Getter和Setter

📅  最后修改于: 2020-09-27 07:25:17             🧑  作者: Mango

在本教程中,您将借助示例来学习JavaScript getter和setter方法。

在JavaScript中,有两种对象属性:

  • 资料属性
  • 存取器属性
数据属性

这是先前教程中一直使用的数据属性示例。

let student = {

    // data property
    firstName: 'Monica';
};

存取器属性

在JavaScript中,访问器属性是获取或设置对象值的方法。为此,我们使用以下两个关键字:

  • get -定义一个getter方法来获得属性值
  • set -定义一个setter方法来设置属性值

JavaScript Getter

在JavaScript中,getter方法用于访问对象的属性。例如,

let student = {

    // data property
    firstName: 'Monica',
    
    //accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Monica

// accessing getter methods
console.log(student.getName); // Monica

//trying to access as a method
console.log(student.getName()); // error

在上面的程序中,创建了一个getter方法getName()来访问对象的属性。

get getName() {
    return this.firstName;
}

注意:要创建一个getter方法,将使用get关键字。

并且在访问值时,我们将值作为属性访问。

student.getName;

当您尝试以一种方法访问该值时,会发生错误。

console.log(student.getName()); // error

JavaScript设置器

在JavaScript中,setter方法用于更改对象的值。例如,

let student = {
    firstName: 'Monica',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Monica

// change(set) object property using a setter
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

在上面的示例中,使用setter方法更改对象的值。

set changeName(newName) {
    this.firstName = newName;
}

注意:要创建设置器方法,请使用set关键字。

如以上程序所示, firstName值为Monica

然后将值更改为Sarah

student.chageName = 'Sarah';

注意 :设置器必须仅具有一个形式参数。


JavaScript Object.defineProperty()

在JavaScript中,您还可以使用Object.defineProperty()方法添加getter和setter。例如,

let student = {
    firstName: 'Monica'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Monica

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

在上面的示例中, Object.defineProperty()用于访问和更改对象的属性。

使用Object.defineProperty()的语法为:

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty()方法采用三个参数。

  • 第一个参数是objectName。
  • 第二个参数是属性的名称。
  • 第三个参数是描述属性的对象。