《JavaScript模式》第3章 字面量和构造函数
@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]}"
五、基本值类型包装器
五个基本的值类型：Number、String、Boolean、null 和 undefined。除了 null 和 undefined 以外，其他三个都具有所谓的基本包装对象。
可以使用内置构造函数 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语句。通过这些错误构造函数创建的错误对象具有name和message属性。 -
throw适用于任何对象，并不一定是由某个错误构造函数所创建的对象，因此可以选择抛出自己的对象。这种错误对象也可以有属性name、message，以及任意希望传递给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）相同，并且返回同一个错误对象。
