• 深入理解javascript对象系列第一篇——初识对象


    对象创建

      有以下三种方式来创建对象,包括new构造函数、对象直接量和Object.create()函数

    【1】new构造函数

      使用new操作符后跟Object构造函数用以初始化一个新创建的对象

        var person = new Object();
        // 如果不给构造函数传递参数可以不加括号 var person = new Object;
        person.name = 'liu';
        person.age = 28;
        console.log(person); // {name: "liu", age: 28}
    

      如果传入的参数是一个对象,则返回这个对象

        var o = {name: 'o'};
        var o2 = new Object(o);
        console.log(o === o2); // true
    

      如果传入的参数是一个原始类型的值,则返回该值对应的包装对象

      console.log(new Object('foo')); // String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
      console.log(new Object(1)); // Number{[[PrimitiveValue]]: 1}
      console.log(new Object(true)); // Boolean{[[PrimitiveValue]]: true}
    

      

      

    若Object()函数不通过new而直接使用,则相当于转换方法,可以把任意值转换为对象

      [注意]undefined和null会转换为一个空对象

    var uObj = Object(undefined);
    var nObj = Object(null);
    console.log(Object.keys(uObj));//[]
    console.log(Object.keys(nObj));//[]

      如果Object()的参数是一个对象,则直接返回原对象

    var o = {a:1};
    var oObj = Object(o);
    console.log(Object.keys(oObj));//['a']

      利用这一点,可以写一个判断变量是否为对象的函数

    function isObject(value) {
      return value === Object(value);
    }
    isObject([]) // true
    isObject(true) // false

      【2】对象字面量

       javascript提供了叫做字面量的快捷方式,用于创建大多数原生对象值。使用字面量只是隐藏了与使用new操作符相同的基本过程,于是也可以叫做语法糖

      对象字面量是由若干名值对组成的映射表,名值对中间用冒号分隔,整个映射表用花括号括起来

      不同属性之间用逗号分隔,属性名可以是任意字符串,属性值可以是任意类型表达式,表达式的值是属性值

    [注意]一般地,对象字面量的最后一个属性后的逗号将忽略,但在IE7-浏览器中导致错误

    //等价于var person = new Object();
    var person = {}; 
    

      [注意]一般地,对象字面量的最后一个属性后的逗号将忽略,但在IE7-浏览器中导致错误

    复制代码
    //IE7-浏览器中报错 SCRIPT1028: 缺少标识符、字符串或数字
    var person = {
        name : 'bai',
        age : 29,
        5 : true,
    };

    【3】Object.create()

      ES5定义了一个名为Object.create()的方法,它创建一个新对象,第一个参数就是这个对象的原型,第二个可选参数用以对对象的属性进行进一步描述

    var o1 = Object.create({x:1,y:1}); //o1继承了属性x和y
    console.log(o1.x);//1

      可以通过传入参数null来创建一个没有原型的新对象,但通过这种方式创建的对象不会继承任何东西,甚至不包括基础方法。比如toString()valueOf()

    var o2 = Object.create(null); // o2不继承任何属性和方法
    var o1 = {};
    console.log(Number(o1));//NaN
    console.log(Number(o2));//Uncaught TypeError: Cannot convert object to primitive value

      如果想创建一个普通的空对象(比如通过{}或new Object()创建的对象),需要传入Object.prototype

    var o3 = Object.create(Object.prototype); // o3和{}和new Object()一样
    var o1 = {};
    console.log(Number(o1));//NaN
    console.log(Number(o3));//NaN

    Object.create()方法的第二个参数是属性描述符

    var o1 = Object.create({z:3},{
      x:{value:1,writable: false,enumerable:true,configurable:true},
      y:{value:2,writable: false,enumerable:true,configurable:true}
    }); 
    console.log(o1.x,o1.y,o1.z);//1 2 3

    实例方法

    valueOf()

      valueOf()方法返回当前对象

    var o = new Object();
    o.valueOf() === o // true

    toString()

      toString()方法返回当前对象对应的字符串形式

    var o1 = new Object();
    o1.toString() // "[object Object]"
    
    var o2 = {a:1};
    o2.toString() // "[object Object]"

      一般地,使用Object.prototype.toString()来获取对象的类属性,进行类型识别,详细情况移步至此

    toLocaleString()

      toLocaleString()方法并不做任何本地化自身的操作,它仅调用toString()方法并返回对应值

      [注意]DateNumber类对toLocaleString()方法做了本地化定制

    var o = {a:1};
    o.toLocaleString() // "[object Object]"

    判断为空

      判断对象是否为空,有以下三种方法

      1、for-in语句

    复制代码
    let isEmpty = (obj) => {
      for(let i in obj){
        return false
      }
      return true
    }
    console.log(isEmpty({}))//true
    console.log(isEmpty({a:1}))//false
    复制代码

      2、JSON.stringify方法

    let isEmpty = (obj) => {
      return JSON.stringify(obj) === '{}'
    }
    console.log(isEmpty({}))//true
    console.log(isEmpty({a:1}))//false

      3、Object.keys方法

    let isEmpty = (obj) => {
      return !Object.keys(obj).length
    }
    console.log(isEmpty({}))//true
    console.log(isEmpty({a:1}))//false
  • 相关阅读:
    jquery源码解读 (摘自jQuery源码分析系列图书(pdf)) 持续更新
    jquery源码学习
    判断浏览器是ie9座特殊处理
    js继承
    引入flash
    IE7下面踩得坑
    导航栏对应相应的模块,可点击索引和滚动索引到需要到达的位置
    java的eclipse的使用
    弹窗在大屏上居中对齐,在小屏上被挡住解决方案
    左侧菜单栏,有对个li对应一个content
  • 原文地址:https://www.cnblogs.com/weblff/p/9767195.html
Copyright © 2020-2023  润新知