@by Ruth92(转载请注明出处)

第3章:字面量和构造函数

一、创建对象的三种方式

// 对象字面量
var car = {goes: "far"}; // 内置构造函数(反模式)
var car = new Object();
car.goes = "far"; // 自定义构造函数
var adam = new Person("Adam");
adam.say();

☛ 对象字面量的优点:

  • 按需创建对象,在程序生命周期内的任何时候都可以修改;
  • 输入更短的字符;
  • 强调该对象仅是一个可变哈希映射,而不是从对象中提取的属性和方法;
  • 没有作用域解析

二、构造函数

☛ 构造函数的特征(使用缺点):

  • 依赖传递的参数的值,该构造函数可能会委派另一个内置构造函数来创建对象,并且返回了一个并非期望的不同对象

  • 当传递给构造函数的值是动态的,并且直到运行时才能确定其类型

      // 一个空对象
    var o = new Object();
    console.log(o.constructor === Object); // true // 一个数值对象
    var o = new Object(1);
    console.log(o.constructor === Number); // true
    console.log(o.toFixed(2)); // '1.00'

✔ JavaScript 中没有类的概念,但是它却支持极大的灵活性,因为不必预先知道对象的一切细节,也不需要类“蓝图”。

// 构造函数的定义
var Person = function(name) {
this.name = name;
this.say = function() {
return "I am " + this.name;
};
};

✔ 当以 new 操作符调用构造函数时,函数内部将会发生以下情况:

  • 创建一个空对象并且 this 变量引用了该对象,同时还继承了该函数的原型。
  • 属性和方法被加入到 this 引用的对象中。
  • 新创建的对象由 this 所引用,并且最后隐式地返回 this(如果没有显式地返回其它对象)。

✔ 当 new 操作符调用构造函数时,相当于在后台发生了如下事情:

var Person = function(name) {

  // 使用对象字面量模式创建一个对象
// var this = {}; // 向 this 添加属性和方法
this.name = name;
this.say = function() {
return "I am" + this.name;
}; // return this;
}

✔ “空”对象实际上并不空,它已经从 Person 的原型中继承了许多成员。因此,更像下面的语句:

// var this = Object.create(Person.prototype);

构造函数的返回值:

  • 当用 new 操作符创建对象时,构造函数总是返回一个对象;
  • 默认返回 this 所引用的对象,也可以返回任意其他对象;
  • 如果在构造函数中并不向 this 添加任何属性,将返回“空”对象(这里的“空”,指的是除了从构造函数的原型中所继承的成员以外);
  • 如果试图返回并非对象的值,函数会忽略该值,并返回 this 所引用的对象。

如果在调用构造函数时,忘记使用 new 操作符,会导致构造函数中的 this 指向全局对象。

☊ 自调用构造函数——解决忘记使用 new 的问题,同时还能使实例继承原型

// 自调用构造函数
function Waffle() { if ( !(this instanceof Waffle) ) {
return new Waffle;
} this.tastes = "yummy"; } Waffle.prototype.wantAnother = true; // 测试调用
var first = new Waffle(),
second = Waffle(); console.log(first.tastes); // "yummy";
console.log(second.tastes); // "yummy";
console.log(first.wantAnother); // "true";
console.log(second.wantAnother); // "true";

另一种检测实例对象的方法:

if ( !(this instanceof arguments.callee) ) {
return new arguments.callee();
}

三、数组构造函数的特殊性

/**
* 向 Array() 构造函数传递单个数字时,会设定数组的长度
*/
// 具有一个元素的数组
var a = [3];
console.log(a.length); // 1
console.log(a[0]); // 3 // 具有三个元素的数组
var a = new Array(3);
console.log(a.length); // 3
console.log(typeof a[0]); // 'undefined' /**
* 向 new Array() 传递浮点数,会产生范围错误
*/
// 使用数组字面量
var a = [3.14];
console.log(a[0]); // 3.14 var a = new Array(3.14); // RangeError: invalid array length
console.log(typeof a); // 'undefined' /**
* Array() 构造函数的灵巧用法:重复字符串
*/
var white = new Array(256).join(' '); // 返回具有255个空白字符串的字符串

检测是否为数组:

Array.isArray()

function polyfillArray(arr) {

  if (typeof Array.isArray === 'undefined') {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === "[object Array]";
};
} return Array.isArray(arr);
} polyfillArray([]); // 'true' polyfillArray({
length: 1,
"0": 1,
slice: function () {}
}); // false

四、JSON

JSON:代表 JavaScript 对象表示(JavaScript Object Notation)以及数据传输格式。

它是一种轻量级数据交换格式,只是一个数组和对象字面量表示方法的组合:

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

JSON 和文字对象之间的唯一语法差异:

  • 在 JSON 中,属性名称需要包装在引号中才能成为合法的 JSON;
  • 在对象字面量中,仅当属性名称不是有效标识符时才会需要引号,如字符中间有空格 { "first name": "Dave" };
  • 在 JSON 中,不能使用函数或正则表达式籽棉量。

使用 JSON

// JSON.parse();
var jstr = '{"mykey": "my value"};
var data = JSON.parse(jstr);
console.log(data.mykey); // 'my value' // JSON.stringify()
var dog = {
name: 'Fido',
dob: new Date(),
legs: [1, 2, 3, 4]
}; var jsonstr = JSON.stringify(dog);
console.log(jsonstr); // "{"name":"Fido","dob":"2016-09-20T10:26:24.904Z","legs":[1,2,3,4]}"

五、基本值类型包装器

五个基本的值类型:NumberStringBooleannullundefined。除了 nullundefined 以外,其他三个都具有所谓的基本包装对象。

可以使用内置构造函数 Number()String()Boolean() 创建包装对象。

包装对象包含了一些有用的属性和方法。但是这些方法在基本值类型上也能够起作用。只要调用这些方法,基本值类型就可以在后台被临时转换为一个对象,并且表现得犹如一个对象。

// 一个基本数值
var n = 100;
console.log(typeof n); // 'number' // 一个数值 Number 对象
var nobj = new Number(100);
console.log(typeof nobj); // 'object' // 用来作为对象的基本字符串
var s = 'hello';
console.log(s.toUpperCase()); // 'HELLO' // 值本身可以作为一个对象
"monkey".slice(3, 6); // "key" // 与数值的方法相同
(22 / 7).toPrecision(3); // '3.14'

使用包装对象的场景

有扩充值以及持久保存状态的需要。因为基本值类型并不是对象,它们不可能扩充值。

六、错误对象

  • JavaScript 中有一些内置错误构造函数,如 Error()SyntaxError()TypeError(),这些错误构造函数都带有 throw 语句。通过这些错误构造函数创建的错误对象具有 namemessage 属性。

  • throw 适用于任何对象,并不一定是由某个错误构造函数所创建的对象,因此可以选择抛出自己的对象。这种错误对象也可以有属性 namemessage,以及任意希望传递给 catch 语句来处理的其他类型的信息。

      try {
    // 发生以外的事情,抛出一个错误
    throw {
    name: "MyErrorType", // 自定义错误类型
    message: 'oops',
    extra: 'This was rather embarrassing',
    remedy: genericErrorHandler // 指定应该处理该错误的函数
    };
    } catch (e) {
    // 通知用户
    alert(e.message); // 输出 'oops' // 优美的处理错误
    e.remedy(); // 调用函数 genericErrorHandler
    }
  • 错误构造函数以函数的形式调用(不带 new)时,其表现行为与构造函数(带 new)相同,并且返回同一个错误对象。

《JavaScript模式》第3章 字面量和构造函数的更多相关文章

  1. Javascript模式(第三章字面量与构造函数)------读书笔记

    一 对象字面量 1.1对象字面量的语法 1,对象键值对哈希表,在其他的编程语言中称之为“关联数组”, 2 键值对里面的值,可以是原始类型也可以是其他类型的对象,称之为属性,函数称之为方法 3 自定义对 ...

  2. <<Javascript Patterns>>阅读笔记 – 第3章 字面量和构造函数

    对象字面量 首先给出对象字面量的定义语法: 1. 将对象定义在一对括号中(左大括号“{”和右大括号”}”) 2. 对象中以逗号分隔属性和方法. 每个属性或方法以key-value的形式出现, key和 ...

  3. 《javascript模式--by Stoyan Stefanov》书摘--字面量和构造函数

    二.字面量和构造函数 1,能够使用对象字面量时,就没理由使用new Object构造函数 // 一个空对象var 0 = new Object();console.log( o.constructor ...

  4. 《JavaScript 模式》读书笔记(3)— 字面量和构造函数1

    新的篇章开始了,本章开始,所有的内容都是十分有价值和意义的.本章主要的内容包括对象字面量.构造函数.数组字面量.正则字面量.基本值类型字面量以及JSON等.在大家的工作和实际应用中也有一定的指导意义. ...

  5. JavaScript 模式》读书笔记(3)— 字面量和构造函数3

    这是字面量和构造函数的最后一篇内容,其中包括了JSON.正则表达式字面量,基本值类型包装器等知识点.也是十分重要的哦. 五.JSON JSON是指JavaScript对象表示以及数据传输格式.它是一种 ...

  6. JavaScript 模式》读书笔记(3)— 字面量和构造函数2

    上一篇啊,我们聊了聊字面量对象和自定义构造函数.这一篇,我们继续,来聊聊new和数组字面量. 三.强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用.如果在调用 ...

  7. JavaScript模式:字面量和构造函数

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

  8. JavaScript对象的理解 及 字面量对象与数组的关系

    JavaScript的简单类型包括 数字.字符串.布尔值.null值.undefined值. 其他的值都是对象.对象是可变的键控集合.数组.函数.正则表达式都是对象. 对象是属性的容器,属性都是名字和 ...

  9. Javascript模式(第二章基本技巧)------读书笔记

    本章主要帮助大家写出高质量的JS代码的方法,模式和习惯,例如:避免使用全局变量,使用单个的var变量声明,缓存for循环的长度变量length等 一.尽量避免使用全局变量 1 每一个js环境都有一个全 ...

随机推荐

  1. javascript 面向对象(转)

    1.使用[]调用对象的属性和方法 function User() { this.age = 21; this.sex = "男?"; } var user = new User() ...

  2. [jetbrains系列] 外链第三方库+代码补全设置

    jetbrains系列的IDE真的是太好用了,有种相见恨晚的感觉. 在开发过程中第三方库是必不可少的,在开发的时候如果有一个可以补全的IDE可以节省查文档的时间. 举个例子:给pycharm配pysp ...

  3. Gradle build设置自动log开关

    应用场景 通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显示log的,但是在特殊情况下我们测试release包的时候需要log的时候,就无法使用Build ...

  4. python成长之路【第五篇】:python字符编码

    在2.7环境中我们要写上这一行#-*- coding:utf-8 -*- 为什么我们要加这一行呢?这一样的意思是置顶编码类型为utf-8编码! 首先在看这个问题之前,咱们是否曾想过一个问题? 为什么我 ...

  5. 转:C++ Boost/tr1 Regex(正则表达式)快速指南

    C++ Boost/tr1 Regex(正则表达式)快速指南 正则表达式自Boost 1.18推出,目前已经成为C++11(tr1)的标准部分. 本文以Boost 1.39正则表达式为基础,应该广泛适 ...

  6. struts2学习:配置篇之namespace

    把namespace单独拉出来讲一方面是因为它实际上不是一个element,而只是一个attribute,前面已经说了,它是package的一个attribute:另外一方面是因为这个属性是我接触St ...

  7. 判断json数据是否为空

    json数据是没有length这个属性的 ,所以不能直接用.length()方法 我们可以先遍历,然后根据遍历次数求长度 1.在IE上这样遍历json:(js代码) var jsonLength = ...

  8. text-overflow:ellipsis

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  9. C中的Float分析

    C/C++中, 浮点数,float以及 double 在内存中是怎样存储的? 假如,我有32-bit 8bit 8bit 8bit 0 0 0 0 0 1 1 1 1 对于整形int,我们可以很快得出 ...

  10. C#中文和UNICODE编码转换

    C#中文和UNICODE编码转换 //中文轉為UNICODE string str = "中文"; string outStr = ""; if (!strin ...