Javascript面向对象- 对象属性

2018-12-24 本文已影响0人厦门_小灰灰

title: Javascript面向对象（一）- 对象属性
date: 2018-12-20 15:25:17
tags:

创建一个对象的的两种方法

第一种：通过对象方式创建
var person = new Object();
person.name = "Lee";
person.age = 29;
person.job = "someJob";
person.sayName = function(){
    console.log(this.name);
}    

第二种：通过字面量创建
var person = {
    name: "Lee",
    age: 29,
    job: "someJob",
    sayName: function(){
        console.log(this.name);
    }
}

以上对象是一样的，包含三个属性和一个方法：name, age, job, sayName;

这些属性在创建的时候是有一些特征值的，Javascript可以通过这些特征来定义它们的行为；

属性类型

ECMAScript中有两种属性：数据属性和访问器属性。

1. 数据属性

数据属性包含一个数据值的位置。在这个位置可以读取与写入值。数据属性有4个描述其行为的特性。

（1) [[Configurable]]：描述属性是否可以被删除(delete)，特性是否可以被改变，或是否可以被修改为访问器属性;像上面定义的属性，默认值是ture;

（2）[[Enumerable]]：描述属性是否可以被遍历(for-in);像上面定义的属性，默认值是ture;

（3）[[Writable]]：描述属性是否是可写的;像上面定义的属性，默认值是ture;

（4）[[Value]]：属性值就保存在此位置，读取或者写入属性均操作此处;像上面定义的属性，默认值是undefined;

要修改属性的默认特性，需要用到ECMAScript 5的

Object.defineProperty(obj, prop, descriptor)

的方法，这个方法包含了三个参数，

obj
属性所在的对象。
prop
属性的名称。
descriptor
一个属性描述符对象，其中描述符对象的属性必须是：configurable, enumerable, value, writable。设置其中一个或者多个值，并修改对应的特性值。

（1）.configurable特性：
举些例子

var person = {};
Object.defineProperty(person, "name", {
    writable: false,
    value: "Lee"
});

console.log(person.name);
person.name = "hui";
console.log(person.name);

结果:

result.png

上面是非严格模式，如果是严格模式的话，将会报错

result.png

在严格模式下，如果属性的configurable特性值为false，configurable特性自身之也无法改变。
如果修改将会报错，非严格模式下，虽然不会报错，但是修改不会成功。
总结一句话，configurable特性值为false，value、writable、enumerable与configurable特性值都不能修改。
但是有一个例外，writable特性值可以由true改为false，由false改为true不允许。
（2）.writable特性：
如果特性值为false，那么属性是只读的。

"use strict";

var person = {
    name: "Lee"
};
Object.defineProperty(person, "name", {
    writable: false
});

person.name = "Hui";

结果:

result.png

严格模式下，给只读属性赋值会报错，非严格模式下虽然不会报错，但是赋值不会成功。

（3）.enumerable特性：
此特性用来规定属性的可枚举性，如果为false则是不可枚举。

"use strict";

var person = {
    name: "Lee",
    age: 28
};

Object.defineProperty(person, "age", {
    enumerable: false
});

for (let prop in person) {
    console.log(prop);
}

结果:

result.png

age这个属性没有被遍历出来，因为enumerable特性值为false，那么此属性就是不可枚举的。

（4）.value特性：
就是用来存储属性值的。

1. 访问器属性
  访问器属性由get和set方法定义。

（1）.读取属性的时候调用get方法。
（2）.设置属性的时候调用set方法。

//字面量的访问器属性
let person = {
    _name: "Lee",
    set setName (newValue) {
        this._name = newValue + ":::";
    },
    get getName (){
        return this._name;
    }
}

console.log(person.getName);
person.setName = "Hui";
console.log(person.getName);

结果:

result.png

访问器属性特性：
访问器属性具有如下四个特性：

（1）.[[Configurable]]：描述属性是否可以被删除，特性是否可以被改变，或是否可以被修改为访问器属性。
（2）.[[Enumerable]]：描述属性是否可以被遍历。
（3）.[[Get]]：在读取属性时，调用此方法。
（4）.[[Set]]：设置属性值时，调用此方法。

与数据属性相比，访问器属性没有[[Writable]]和[[Value]]特性。
因为这两个特性的功能被[[Get]]和[[Set]]取代，它们不能同时存在，否则报错。

Object.defineProperty(person, 'name', {
  get: function() {
    return this.name;
  }
});

只有get方法，那么webName属性就是只读的，类似于数据属性的[[Writable]]特性值为false。

Javascript面向对象- 对象属性

属性类型

猜你喜欢

热点阅读