美文网首页
Object构造函数解析

Object构造函数解析

作者: 萘小蒽 | 来源:发表于2018-06-27 12:45 被阅读18次
    • 简介

    object构造函数为给定制创建一个对象包装器。如果给定值是null或者undefined,将会返回并建立一个空对象,否者将会返回一个与给定值相对应的类型的对象。

    1.调用方法

    //以构造函数形式来调用
    new Object([value])
    

    tips:当以非构造函数形式被调用时,Object 等同于 new Object()。

    2.参数

    //str
    var obj = new Object('text')
    obj // [String: 'text']
    obj.length //4
    obj[0] // t
    obj[1] //e
    //Number
    var obj2 = new Object(1) 
    obj2 // [Number: 1]
    var obj3 = new Object() 
    obj3  // {}
    

    上例得出:
    1.如果value为基本数据类型String、Number、Boolean,则返回对应类型的对象。
    2.如果省略了value参数,或value为null、undefined,则返回自身无任何属性的Object对象,即返回一个空对象。

    console.log(obj instanceof Object);//true
    console.log(obj instanceof String);//true
    

    tips:你可以理解为类似于双性人吧


    - Object构造函数的方法

    一.Object.assign()

    方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象———合并对象。
    Object.assign()接受多个参数,第一个参数是目标对象,后面是源对象,assign方法将多个源对象的属性和方法都合并到了目标对象上面,如果在这个过程中出现同名的属性(方法),合并的属性(方法)会覆盖之前的同名属性(方法)。


    特性

    1.源对象会覆盖与目标对象的重名属性key

    其实用过vue的人也许会有这种需求,就是重置data,熟悉vue的api的人会这样:

    Object.assign(this.$data,this.$options.data())
    

    2.浅拷贝

    如果拷贝过来的属性的值是对象等复合属性,那么只能拷贝过来一个引用。

    这是一个藏宝图和宝藏的故事
    var obj = { a:{b:1} };
    var obj2 = Object.assign({},obj);
    我只拷贝了藏宝图,没有拷贝宝藏
    ojb.a.b = 2;
    console.log(obj2.a.b)
    //2
    

    tips:由于是浅拷贝,所以属性a(宝藏)的内部有任何变化,都会在目标对象上呈现出来。


    3.非对象的隐转换为对象

    Object可以说是为了对象而服务的方法,但是参数不为对象的时候,会将参数默认转换成对象。

    Object.assign([1,2,3,],[4,5])
    //数组[1,2,3]被转换成 key 为 1,2,3的对象;
    //而数组[4,5]被转换成key为1,2对象;
    //所以12被覆盖
    //[ 4,5,3]
    

    二.Object.defineProperty()

    方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

    参数(obj, prop, descriptor)

    obj 目标对象
    prop 要定义或修改的属性(key)名称
    descriptor 将被定义或修改的属性描述符。

    返回值:目标对象 obj

    该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性(for...inObject.keys 方法), 这些值可以被改变,也可以被删除操作符用于删除对象的某个属性;如果没有指向这个属性的引用,那它最终会被释放。")。这种方法允许这些额外的细节从默认值改变。默认情况下,使用Object.defineProperty()添加的属性值是不可变的。


    descriptor 属性描述

    目前对象的属性描述符有两种属性:

    -数据描述符

    数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。

    1.value

    属性对应的值,可以使任意类型的值,默认为undefined

    var data  = {};
    Object.defineProperty(data,"keys",{value:"newKey"});
    console.log( obj.keys );  //newKey;
    

    2.writable

    属性对应属性的值是否可以重写,设置为true可以被重写;设置为false,不能被重写。默认为false。

    var data = {};
    Object.defineProperty(data,"keys",{value:"newkey",writable:false})
    data.keys = "change keys";
    console.log(data.keys)
    //newkey
    

    3.enumerable

    决定属性是否可枚举(是否被for in或者obj.key()遍历)

    var data = {};
    Object.defineProperty(data,"key1",{
       value:"key1value",
        writable:false,
        enumerable:true
    });
    Object.defineProperty(data,"key2",{
       value:"key2value",
       writable:false,
       enumerable:false
    })
    //{key1: "key1value", key2: "key2value"}
      for(let i in data){ 
          console.log(i)
      }
    //key1
    

    3.configurable

    是否可以删除目标属性或是否可以再次修改属性的特性

    var data = {};
    //第一种情况:configurable设置为false,不能被删除。
    Object.defineProperty(data,"newKey",{
        value:"hello",
        writable:false,
        enumerable:false,
        configurable:false
    });
    //{newKey: "hello"}
    //删除属性
    delete obj.newKey;
    console.log( obj.newKey ); 
    //hello
    

    tips:这个属性起到两个作用:1,目标属性是否可以使用delete删除.2,目标属性是否可以再次设置特性

    -取存器述符

    数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。

    相关文章

      网友评论

          本文标题:Object构造函数解析

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