js访问对象的属性有几种方法 Javascript面向对象的设计 - JavaScript访问器属性属性

js访问对象的属性有几种方法

JavaScript 访问对象的属性有多种方法，它们可以帮助我们更好地理解 JavaScript 对象的结构，并且可以帮助我们更好地使用 JavaScript 对象。

首先，JavaScript 中最常用的方法是使用“.”来访问对象的属性。这种方法可以直接通过对象名称和属性名称来获取对应的值。例如：

var person = {name: 'John', age: 20}; 
console.log(person.name); // John

其次，JavaScript 也支持使用“[]”来访问对象的属性。这种方法可以通过传入一个字符串作为键名来获取对应的值。例如：

var person = {name: 'John', age: 20}; 
console.log(person['name']); // John

此外，JavaScript 还提供了一些内置函数来帮助我们快速地遍历一个对象中所有的属性。例如 Object.keys() 函数可以将一个对象中所有的键名都存储到一个数组中，而 Object.values() 函数则可以将一个对象中所有的键值都存储到一个数组中。例如：

var person = {name: 'John', age: 20}; 
console.log(Object.keys(person)); // ['name', 'age'] 
console.log(Object.values(person)); // ['John', 20]

此外，JavaScript 还提供了 for...in 语句来遍历一个对象中所有的键名/键值。for...in 语句会遍历出所有能够通过 for...in 语句遍历出来的键名/键值（包括原型上定义的、不可枚举的、不能通过 for...in 遍历出来的也会遍历出来）。例如：

var person = {name: 'John', age: 20}; 
for (let key in person) {  console.log(key, person[key]); } // name John // age 20 

最后，JavaScript 还提供了 Object.getOwnPropertyNames() 方法来遍历一个对象中所有定义在该对象上而不是它原型上定义的、不可枚举、能够通过 for...in 遍历出来的键名/键值。Object.getOwnPropertyNames() 方法会遵循 for...in 的语义并将其作为遵循语义行动之剩余部分考量在内。例如：

var person = {name: 'John', age: 20}; 
console.log(Object.getOwnPropertyNames(person)); // ['name', 'age'] 
Javascript面向对象的设计 -  JavaScript访问器属性属性



Javascript面向对象的设计 -  JavaScript访问器属性属性



访问器属性有两个附加属性。

因为没有为存取器属性存储值，所以不需要[[Value]]或[[Writable]]。

相反，访问器有[[Get]]和[[Set]]，它们分别包含getter和setter函数。

我们只需要定义这些属性之一来创建属性。如果我们只定义[[Get]]属性是可读的，或者我们可以使用[[Set]]来设置属性可写。

如果您尝试创建具有数据和访问器属性的属性，您将获得一个错误。

通过使用访问器属性属性而不是对象我们可以定义的文字符号现有对象上的那些属性。

要使用对象字面符号，我们必须在创建对象时定义访问器属性。

我们可以指定访问器属性是可配置还是可枚举。





例子
下面的代码


var book1 = { 
    _name : "Javascript", 

    get name() { 
        console.log("Reading name"); 
        return this._name; 
    }, 

    set name(value) { 
        console.log("Setting name to %s", value); 
        this._name = value; 
    } 
}; 

可以写成:


var book1 = { 
    _name : "Javascript" 
}; 

Object.defineProperty(book1, "name", { 
    get : function() { 
        console.log("Reading name"); 
        return this._name; 
    }, 
    set : function(value) { 
        console.log("Setting name to %s", value); 
        this._name = value; 
    }, 
    enumerable : true, 
    configurable : true 
}); 






例子...
设置其他属性([[Ienumerable]]和[[Configurable]])允许您可以更改评估者属性的工作原理。

我们可以创建一个不可配置，不可数，不可写的属性，如下所示:


var book1 = { 
    _name : "Javascript" 
}; 
Object.defineProperty(book1, "name", { 
    get : function() { 
        console.log("Reading name"); 
        return this._name; 
    } 
}); 

console.log("name" in book1);                      // true 
console.log(book1.propertyIsEnumerable("name"));   // false 
delete book1.name; 
console.log("name" in book1);                      // true 

book1.name = "CSS"; 
console.log(book1.name);                           // "Javascript" 


上面的代码生成以下结果。