《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)相同,并且返回同一个错误对象。
《JavaScript模式》第3章 字面量和构造函数的更多相关文章
- Javascript模式(第三章字面量与构造函数)------读书笔记
一 对象字面量 1.1对象字面量的语法 1,对象键值对哈希表,在其他的编程语言中称之为“关联数组”, 2 键值对里面的值,可以是原始类型也可以是其他类型的对象,称之为属性,函数称之为方法 3 自定义对 ...
- <<Javascript Patterns>>阅读笔记 – 第3章 字面量和构造函数
对象字面量 首先给出对象字面量的定义语法: 1. 将对象定义在一对括号中(左大括号“{”和右大括号”}”) 2. 对象中以逗号分隔属性和方法. 每个属性或方法以key-value的形式出现, key和 ...
- 《javascript模式--by Stoyan Stefanov》书摘--字面量和构造函数
二.字面量和构造函数 1,能够使用对象字面量时,就没理由使用new Object构造函数 // 一个空对象var 0 = new Object();console.log( o.constructor ...
- 《JavaScript 模式》读书笔记(3)— 字面量和构造函数1
新的篇章开始了,本章开始,所有的内容都是十分有价值和意义的.本章主要的内容包括对象字面量.构造函数.数组字面量.正则字面量.基本值类型字面量以及JSON等.在大家的工作和实际应用中也有一定的指导意义. ...
- JavaScript 模式》读书笔记(3)— 字面量和构造函数3
这是字面量和构造函数的最后一篇内容,其中包括了JSON.正则表达式字面量,基本值类型包装器等知识点.也是十分重要的哦. 五.JSON JSON是指JavaScript对象表示以及数据传输格式.它是一种 ...
- JavaScript 模式》读书笔记(3)— 字面量和构造函数2
上一篇啊,我们聊了聊字面量对象和自定义构造函数.这一篇,我们继续,来聊聊new和数组字面量. 三.强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用.如果在调用 ...
- JavaScript模式:字面量和构造函数
本篇主要讨论了通过字面量以构造对象的方法,比如对象.数组以及正则表达式等字面量的构造方法,同时还讨论了与类似Object()和Array()等内置构造函数相比,为什么基于字面量表示法是更为可取. 对象 ...
- JavaScript对象的理解 及 字面量对象与数组的关系
JavaScript的简单类型包括 数字.字符串.布尔值.null值.undefined值. 其他的值都是对象.对象是可变的键控集合.数组.函数.正则表达式都是对象. 对象是属性的容器,属性都是名字和 ...
- Javascript模式(第二章基本技巧)------读书笔记
本章主要帮助大家写出高质量的JS代码的方法,模式和习惯,例如:避免使用全局变量,使用单个的var变量声明,缓存for循环的长度变量length等 一.尽量避免使用全局变量 1 每一个js环境都有一个全 ...
随机推荐
- Mysql常用数据类型
Mysql常用数据类型 数字: 字符串: 时间:
- Xcode代码提示联想功能失效,按command键点不进去类库,提示“?”
参考文档:这两篇文章很好的解决了问题.可以很好的解决了问题 Xcode代码提示联想功能失效,按command键点不进去类库,提示“?”,代码全是白色 Xcode4中代码补全(Code Completi ...
- 转 猫都能学会的Unity3D Shader入门指南(二)
猫都能学会的Unity3D Shader入门指南(二) 关于本系列 这是Unity3D Shader入门指南系列的第二篇,本系列面向的对象是新接触Shader开发的Unity3D使用者,因为我本身自己 ...
- Java面向对象三大特点之继承
概念: 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 生活中的继承: 兔子和羊属于食草动物类,狮子和豹属于食肉动物类 ...
- java高薪之路__001_类
Java中内部类分四种:成员内部类.局部内部类.静态内部类和匿名内部类.要注意静态内部类的调用方式与其他不同,采用的是类似调用类中的静态属性.静态方法的方式 Multi Level 调用不同类中的相同 ...
- 分方式缓存常用的一致性hash是什么原理
分方式缓存常用的一致性hash是什么原理 一致性hash是用来解决什么问题的?先看一个场景有n个cache服务器,一个对象object映射到哪个cache上呢?可以采用通用方法计算object的has ...
- unittest可能面临的问题以及解决方法
问题1:用例的执行顺序 当使用unittest.main()时,用例的执行是按照ascall值的顺序来执行的,所以如果使用main()方法来执行用例的话,那么就需要通过命名来限制执行顺序,比如想要先执 ...
- JavaWeb基础: 获取资源文件
Web工程在编译构建完毕以后,需要部署到Tomcat上运行,资源的硬盘路径也会随着改变.要想对资源文件进行读写操作需要获取其硬盘地址,在Web工程中通常通过ServletContext/ClassLo ...
- Object.create()兼容实现方法
if (!Object.create) { Object.create = (function(){ function F(){} return function(o){ if (arguments. ...
- ios基础篇(十六)——UIWebView的基本使用
UIWebView是内置的浏览器控件,可以用它来浏览网页.打开文档等.UIWebView是一个混合体,具体的功能控件内置的,实现一些基本的功能.UIWebView可以查看Html网页,pdf文件,do ...