• 阅读JavaScript文档-对象



    一、JavaScript是面向对象编程

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

    二、对象属性的访问

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

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

    对象1

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

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

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

    三、对象的创建

    1.使用对象初始化器

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

    其中对象也可以作为属性

    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')
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    对象5

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

        create(proto,[propertiesObject]);
    
    • 1
    • 第一个参数是对象原型
      该方法非常有用,因为它允许你为创建的对象选择一个原型对象,而不用定义构造函数。
          var myCar = {
              make : "一汽大众",
              model : "Mustang",
              year : 2021,
              getYear:function(){
                  console.log(this.year)
              }
          }
      
          let newcar=Object.create(myCar)
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    对象6

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

    4.原型链

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

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

    • 原型链顺序
      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])
          }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      对象9

    2.Object.keys(obj)

    该方法返回对象的属性数组
    
    • 1
    • 代码示例
      对象10
    • 可以遍历该数组去遍历该对象的所有属性
          let attrs=Object.keys(myCar)
          for(let idx=0;idx<attrs.length;idx++){
              console.log(attrs[idx]+":"+myCar[attrs[idx]])
          }
      
      • 1
      • 2
      • 3
      • 4
      对象11

    3.Object.getOwnPropertyNames()

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

    • 代码示例
      对象12

    • 对数组枚举属性

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

      对象13

    4.三种方式对比说明

    对象14

    • 对于数组对象
      对象15
    • 对于一般对象
      • 代码示例
            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)
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
      • 运行结果
        对象16

    5.问题

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

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

    • 解决方式
      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
      通过上面教程,有四种属性描述符
      对象18
      所以在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)
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36

      对象19
      结果与预想相同

    参考

  • 相关阅读:
    某网书籍信息爬虫
    [附源码]JAVA毕业设计货币博物馆展品管理系统(系统+LW)
    有效的字母异位词
    有状态软件如何在 k8s 上快速扩容甚至自动扩容
    C++11 initializer_list 轻量级初始化列表的使用场景(让自定义类可以用初始化列表的形式来实例化对象)
    简化 Go 开发:使用强大的工具提高生产力
    (附源码)springboot仓库管理系统 毕业设计 260931
    基于Springboot的旅游网管理系统设计与实现(有报告)。Javaee项目,springboot项目。
    u-boot命令2
    Elasticsearch优化
  • 原文地址:https://blog.csdn.net/hehe_soft_engineer/article/details/126827303