重新认识javascript对象（一）——对象及其属性

Sillywa
1,145 阅读6分钟

一、创建对象

javascript中有三种方法可以创建一个对象：

  1. 对象字面量
var obj = {
    name: 'jack',
    age: 12
}
  1. new 构造函数
var obj = new Object()
var obj1 = new Object({
    name: 'jack',
    age: 12
})
  1. Object.create()
var obj = Object.create({
    name: 'jack',
    age: 12
})

需要注意的是通过Object.create()创建的对象实际上等于将该对象的__proto__指向Object.create()里面的参数对象，而obj本身是个空对象。

var obj = Object.create({
    name: 'jack',
    age: 12
})
// 等价于 obj.__proto__ = { name: 'jack', age: 12 }
console.log(obj)  // {}
console.log(obj.__proto__)  // { name: 'jack', age: 12 }
obj.toString()   // '[object Object]'

如果往Object.create()里面传入的是null，则创建的对象不继承Object的任何方法及属性。

var obj = Object.create(null)
console.log(obj)  // {}
console.log(obj.__proto__)  // undefined
obj.toString()  // 报错

如果想创建一个空对象，需要传入Object.prototype

var obj = Object.create(Object.prototype)
// 和 {} 、new Object()一样

二、对象的属性

我们知道，对象的属性是由名字、值和一组特性组成（属性的特性待会介绍）。在ES5中属性值可以用一个或两个方法代替，这两个方法就是getter和setter。由getter和setter定义的属性称为“存储器属性”，它不同于数据类型的属性，数据属性只有一个简单的值。我们重点讲解存储器属性。

当我们查询存储器属性时会调用getter方法（无参数）。这个方法返回值就是属性存取表达式返回的值。

当我们设置存储器属性时会调用setter方法（有参数）。这个方法修改存储器属性的值。

var obj = {
    num: 12,
    age: 13,
    get num1 () {
        return this.num
    },
    set num1 (value) {
        this.num = value
    },
    get age1 () {
        return this.age
    }
}
obj.num1   // 12
obj.num1 = 120
obj.num1  // 120

obj.age1  // 13
obj.age1 = 130
obj.age1  // 13

存储器属性定义为一个或者两个和属性同名的函数，这个函数定义没有使用function关键字而是使用get和set。

可以看出如果该属性只有getter方法则只能读取该属性不能设置该属性，同样如果只有setter方法就只能设置该属性，不能读取该属性，只有当两者都有时才能正常读取和设置属性。

三、对象属性的特性

每个对象的数据属性都有四个特性（也可以说是属性描述符），分别为：

  1. value 属性的值
  2. writable 可写性，如果为false该值将不能被修改
  3. enumerable 可枚举性，如果为false将不能被枚举
  4. configurable 可配置性，如果为false将不能被配置，即不能被delete操作符删除，不能更改这四个特性，一旦设为false则无法再设为true，也就是一个不可逆过程

前面我们讲过存储器属性，每隔对象的存储器属性同样也有四个特性，分别为：

  1. get
  2. set
  3. enumerable
  4. configurable

如果想要获得一个对象某个属性的这四个特性，可以调用 Object.getOwnPropertyDescriptor() 方法，该方法接受两个参数，第一个为对象，第二个为对象的属性

var obj = {
    name: 'jack',
    age: 12,
    get age1 () {
        return this.age1
    },
    set age1(value) {
        this.age1 = value
    }
}
// 获取数值属性的特性
Object.getOwnPropertyDescriptor(obj,'name')
// {value: "jack", writable: true, enumerable: true, configurable: true}

// 获取存储器属性的特性
Object.getOwnPropertyDescriptor(obj,'age1')
// {enumerable: true, configurable: true, get: ƒ, set: ƒ}

// 试图获取不存在的属性，返回undefined
Object.getOwnPropertyDescriptor(obj, 'sex')  // undefined

// 试图获取原型上的属性，返回undefined 
Object.getOwnPropertyDescriptor(obj, 'toString')  // undefined

从上面可以看出，Object.getOwnPropertyDescriptor() 只能得到自有属性的描述符，要想获得继承属性的特性，我们可以把该对象的原型传进去。

function Person () {
    this.name = 'sillywa'
}
Person.prototype.sex = 'boy'
Person.prototype.age = 13
var person1 = new Person()
Object.getOwnPropertyDescriptor(person1.__proto__, 'sex')
// {value: "boy", writable: true, enumerable: true, configurable: true}

以上可以看出，我们通过对象字面量和new运算符创建的对象的属性它们的writable,enumerable,configurable都有true，默认都是可写、可枚举、可配置。如果要修改属性的特性可以调用Object.defineProperty()。

var obj = {
    name: 'sillywa'
}
// 将name属性设为不可枚举并将其值设为jack
Object.defineProperty(obj, 'name', {
    value: 'jack',
    enumerable: false
})
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: "jack", writable: true, enumerable: false, configurable: true}

// 新增age属性
Object.defineProperty(obj, 'age', {
    value: 12
})
Object.getOwnPropertyDescriptor(obj, 'age')
// {value: 12, writable: false, enumerable: false, configurable: false}

// 将name变为存储器属性
Object.defineProperty(obj, 'name', {
    get: function () {
        return 0
    }
})
Object.getOwnPropertyDescriptor(obj, 'name')
// {set: undefined, enumerable: false, configurable: true, get: ƒ}

obj.age = 78
obj.age  // 12

需要注意的是通过Object.defineProperty() 创建的属性其writable, enumerable, configurable 都为false。尝试修改不写的属性不会报错，但也不会修改，只有在严格模式下才会报错。

如果需要同时修改和创建多个属性，可以使用Object.defineProperties()。

var obj = Object.defineProperties({},{
    name: {
        value: 'sillywa',
        writable: true,
        enumerable: true,
        configurable: true
    },
    age: {
        get: function () {
            return 'hello' + this.name
        },
        set: function (value) {
            this.name = 'jack'
        },
        enumerable: true,
        configurable: true
    }
})

四、属性的设置和屏蔽

我们知道当我们书写以下代码时

obj.foo = 'bar'

如果obj存在一个名为foo的普通数据访问属性，这条赋值语句只会修改已有的属性值。

如果foo不是直接存在于obj中，[[prototype]]链就会被遍历，如果原型链上找不到foo，foo就直接被添加到obj上。

然而，如果原型链上找到了foo属性，情况就有些不一样了。

如果属性foo既出现在obj中也在其原型链中，那么obj中包含的foo属性就会屏蔽原型链里面的foo属性，这就是属性屏蔽，原理就是属性的查找规则。

下面我们看一下如果foo不直接存在于obj中，而是在其原型链中时，obj.foo = 'bar'会出现的三种情况：

  1. 如果原型链中存在名为foo的普通数据访问属性并且其writable为true，那么就会直接在obj中添加foo属性，它是属性屏蔽。
  2. 如果原型链中存在foo，但其writabla为false，那么无法修改已有属性或者在obj中创建屏蔽属性。如果运行在严格模式下，会抛出一个错误。否则这条赋值语句会被忽略，不会发生属性屏蔽。
  3. 如果原型链上存在foo并且它是一个setter，那就一定会调用这个setter。foo不会被添加到obj中，也不会重新定义这个setter。

大多数人认为，如果向原型链中已存在的属性赋值，就一定会发生属性屏蔽，但以上三种情况只有一种是如此。

如果希望在任何情况下都屏蔽foo，那就不能使用=操作符来赋值，而是使用Object.defineProperty()来向obj中添加foo。

情况一：

function Person() { }
Person.prototype.foo = 'foo'
var obj = new Person()
obj.foo = 'bar'
obj.foo   // 'bar'

情况二：

function Person() {}
Object.defineProperty(Person.prototype,'foo',{
    writable: false,
    enumerable: true,
    configurable: true,
    value: 'foo'
})
var obj = new Person()
obj.foo = 'bar'
obj.foo  // 'foo'

情况三：

function Person() {}
Person.prototype = {
    constructor: Person,
    name: 'foo',
    set foo (value) {
        this.name = value
    },
    get foo () {
        return this.name
    }
}
var obj = new Person()
obj.foo = 'bar'
obj.foo  // 'bar'
// obj中并没有foo这个属性，只是调用了setter
obj.hasOwnProperty('foo') // false

有些情况下会隐式产生屏蔽，一定要注意，思考一下代码：

var obj = {
    a: 2
}
var myObj = Object.create(obj)
obj.a  // 2
myObj.a  // 2

obj.hasOwnProperty('a')  // true
myObj.hasOwnProperty('a')  // false

myObj.a ++  // 隐式屏蔽

obj.a  // 2
myObj.a  // 3

myObj.hasOwnProperty('a')  // true

尽管myObj.a ++看起来是查找并增加obj.a的属性，但是别忘了++操作符相当于myObj.a = myObj.a + 1；因此++操作首先会通过原型链查找到obj.a，并读取其值为2，然后加1赋值给myObj.a。

avatar
文章
阅读
粉丝