美文网首页JavaScript高级程序设计Web前端之路
第六章(1):面向对象的程序设计

第六章(1):面向对象的程序设计

作者: 日暮途远_ | 来源:发表于2017-06-23 17:39 被阅读21次

    前言

    ECMA将对象定义为:无序属性的集合,其属性可以包括基本值,对象或者函数。每个对象都是基于一个引用类型创建的。

    理解对象

    1. Object.defineProperty()
      ECMAScript中有两种属性:数据属性和访问器属性。通过Object.defineProperty()可以修改属性的默认特征。
    /**
       * 数据属性
       * configurable: 是否可以修改属性,删除属性。默认为true
       * enumerable: 是否可以通过for-in循环返回此属性。默认为true
       * writable: 是否可写, 默认为true
       * value: 默认值,默认为undefined
       * 在调用Object.defineProperty()方法时,如果不指定, configurable, enumerable, writable特性的默认值都是false
       *
         */
      var animal = {
        age: 2
      }
    
      Object.defineProperty(animal, 'name', {
        value: 'pig'
      })
    
      console.log(Object.getOwnPropertyDescriptor(animal, 'name'))  // Object {value: "pig", writable: false, enumerable: false, configurable: false}
    
      animal.name = 'bird'
      console.log(animal.name)  // 无法修改,结果还是pig
    
      delete animal.name
      console.log(animal.name)  // 无法删除,结果还是pig
    
      // 结果为: age : 2(name并没有循环)
      for(let key in animal) {
        console.log(key, ':', animal[key])
      }
    
      //Uncaught TypeError: Cannot redefine property: name(configurable定义为false,则不可在定义为true)
      Object.defineProperty(animal, 'name', {
        value: '123'
      })
    
        /**
       * 访问器属性
       * get 访问属性的值
       * set 设置属性的值
       * 只有get没有set,只读
       * 只有set没有get, 只写
       * 只有get,set,configurable,enumerable属性,没有value和writable属性
         */
      var loan = {id: '0'}
      Object.defineProperty(loan, 'id', {
        get: function () {
          return id
          },
          set: function (newVal) {
          id = newVal
          },
        configurable: true,
        enumerable: true
      })
    
      loan.id = '10';
      console.log(loan.id)  // 0010
    
    1. Object.defineProperties()
      利用这个方法可以一次定义多个属性
    /**
     * defineProperties 定义多个属性
     * 第一个参数是对象
     * 后一个参数也是对象。对象中包含需要设置的属性
     */
    var user = {}
    Object.defineProperties(user, {
      name: {
        value: '日暮途远'
      },
      password: {
        get: function () {
          return this.passowrd
        },
        set: function (newValue) {
          this.passowrd = newValue
        }
      },
      age: {
        value: 18,
        writable: false
      }
    })
    
    //结果:
    //  Object {name: "日暮途远", age: 18}
    //  age
    //      :
    //      18
    //  name
    //      :
    //      "日暮途远"
    //  password
    //      :
    //      (...)
    //  get password
    //      :
    //      function ()
    //  set password
    //      :
    //      function (newValue)
    //  __proto__
    //      :
    //      Object
    console.log(user)
    
    1. Object.getOwnPropertyDescriptor()
      通过Object.getOwnPropertyDescriptor()方法可以获得给定属性的描述符。
    /**
     * getOwnPropertyDescriptor 获取属性的特性
     * 第一个参数是对象
     * 第二个参数是属性名称
     */
    // 访问器类型
    console.log(Object.getOwnPropertyDescriptor(user, 'password'))  // Object {enumerable: false, configurable: false, get: function, set: function}
    // 数据类型
    console.log(Object.getOwnPropertyDescriptor(user, 'age')) // Object {value: 18, writable: false, enumerable: false, configurable: false}
    

    引用

    • javascript高级程序设计
    • MDN

    相关文章

      网友评论

        本文标题:第六章(1):面向对象的程序设计

        本文链接:https://www.haomeiwen.com/subject/mcnccxtx.html