zoukankan      html  css  js  c++  java
  • Object API

    Object API

    创建对象

    1. 对象字面量

      let obj = {}
      

      语法糖,最终会被引擎转化为 let obj = new Object()

    2. 原型继承的方式

      let obj2 = Object.create({})
      

      通过原型继承的方式来创建对象,创建出的对象o是一个空对象,并且o的原型指向了{}

      Object.create = function(obj2){
           let F = function(){}
           f.prototype = obj2
          return new F()
      }
      理解为F为一个空的构造函数,F原型指向传入的参数,返回F的实例
      通过Object.create生成的对象的原型指向了传入的参数,实现原型继承
      

      这种方式下,

      obj2._proto_指向{}空对象
      obj2._proto_._proto_指向对象的原型
      obj2._proto_._proto_ == Object.prototype
      
    3. new 构造函数

      当用new运算符调用一个函数时,函数返回一个对象,通过构造函数内this指向要返回的对象

    function Person (name){
        this.name = name
    }
    let a = new Person('cici')
    //此时a = Person{name:'cici'}
    
    
    function Person2 (name){
        let obj = {}
        this.name = name
        return obj
    }
    let a2 = new Person('cici')
    //此时a2 = person{name:'cici'}
    
    function Person3 (name){
        this.name = name
        return 'xixi'
    }
    let a3 = new Person3('cici')
    
    //此时a3 = person{name:'cici'}
    //console.log(Person3()) //xixi
    //console.log(a3()) // a3 is not a function
    //console.log(a3)  //Person3 {name: "cici"}
    
    1. Object.entries

    将对象中的所有key:value转为[key,value]格式,返回包含所有健值对的二维数组

        let obj = {name: 'derek',age:18}
        let result = Object.entries(obj) 
        console.log(result) // => [['name','derek'],['age',18]]
    
    
    1. Object.fromEntries()

    把Object.entries转换后的二维数组重新转换为对象

        let obj = {a:1,b:2}
        let entrise = Object.entries(obj)//[[a:1],[b:2]]
        let obj2 = Object.fromEntries(entries)   // {x:3,y:4}
    

    6.Object.assign()

    将多个对象合并到目标的属性合并到目标对象中,相同属性的值以最后一个合并对象的为准,返回目标对象,不改变被合并对象,可以实现浅克隆

    • 语法: Object.assign(obj,obj1,obj2...)
    • obj: 目标对象,可传{}
    • obj1,obj2...: 被合并的对象,一个或多个
    • PC端IE全不兼容,移动端只有少量浏览器兼容
      let obj = {name: 'derek',age: 18}
      let obj1 ={ name: 'tom', sex: 'F' }
      let result = Object.assign({},obj,obj1,{aa:1})
      console.log(result)   // => {name:'tom',age:18,sex: 'F',aa:1}
      console.log(obj)     // => {name: 'derek',age: 18}
      console.log(obj1)   // => { name: 'tom', sex: 'F' }
    
    
    1. Object.defineProperty()

    Object.defineProperty(obj,prop,descriptor):对obj对象上对prop属性进行定义或修改,其中descriptor为被定义或修改的属性符。

    其中对于descriptor属性符可以设置的值如下显示

    • value:表示属性的值,默认为undefined
    • writable:该属性是否为可写,如果直接在对象上定义属性,则默认为true。如果设置为false,则属性仅为可读。
    • configurable: 如果为false的话,则不能修改(writabel,configurable,enumerable),如果直接在对象上定义属性,则默认为true
    • enumerable:是否能够被枚举,如果直接在对象上定义属性,则默认为true
    • get:当对象访问prop属性的时候,会调用这个方法,并返回结果。默认为undefined
    • set:当对象设置该属性的时候,会调用这个方法,默认为undefined 注意:兼容性不错,移动端几乎全兼容,PC端兼容IE9以上,IE8也能运行,但是只能传dom对象
          var obj = {}, value = null;
      Object.defineProperty(obj, "num", {
          get: function(){
              console.log('执行了 get 操作')
              return value;
          },
          set: function(newValue) {
              console.log('执行了 set 操作')
              value = newValue;
          }
      })
     
      obj.num = 1 // 执行了 set 操作
     
      console.log(obj.num) // 1 执行了 get 操作
    
    
    1. Object.getOwnPropertySymbols()

    Object.getOwnPropertySymbols(obj): 返回一个对象中所有以Symbol类型为key的的数组

      let obj = {name: 'derek'}
      let a =Object.getOwnPropertySymbols(obj)
      console.log(a) // => []
      let sys = Symbol()
      obj[sys] = 'test'
      let b =Object.getOwnPropertySymbols(obj)
      console.log(b) // => [Symbol()]
    
    
    1. Object.freeze()`

    Object.freeze(obj):浅冻结一个对象,使其不能做任何修改,深层级的还是可以修改

    如果要实现深度冻结,可以通过递归来实现

      let obj = {name: 'derek',child:{age:18}}
      Object.freeze(obj)
      obj.name = 'tom' // 不能修改原有属性对应的值
      console.log(obj) // => {name:'derek'}  
      obj.test = 'test' // 不能给对象添加新属性
      console.log(obj)  // => {name: 'derek'}
      delete obj.name   // 不能删除对象的属性
      console.log(obj)  // => {name: 'derek'}
     
      obj.child.age=22 // 可以对深层级的进行修改
      console.log(obj.child) // => {age:22}
    
    1. Object.isFrozen()

    判断一个对象是否被冻结,是放回true,反之返回false

      let obj = {name: 'derek'}
      Object.isFrozen(obj) //=> false
      Object.freeze(obj)
      Object.isFrozen(obj) //=> true
    
    1. Object.getOwnPropertySymbols()

    返回一个对象中所有以Symbol类型为key的的数组

      let obj = {name: 'derek'}
      let a =Object.getOwnPropertySymbols(obj)
      console.log(a) // => []
      let sys = Symbol()
      obj[sys] = 'test'
      let b =Object.getOwnPropertySymbols(obj)
      console.log(b) // => [Symbol()]
    
    
    1. Object.keys()

    查找目标对象的所有key值,并返回一个包含所有key值的数组,和Object.getOwnPropertyNames()效果一致

      let obj = {name: 'derek',age:22,sex:'M'} 
      let a = Object.keys(obj)
      console.log(a) //=> ['name','age','sex']
    
    1. Object.values()

    返回一个对象的所有value值的数组集合

      let obj = {name: 'derek',age:18}
      let result = Object.values(obj) 
      console.log(result) // => ['derek',18]
    
    
    1. Object.seal()

    对一个对象进行密封,并返回被密封的对象,这些对象都是不能够添加属性,不能删除已有属性,以及不能够修改已有属性的可枚举型、可配置型、可写性

      let obj = {name: 'derek'}
      Object.seal(obj)
      obj.name = 'tom' // 可以修改原有属性对应的值
      console.log(obj) // => {name:'tom'}  
      obj.test = 'test' // 不能给对象添加新属性
      console.log(obj)  // => {name: 'tom'}
      delete obj.name   // 不能删除对象的属性
      console.log(obj)  // => {name: 'tom'}
    
    
    1. Object.isSealed()

    判断一个对象是否被密封,是放回true,反之返回false

      let obj = {name: 'derek'}
      Object.isSealed(obj) //=> false
      Object.freeze(obj)
      Object.isSealed(obj) //=> true
    
    
    1. Object.preventExtensions()

    让一个对象永远不能添加新的属性,严格模式下会报错

      let obj = {name: 'derek'}
      obj.age = 22 
      console.log(obj.age) // => 22
      Object.preventExtensions(obj)
      obj.sex = 'M'  // 报错
      obj._proto_.sex = 'M'  //可以在原型对象上添加属性
      console.log(obj.sex) // => 'M'
    
    1. Object.isExtensible()

    判断一个对象是否可以修改属性,是放回true,反之返回false

        let obj = {name: 'derek'}
        Object.isExtensible(obj) //=> true
    
    
    1. Object.is(val1,val2)

    确定两个值是否是相同的值

    • 注意:与=相比,其会将-0和+0看成不等,并且对于两个NaN的比较,Object.is()会看成是相等的,而=会将0、-0、+0看成相等的,两个NaN看成不等
      Object.is(0,-0) // => false
      Object.is(0,0) // => true
      Object.is(NAN,0/0) // => true
      Object.is(3,3/1) // => true
    
    
    1. Object.getPrototypeOf(obj):

    该方法返回对象的原型对象,如果没有的话,则返回null。

      let obj = {name: 'derek',age:22,sex:'M'} 
      let a = Object.getPrototypeOf(obj)
    
    1. Object.getOwnPropertyDescriptor(obj,prop)

    查询prop属性存是否在对象obj上,在则返回其属性描述符,如果不存在就返回undefined

    属性描述符包括:

    • value:表示属性的值,默认为undefined
    • writable:该属性是否为可写,如果直接在对象上定义属性,则默认为true。如果设置为false,则属性仅为可读。
    • configurable: 如果为false的话,则不能修改(writabel,configurable,enumerable),如果直接在对象上定义属性,则默认为true
    • enumerable:是否能够被枚举,如果直接在对象上定义属性,则默认为true
    • get:当对象访问prop属性的时候,会调用这个方法,并返回结果。默认为undefined
    • set:当对象设置该属性的时候,会调用这个方法,默认为undefined
      let obj = {name: 'derek',age:22,sex:'M'}
      let a = Object.getOwnPrepertyDescriptor(obj,'name')
      let b = Object.getOwnPrepertyDescriptor(obj,'test')
      console.log(a) // => {value:'derek',writable: true,enumerable: true,configurable: true}
      console.log(b) // => undefined
    
    1. Object.getOwnPropertyNames(obj)

    查找目标对象的所有key值,并返回一个包含所有key值的数组,和Object.keys()效果一致

    • 枚举的顺序,返回一个数组,枚举出来对象的属性
    • 对象的顺序其实是浏览器厂商自行规定
      先排数字,升序 再排其他,按照书写顺序、
      let obj = {name: 'derek',age:22,sex:'M'} 
      let a = Object.getOwnPropertyNames(obj)
      console.log(a) //=> ['name','age','sex']
    
    1. hasOwnProperty(propertyName String)

    检查指定的属性是不是自有属性的

    区分对象的那些属性是自己的,那些是共有

    属性(从父对象哪里继承来的)?

    如果要检查是共有属性的话,还需要排除没有这个属性 共有属性是指在原型对象中声明的属性

    参数:
    propertyName String类型指定的属性名称

    返回值:
    函数的返回值为Boolean类型。如果对象object具有名称为propertyName的属性,则返回true,否则返回false。

    1. Object.setPrototypeOf()

    设置某个对象的隐式原型 proto

        let obj1 = {a:1}
        let obj2 = {b:2}
    
        Object.setPrototypeOf(obj1,obj2)
        console.log(obj1.__proto__)//{b:2}
    
  • 相关阅读:
    SmartJS 系列规划分享和背景介绍
    SmartJS 第一期(0.1)发布
    让文档和Demo生成更加简单和强大
    SmartDoc(YUIDoc) 注释编写
    smartjs
    smartjs
    smartjs 0.3 DataManager 发布&介绍
    smartjs 0.2 OOP讲解
    smartjs 0.2 OOP讲解
    smartjs 0.2发布
  • 原文地址:https://www.cnblogs.com/dudududadada/p/15339367.html
Copyright © 2011-2022 走看看