JavaScript 模式(三)

JS字面量和构造函数


1.总体说明

  • 尽量避免使用构造函数
  • 按需创建对象方式,最适合选择字面量

2.字面量语法

  • 对象包装在大括号中
  • 属性和方法,按照 名称-值 的方式,并以逗号区分。【注意:最后一个逗号不要加,IE不兼容】
  • 用冒号来分割名称和值
  • 赋值后右大括号后要有分号

格式如下:

   var objectName = {
      propName: value,
      methodName: function(){
          //todo
      }
   };

3.构造函数实质

  • JS并没有类的概念,只是使用函数实现了类的用法
  • 不要使用 new Object(value) 的构造函数,其动态决定创建值的类型,会造成意外的后果

构造函数的实质:

   var Constructor = function(value){
      this.propName = value;
      this.methodName = function(){
           //todo
      }
   }

等价于下述过程(并非实际情况):

   var Constructor = function(value){

      //使用字面量创建空对象
      //var this = {};
 
      //添加属性和方法
      this.propName = value;
      this.methodName = function(){
           //todo
      }

      //返回该字面量
      //return this;
   }

【说明】

  • 由上述实质可以说明,在构造函数中可以返回其他对象值,用来代替this,但必须是对象值,否则仍然返回this
  • 实际情况中this并非为{},而是从其他prototype创建而来
  • 如果构造函数不使用new来操作,则内部的this会指向全局变量,后果意想不到

4.一种安全的构造函数模式

为防止丢失new操作符而导致的构造函数误用,可使用以下方式创建构造函数:

   var Constructor = function(value){
      
      //自调用构造函数:方式一
      if(!this instanceof Constructor){
         return new Constructor();
      }

      //自调用构造函数:方式二 严格模式下不支持
      if(!(this instanceof arguments.callee)){
         return new arguments.callee();
      }

      this.propName = value;
      this.methodName = function(){
           //todo
      }   

   }

5.数组的构造函数

数组采用字面量构造和构造函数等同:

   var arrayName = new Array(value1, value2, value3 ...);

等同于

   var arrayName = [value1, value2, value3 ...];

【构造函数的问题】

如果使用数组的构造函数,则会有如下问题:

   //生成长度为n的数组
   var arrayName = new Array(n);
   
   //arrayName[k] 对于数组中的元素为 undefined

【检查数组属性】

  • 使用typeof操作符,返回object
  • 使用Array.isArray()方法,但部分环境无法使用
  • 自定义方法:
   if(typeof Array.isArray === "undefined"){
      Array.isArray = function(arg){
         return Object.prototype.toString.call(arg) === "[object Array]";
      }
   }  

6.JSON数据

  • JSON和字面量对象的区别:JSON是键-值对,但键名称必须为字符串(使用引号包装)
  • JSON数据的解析与序列化
  //解析
  var objectName = JSON.parse(jsonString);

  //序列化
  var jsonString = JSON.stringify(objectName);

7.正则表达式

构造函数生成:

  var re = new RegExp(regexString,option);
  //option: "g" "m" "i"组合

【说明】:

  • 正则表达式需要进行转义,难以阅读
  • 是否使用new操作符都可以

字面量生成:

  var re = /regexString/option
  //option: g m i 组合,直接跟在后面

【说明】

  • 在以前的版本中,一个字面量创建后,后面返回的对象都相同,新版本已经更改

8.错误对象

内置的错误对象,均可以通过构造函数创建:

  • Error()
  • SyntaxError()
  • TypeError()
    内置对象均有以下两个属性:
  • name :错误名称,一般就是构造函数的名称
  • message :创建对象时附带的消息

【自定义错误对象】

通过throw抛出任意对象,因此可以创建自定义对象

   try{
      
      throw{
        name:value,
        message:value,
        propName:value,
        methodName:function
      };

   } catch(e){
      //todo
   }

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 2,745评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,259评论 18 138
  • 第一幅图人物衣服的颜色涂得很失败 第二幅图人物腿部曲线画的不太自然 今天一开始很没信心,怕我画不好人物。可画着画着...
    anlence阅读 131评论 1 1