zoukankan      html  css  js  c++  java

  • JavaScript模式：字面量和构造函数

     

    本篇主要讨论了通过字面量以构造对象的方法，比如对象、数组以及正则表达式等字面量的构造方法，同时还讨论了与类似Object()和Array()等内置构造函数相比，为什么基于字面量表示法是更为可取。

    对象字面量

    JavaScript中并没有类的概念，正如其他动态语言一样，JavaScript中的所有元素均为对象。我们可以把JavaScript中的对象看做是其他语言中的HashTable，即键-值对（key-value pair）哈希表。

    在JavaScript中所创建的自定义对象在任何时候都是可变的，你可以在任何时间添加或删除对象的属性和方法。考虑以下例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 定义一个空对象
    var dog = {};
     
    // 向dog对象添加一个属性
    dog.name = "Ben";
     
    // 向dog对象添加一个方法
    dog.getName = function () {
        return dog.name;
    };

    上例中，dog对象开始时是处于“干净”状态，即一个空对象。然后向该对象添加了一个属性和一个方法。此外在程序生命周期内的任何时候，都可以执行一下操作：

    改变属性和方法的值，如下所示：

    1
    2
    3
    4
    dog.getName = function () {
        // 重新定义该方法
        return "Max";
    };

    完全删除属性或方法：

    1
    delete dog.name;

    添加更多的属性和方法：

    1
    2
    3
    4
    dog.say = function () {
        return "Hello";
    };
    dog.fleas = true;

    以下是一种语法更为简洁的对象字面量模式，你可在创建对象时向其添加属性和方法，如下所示：

    1
    2
    3
    4
    5
    6
    var dog = {
        name: "Max",
        getName = function () {
            return this.name;
        }
    };

    对象字面量语法

    1. 将对象包装在大括号中；

    2. 对象中以逗号分隔键值对；

    3. 用冒号分隔属性名和属性值；

    4. 不要忘记最后大括号后的分号。

    自定义构造函数

    除了对象字面量模式，可以使用自己的构造函数来创建对象，如下所示：

    1
    2
    var max = new Person("Max");
    max.say();  // 输出"I am Max"

    这种模式看起来很像Java中使用一个名为Person的类创建一个对象，但实际上正如本篇开头所说，JavaScript中并没有类，Person只不过是一个函数而已。

    以下是Person构造函数的定义：

    1
    2
    3
    4
    5
    6
    var Person = function (name) {
        this.name = name;
        this.say = function () {
            return "I am " + this.name;
        };
    };

    使用new操作符调用构造函数（Person方法）时，函数内部会发生以下微妙的变化：

    1. 创建一个空对象并且this变量引用了该变量，同时还继承了该函数的原型；

    2. 属性和方法被加入到this引用的对象中；

    3. 新创建的对象由this所引用，并且最后隐式地返回this（如果没有显示地返回其他对象）。

    所以使用new操作符调用构造函数时，Person函数看起来会变成如下这样：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var Person = function (name) {
        // 使用字面量模式创建一个新对象
         var this = {};
     
        // 向this添加属性和方法
         this.name = name;
        this.say = function () {
            return "I am " + this.name;
        };
     
        return this;
    };

    需要注意的是，如果在调用构造函数时忘记使用new操作符，函数中的this将会指向全局对象（在浏览器中，this将会指向window），这回带来错误的构造结果。

    数组字面量

    JavaScript中的数组也是对象，且数组字面量表示法更为简单，更可取，如下所示：

    1
    2
    3
    4
    var a = ["max", "allen", "gao"];
     
    console.log(typeof a); // 输出"object"
    console.log(a.constructor === Array); // 输出true

    JSON

    JSON代表了JavaScript对象表示（JavaScript Object Notation）以及数据传输格式，它是一种轻量级数据交换格式。

    实际上JSON只是一个数组和对象字面量表示法的组合，下面是一个JSON字符串的例子：

    1
    {"name": "value", "some": [1, 2, 3]}

    注意JSON中的属性名需要包装在引号内。

    使用JSON

    有一系列方法用来在JSON字符串和对象之间相互转换，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 从JSON字符串转为对象
    var jstr = '{"mykey": "my value"}';
     
    var data = JSON.parse(jstr);
    console.log(data.mykey);  // "my value"
     
    // 从对象转为JSON字符串
    var dot = {
        name: "Max",
        dob: new Date(),
        legs: [1, 2, 3, 4]
    };
     
    var jsonstr = JSON.stringify(dog);
     
    // jsonstr is:
    // {"name":"Max","dob":"2013-12-30T12:40:32:198","legs":[1,2,3,4]}

    正则表达式字面量

    JavaScript中的正则表达式也是对象，可以通过new RegExp()和正则表达式字面量两种方法创建正则表达式。

    通常情况下，建议优先使用正则表达式字面量方式，如下所示：

    1
    var re = /[a-z]/gm;

    如果匹配模式需要动态生成，则可用new RegExp()方式创建正则表达式，如下所示：

    1
    var re = new RegExp("[a-z]", "gm");

    正则表达式字面量语法

    正则表达式字面量语法使用了斜杠来包装用于匹配的正则表达式模式。第二个斜杠后，可以将该模式修改为不加引号的字母形式：

        g：全局匹配；

        m：多行；

        i：大小写敏感。

    模式修改器可以以任何顺序或者组合方式出现：

    1
    var re = /patterm/gmi;

    当调用类似String.prototype.replace()的方法以接受正则表达式作为参数时，使用正则表达式字面量有助于编写出更简洁的代码。

    1
    2
    var no_letters = "abc123XYZ".replace(/[a-z]/gi, "");
    console.log(no_letters);  // 输出123

    错误对象

    JavaScript中有一些内置错误构造函数，比如Error(), SyntaxError(), TypeError()以及其他，这些处错误构造函数都带有throw语句。通过这些错误构造函数创建的错误对象具有下列属性：

    name：用于创建对象的构造函数的名称属性，它可以是一般的”Error“或者更为专门的构造函数，比如”RangeError“。

    message：当创建对象时传递给构造函数的字符串。

    另一方面，throw适用于任何对象，并不一定是由某个错误构造函数所创建的对象，因此可以选择抛出自己的对象。这种错误对象也可以有属性”name“、”message“，以及任意希望传递给catch语句来处理的其他类型的信息。当设计自定义错误对象时，可以发挥创造性，并且用这些错误对象来将应用程序的状态恢复到正常状态。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    try {
        throw {
            name: "MyErrorType",
            message: "oops",
            extra: "This was rather embrassing",
            remedy: genericErrorHandler
        };
    } catch (e) {
        alert(e.message);
        e.remedy();
    }

    小节

    本篇中，我们已经学习到不同的字面量模式，相比构造函数，这些都是更为简单的替代方法。本篇主要讨论了下列主题：

    1. 对象字面量表示法是一种优美的对象创建方式，它以包装在大括号中的逗号分隔的键值对（key-value pair）的方式创建对象；

    2. 自定义构造函数；

    3. 数组字面量表示法；

    4. JSON

    5. 正则表达式字面量

    6. 错误对象

    在一般情况下，除了Date()构造函数以外，很少使用其他内置构造函数。下面的表格总结了这些构造函数及其相应的优先选择的字面量模式：

    内建构造函数（避免使用） 字面量模式（推荐）
    var o = new Object(); var o = {};
    var a = new Array(); var a = [];
    var re = new RegExp("[a-z]", "g"); var re = /[a-z]/g;
    var s = new String(); var s = "";
    var n = new Number(); var n = 0;
    var b = new Boolean(); var b = false;
    throw new Error("un-oh"); throw { 
        name: "Error", 
        message: "uh-oh" 
    } 
    or 
    throw Error("un-oh");
  • 相关阅读:
    第九章 引用
    第八章 指针
    第六章 面向对象
    第五章 if语句与运算符
    第四章 C++数据类型
    第三章 初步了解函数
    第二章 做一个简短的C++程序
    第一章 初始C++
    vs2012 快捷键+方法
    vue如何修改生效日期范围，以及转化成yyyy-mm-dd的格式
  • 原文地址：https://www.cnblogs.com/gluncle/p/8392060.html
Copyright © 2011-2022 走看看