阅读JavaScript文档-对象

---

一、JavaScript是面向对象编程

根本原因是：JavaScript具有封装、继承、多态三大特性

二、对象属性的访问

1.通过objectName.propertyName来进行访问

2.可以通过方括号objectName[‘propertyName’]进行访问

• 注：
  • 方括号访问属性的方式更加灵活，一个属性的名称如果不是一个有效的 JavaScript 标识符（例如，一个由空格或连字符，或者以数字开头的属性名），就只能通过方括号标记访问。
  • 这个标记法在属性名称是动态判定（属性名只有到运行时才能判定）时非常有用。
  • 可以通过变量来动态访问对象属性：
    

3.当访问的属性不存在时

• 访问得到的值为undefined(不是null)
  
• 可以通过直接赋值给对象添加未定义属性
  

三、对象的创建

1.使用对象初始化器

    var obj = { 
        property_1              :   value_1,   // property_# 可以是一个标识符...
        2                       :   value_2,   // 或一个数字...
       ["property" +3]          :   value_3,   // 或一个可计算的key名...
        // ...,
        "property n"            :   value_n,   // 或一个字符串
        propertyobj             :   newnoj     // 或一个对象
    }; 

其中对象也可以作为属性

2.构造函数创建对象(JavaScript1.1版本以前需要用这个)

• 步骤
  • ①创建构造函数定义对象的属性和方法，一般将函数名首字母大写
  • ②通过new来创建对象实例
• 代码示例

      function myCar(make,model,year){
          this.make=make      //用this将传入的参数赋值给对象属性
          this.model=model
          this.year=year
      }
  
      let mynewcar=new myCar('宝马','newmodel','2021')
  

3.Object.create方法选择对象原型来创建函数

    create(proto，[propertiesObject]);

• 第一个参数是对象原型
  该方法非常有用，因为它允许你为创建的对象选择一个原型对象，而不用定义构造函数。

      var myCar = {
          make : "一汽大众",
          model : "Mustang",
          year : 2021,
          getYear:function(){
              console.log(this.year)
          }
      }
  
      let newcar=Object.create(myCar)
  

• 第二个参数可选
  传入的对象不为undefined时，会把对象的 自有可枚举属性 添加到新对象中。
  
  注： 创建出对象以后可以再添加新属性，也可以添加和原型对象相同的属性，读取该属性时读取得到的是新对象自有属性，原型对象属性并没有改变(这里要提到 原型链 )，但是调用原型对象方法如果需要用到相同属性时，调用的则是该对象自己的属性值。

4.原型链

• 说明
  这也是JavaScript的继承的依据，newcar对象继承myCar，每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个 原型链 中的最后一个环节。

• 代码示例
  原型对象并没有变，调用原型对象的getYear方法使用的属性值是新对象定义的值
  

• 原型链顺序
  newcar{year}—>myCar{make,model,year,getYear}—>Object.prototype—>null
  查找year时，查看自身对象有没有该属性，如果有直接使用，如果没有则向上找他的原型对象，如果原型对象有，则使用，如果还是没有则继续向上找原型对象，直到原型对象为null，则结束查找，这个顺序也就是原型链。

四、遍历对象属性

1.for…in…方式

• 代码示例

      var myCar = {
          make : "一汽大众",
          model : "Mustang",
          year : 2021,
          getYear:function(){
              console.log(this.year)
          }
      }
  
      for(let attr in myCar){//attr得到的是属性，[]方法得到值
          console.log(attr+":"+myCar[attr])
      }
  

  

2.Object.keys(obj)

该方法返回对象的属性数组

• 代码示例
  
• 可以遍历该数组去遍历该对象的所有属性

      let attrs=Object.keys(myCar)
      for(let idx=0;idx<attrs.length;idx++){
          console.log(attrs[idx]+":"+myCar[attrs[idx]])
      }
  

  

3.Object.getOwnPropertyNames()

• 说明
  返回一个数组，该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

• 代码示例
  

• 对数组枚举属性

      let myarr=['A','B','C','D']
      let myarrattrs=Object.getOwnPropertyNames(myarr)
  

  

4.三种方式对比说明

• 对于数组对象
  
• 对于一般对象
  • 代码示例

        var myCar = {
            make : "一汽大众",
            model : "Mustang",
            year : 2021,
            getYear(){
                console.log(this.year)
            }
        }
    
        var hisCar = {
            'price':{
                value: 100
            },
            'size': {
                value: 100,
            },
        }
        var newcar= Object.create(myCar,hisCar)
    
        //way1(还会取到原型链上的可枚举属性，可以通过hasOwnProperty()方法筛除)
        let forattrs=[]
        for(let attr in newcar){//attr得到的是属性，[]方法得到值
            forattrs.push(attr)
        }
    
        //way2
        let keyattrs=Object.keys(newcar)
    
        //way3
        let getOwnattrs=Object.getOwnPropertyNames(newcar)
    

  • 运行结果
    

5.问题

• 描述
  明明newcar里面有属性price和size，为什么在枚举属性的时候，他们两个都消失了呢？

• 原因
  是由于Object.create的过程中漏了一个地方：
  
  这个对应的属性描述符给忽略了。

• 解决方式
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
  通过上面教程，有四种属性描述符
  
  所以在Object.create第二个对象里面需要设置属性描述符，才能真正的把属性传入，并可以设置是否可以修改该属性。

      var myCar = {
          make : "一汽大众",
          model : "Mustang",
          year : 2021,
          getYear(){
              console.log(this.year)
          }
      }
  
      var hisCar = {
          'price':{
              value: 100,
              configurable:true,
              enumerable:true,
              writable:true
          },
          'size': {
              value: 100,
              configurable:true,
              enumerable:true,
              writable:true
          },
      }
  
      var newcar= Object.create(myCar,hisCar)
      //way1(还会取到原型链上的可枚举属性，可以通过hasOwnProperty()方法筛除)
      let forattrs=[]
      for(let attr in newcar){//attr得到的是属性，[]方法得到值
          forattrs.push(attr)
      }
  
      //way2
      let keyattrs=Object.keys(newcar)
  
      //way3
      let getOwnattrs=Object.getOwnPropertyNames(newcar)
  

  
  结果与预想相同

参考

• 官方文档：
  JavaScript使用对象