《JavaScript 模式》读书笔记(3)— 字面量和构造函数1
新的篇章开始了,本章开始,所有的内容都是十分有价值和意义的。本章主要的内容包括对象字面量、构造函数、数组字面量、正则字面量、基本值类型字面量以及JSON等。在大家的工作和实际应用中也有一定的指导意义。
一、对象字面量
我们直接来先看一下代码:
// 开始时定义一个空对象
var dog = {}; // 向dog对象添加一个属性
dog.name = "Benji"; // 现在,向dog对象添加一个方法
dog.getName = function() {
return dog.name;
}; // 前面的例子中,dog对象开始是干净的状态,即一个空对象(这里的空对象是指除了继承以外的属性,并没有自身的属性)。
// 然后可以向该对象添加一个属性和一个方法。在程序生命周期的任何时候,都可以执行以下操作。 // 改变属性和方法的值:
dog.getName = function() {
// 重新定义返回该方法
// 返回一个硬编码的值
return "Fido";
}; // 完全删除属性/方法:
delete dog.name; // 添加更多的属性和方法:
dog.say = function () {
return "Woof!";
}; dog.fleas = true;
当然,并不要求必须从空对象开始。对象字面量模式可以使您在创建对象时向其添加函数:
var dog = {
    name:"Benji",
    getName:function() {
        return this.name;
    }
};
ok,上面的例子,就是一个标准的对象字面量写法,对象字面量语法如下:
1、将对象包装在打括号中。
2、对象中以逗号分隔属性和方法。在最后的名称-值的尾随逗号是允许的,但是在一些特殊的浏览器下会报错,所以请尽量不要这样。
3、用冒号来分隔属性的名称和属性的值。
4、当给变量赋值时,请不要忘记右大括号“}”后的分号。
来自构造函数的对象
  我们先来看一下,如何创建一个对象:
// 第一种方法:使用字面量:
var car = {goes:'far'}; // 另一种方法:使用内置构造函数-这是一个反模式,不要应用!
var car = new Object();
car.goes = "far";
上面的两种创建对象的方式,尤其注意,不要使用内置构造函数来创建对象。字面量表示发的显著优点在于它仅需要输入更短的字符。优先选择字面量模式创建对象的另一个原因在于:它强调了该对象仅仅是一个可变哈希映射,而不是从对象中提取的属性或方法。
与使用object构造函数相对,使用字面量的另一个原因在于它并没有作用域解析。因为可能以同样的名字创建了一个局部构造函数,解释器需要从调用Object()的位置开始一直向上查询作用域链,而不是从对象中提取的属性或方法。
对象构造函数捕捉
我们不会使用对象构造函数去创建对象,但是我们应该了解对象构造函数的“特征”。这里的涉及到的“特征”在于,Object()构造函数仅接受一个参数,并且还依赖传递的值,该Object()可能会委派另一个内置构造函数来创建对象,并且返回了一个并非期望的不同对象。
// 以下是反模式 // 一个空对象
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" // 一个字符串对象
var o = new Object('I am a String');
console.log(o.constructor === String);// true // 一般的对象并没有substring()方法
// 但是字符串对象都有该方法
console.log(typeof o.substring); // "function" // 一个布尔对象
var o = new Object(true);
console.log(o.constructor === Boolean); //true
我们看上面的代码,将数字、字符串、布尔值传递到new Object()构造函数中,其结果是获得了不同构造函数所创建的对象。就拿最后一个创建一个Boolean对象来说,实际上,真正执行创建的内置构造函数并不是Object(),而是Object()委派Boolean()构造函数创建的。
当传递给Object()构造函数的值是动态的,并且直到运行时才能确定其类型时,Object()构造函数的这种行为可能会导致意料不到的结果。因为,最后再强调一遍,不要使用new Object()构造函数!
二、自定义构造函数
除了对象字面量模式和内置的构造函数以外,可以使用自己的构造函数来创建对象:
var adam = new Person("Adam");
adam.say();
这里的Person,只是一个函数而已:
var Person = function(name) {
    this.name = name;
    this.say = function () {
        return "I am" + this.name;
    };
};
当使用new操作符调用构造函数时,函数内部会发生以下情况:
1、创建一个空对象并且this变量引用了该对象,同时还继承了该函数的原型。
2、属性和方法对加入到this引用的对象中。
3、新创建的对象由this所引用,并且最后隐式的返回this(如果没有显示的返回其它对象)。
看起来就像这样:
var Person = function(name) {
    // 使用对象字面量模式创建一个新对象
    // var this = {};
    // 向this添加属性和方法
    this.name = name;
    this.say = function () {
        return "I am" + this.name;
    };
    // return this;
};
在上面的例子中,为了简单起见,将say()方法添加到了this中。其造成的结果是在任何时候调用new Person()时都会在内存中创建一个新的函数。这种方法的效率显然非常低下,因为多个实例之间的say()方法实际上并没有改变,更好的选择是将方法添加到Person类的原型中。
Person.prototype.say = function () {
    return "I am" + this.name
}
这里要强调的一点事,可重用的成员,比如可重用的方法,都应该放置到对象的原型中。
要注意:
// var this = {};
这段代码并不是真相的全部。因为“空”对象实际上并不空,它已经从Person的原型的原型中继承了许多成员。因此,它更像是下面的语句:
//var this = Object.create(Person.prototype);
Object.create会在后续的内容中进一步讨论。
构造函数的返回值
当使用new操作符创建对象时,构造函数总是返回一个对象;默认情况下返回的是this所引用的对象。如果在构造函数中并不向this添加任何属性,将返回“空”对象(这里的空,指的是除了从构造函数的原型中所继承的成员以外)。
构造函数将隐式返回this,甚至于在函数中没有现实的加入return语句。但是,可以根据需要返回任意其他对象。比如:
var Objectmaker = function () {
    // 下面的“name”属性将被忽略
    // 这是因为构造函数决定改为返回另一个对象
    this.name = "This is it";
    // 创建并返回一个新对象
    var that = {};
    that.name = "And that's that";
    return that;
}
// 测试
var o = new Objectmaker();
console.log(o.name);
正如上面所看到的,可以在构造函数中自由的返回任意对象,只要它是一个对象。试图返回并非对象的值,这虽然不会造成错误,但是函数却会简单的忽略该值,相反,构造函数将会返回this所引用的对象。
好了,我们今天的内容就先到这里。后面再继续,以防一篇的文章内容过长。
《JavaScript 模式》读书笔记(3)— 字面量和构造函数1的更多相关文章
- JavaScript模式读书笔记 文章3章  文字和构造
		1.对象字面量 -1.Javascript中所创建的自己定义对象在任务时候都是可变的.能够从一个空对象開始,依据须要添加函数.对象字面量模式能够使我们在创建对象的时候向其加入函数. ... 
- JavaScript模式读书笔记 第4章  函数
		2014年11月10日 1.JavaScript函数具有两个特点: 函数是第一类对象 函数能够提供作用域 函数即对象,表现为: -1,函数能够在执行时动态创建,也 ... 
- JavaScript 模式》读书笔记(3)— 字面量和构造函数3
		这是字面量和构造函数的最后一篇内容,其中包括了JSON.正则表达式字面量,基本值类型包装器等知识点.也是十分重要的哦. 五.JSON JSON是指JavaScript对象表示以及数据传输格式.它是一种 ... 
- 《JavaScript模式》第3章 字面量和构造函数
		@by Ruth92(转载请注明出处) 第3章:字面量和构造函数 一.创建对象的三种方式 // 对象字面量 var car = {goes: "far"}; // 内置构造函数(反 ... 
- 《Javascript模式》之对象创建模式读书笔记
		引言: 在javascript中创建对象是很容易的,可以使用对象字面量或者构造函数或者object.creat.在接下来的介绍中,我们将越过这些方法去寻求一些其他的对象创建模式. 我们知道js是一种简 ... 
- 《javascript模式--by Stoyan Stefanov》书摘--字面量和构造函数
		二.字面量和构造函数 1,能够使用对象字面量时,就没理由使用new Object构造函数 // 一个空对象var 0 = new Object();console.log( o.constructor ... 
- 《编写可维护的javascript》读书笔记(中)——编程实践
		上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ... 
- 《你不知道的javascript》读书笔记2
		概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ... 
- JavaScript 模式》读书笔记(3)— 字面量和构造函数2
		上一篇啊,我们聊了聊字面量对象和自定义构造函数.这一篇,我们继续,来聊聊new和数组字面量. 三.强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用.如果在调用 ... 
随机推荐
- 吴裕雄--天生自然python编程:turtle模块绘图(2)
			#彩色螺旋线 import turtle import time turtle.pensize(2) turtle.bgcolor("black") colors = [" ... 
- ltp压力测试结果分析脚本
			最近工作性质发生了改变,在做操作系统方面的测试.接手的第一个任务是做ltp stress.测试内核稳定性. 做完之后会结果进行统计分析.因为统计的内容比较多,都是通过shell命令行进行操作.于是编写 ... 
- nginx安装与fastdfs配置--阿里云
			上一篇文章:fastDFS 一二事 - 简易服务器搭建之--阿里云 做了fastDFS的服务安装和配置,接下来我们来看nginx的安装 第一步:安装nginx需要安装的一些环境: 1.例如: yum ... 
- 一致性哈希算法(consistent hashing)PHP实现
			一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简单哈希 ... 
- EventBus 及一些思考
			EventBus 是 Android 开发的一种常用框架,其解耦的思维令人赞叹 从特性上来讲,其与 Android SDK中的BroadcastReceiver很像,二者都是注册,发送事件,反注册,都 ... 
- Spring,SpringMVC,MyBatis,SSM配置文件比较
			Spring配置文件: applicationContext.xml applicationContext.xml是Spring的核心配置文件 IOC/DI,AOP相关配置都是在这个文件中 Sprin ... 
- 前阿里数据库专家总结的MySQL里的各种锁(下篇)
			在上篇中,我们介绍了MySQL中的全局锁和表锁. 今天,我们专注于介绍一下行锁,这个在日常开发和面试中常常困扰我们的问题. 1.行锁基础 由于全局锁和表锁对增删改查的性能都会有较大影响,所以,我们自然 ... 
- XXE学习(二)——DTD基础
			一.DTD简介 文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. 有了DTD文档后,xml就需按照DTD中的规范来书写 DTD 可被成行地声明于 XML ... 
- Angular 1 深度解析:脏数据检查与 angular 性能优化
			TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ... 
- vue-cli “从入门到放弃”
			主要作用:目录结构.本地调试.代码部署.热加载.单元测试 在如今前端技术飞速发展的时代,angular.js.vue.js 和 react.js 作为前端框架已经呈现出了三国鼎立的局面.作为国人若你不 ... 
