前端学习指南饥人谷技术博客让前端飞

《高程第六章---面向对象程序设计》小结---理解对象

2017-11-26  本文已影响22人  大春春

《JavaScript高级程序设计》这本书比较厚,之前刚学JS的时候挑战过一次,结果止步第三章。现在工作了一段时间想想还是得回过头来补充一下基础知识的。目前刚看完第六章,就从第六章开始总结吧,再逐步补充之前的好了。

理解对象

该章节讲解了JS中对象的属性类型以及对象属性间的一些设置。

JS中的对象是什么

如何创建对象

JS中创建对象的方法非常简单,有两种:

let a = new Object()
a.name = 'oxc'
console.log(a) // {name: "oxc"}

当然,你也可以在Object构造函数中传入一个参数,然后创建出来的对象是原始数据类型对象。

let a = new Object(1) // Number {[[PrimitiveValue]]: 1}
console.log(a) // 1
typeof a // 'object'
let a = {
    name: 'oxc'
}
console.log(a) // {name: "oxc"}

对象的属性类型

该章节介绍了JS对象属性的类型及其特点,其中属性类型分为了数据属性访问器属性两种,同时介绍了定义属性特征值的api: defineProperty()defineProperties,以及读取对象属性特征值的api: getOwnerPropertyDescriptor()

        let a = {}
        Object.defineProperty(a, 'name', {
            configurable: true,
            enumerable: true,
            writable: true,
            value: 'oxc'
        })
        console.log(a)  //  {name: 'oxc'}
        let a = {}
        Object.defineProperties(a, {
            name: {
                value: 'oxc',
                writable: false
            },
            age: {
                value: 12,
                writable: false
            }
        })
        console.log(a)  // {name: "oxc", age: 12}
        let a = {}
        Object.defineProperty(a, 'name', {
            configurable: false,
            enumerable: false,
            writable: false,
            value: 'oxc'
        })
        console.log(a)  //  {name: 'oxc'}
        // 该例子创建了一个名为name的属性,该属性可以被delete删除,for-in循环无法遍历它,也无法对其值进行修改,他的值为`oxc`,并且也不可以在下面对其属性特征值进行重写,重写特征值不会有任何反应。
       // 该属性就是数据属性,值得一提的是,用对象字面量或者对象构造函数新建的对象属性`configurable`,`writable`,`enumerable`三个值默认都为true
        let a = {
            _name: 'oxc'
        }
        Object.defineProperty(a, 'name', {
            configurable: false,
            enumerable: true,
            get() {
                return this._name
            },
            set(value) {
                this._name = value
            }
        })
    //  这时候我们可以通过调用a.name来对_name属性进行访问和写入,并且可以在访问和写入的过程中通过get和set做一些手脚,例如我想通过name读取到的是123,可以在get函数中这么写
    get(){ return 123 }
    console.log(a.name)   // 123
// 又或者我想别人无论怎么设置a.name, a._name都是123,就可以在set函数中这么写
    set(value){ this._name = 123 }
// 另外值得一提的是,如果enumerable设置为true, 那么访问器属性name也是可以可以被for-in循环遍历到的
        let a = {
            _name: 'oxc',
            age: 10
        }
        Object.defineProperty(a, 'name', {
            configurable: false,
            enumerable: true,
            get() {
                return this._name
            },
            set(value) {
                value === '大春春' ? this.age = 80 : this.age = 10
            }
        })
        a.name = '大春春'
        console.log(a)      //  {_name: "oxc", age: 80}
// 普通创建的对象属性特征值
        let a = {
            name: 'oxc'
        }
        let b = Object.getOwnPropertyDescriptor(a, 'name')
        console.log(b) // {value: "oxc", writable: true, enumerable: true, configurable: true}
// 使用Object.defineProperty创建的属性
        let a = {}
        Object.defineProperty(a, 'name', {
            value: 'oxc'
        })
        let b = Object.getOwnPropertyDescriptor(a, 'name')
        console.log(b) // {value: "oxc", writable: false, enumerable: false, configurable: false}

读取属性的特性

读取属性的特征值可以用Object.getOwnPropertyDescriptor, 该方法接受两个参数,第一个参数是需要读取的属性所在的对象,第二个是需要读取的属性,例子如上默认值例子。

上一篇 下一篇

猜你喜欢

热点阅读