深入理解JavaScript系列(26):设计模式之构造函数模式详解


Posted in Javascript onMarch 03, 2015

介绍

构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的。构造函数用于创建特定类型的对象——不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。

基本用法

在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。通过new关键字来调用定义的否早函数,你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部,this关键字引用的是新创建的对象。基本用法如下:

function Car(model, year, miles) {

    this.model = model;

    this.year = year;

    this.miles = miles;

    this.output= function () {

        return this.model + "走了" + this.miles + "公里";

    };

}
var tom= new Car("大叔", 2009, 20000);

var dudu= new Car("Dudu", 2010, 5000);
console.log(tom.output());

console.log(dudu.output());

上面的例子是个非常简单的构造函数模式,但是有点小问题。首先是使用继承很麻烦了,其次output()在每次创建对象的时候都重新定义了,最好的方法是让所有Car类型的实例都共享这个output()方法,这样如果有大批量的实例的话,就会节约很多内存。

解决这个问题,我们可以使用如下方式:

function Car(model, year, miles) {

    this.model = model;

    this.year = year;

    this.miles = miles;

    this.output= formatCar;

}
function formatCar() {

    return this.model + "走了" + this.miles + "公里";

}

这个方式虽然可用,但是我们有如下更好的方式。

构造函数与原型

JavaScript里函数有个原型属性叫prototype,当调用构造函数创建对象的时候,所有该构造函数原型的属性在新创建对象上都可用。按照这样,多个Car对象实例可以共享同一个原型,我们再扩展一下上例的代码:

function Car(model, year, miles) {

    this.model = model;

    this.year = year;

    this.miles = miles;

}
/*

注意:这里我们使用了Object.prototype.方法名,而不是Object.prototype

主要是用来避免重写定义原型prototype对象

*/

Car.prototype.output= function () {

    return this.model + "走了" + this.miles + "公里";

};
var tom = new Car("大叔", 2009, 20000);

var dudu = new Car("Dudu", 2010, 5000);
console.log(tom.output());

console.log(dudu.output());

这里,output()单实例可以在所有Car对象实例里共享使用。

另外:我们推荐构造函数以大写字母开头,以便区分普通的函数。

只能用new吗?

上面的例子对函数car都是用new来创建对象的,只有这一种方式么?其实还有别的方式,我们列举两种:

function Car(model, year, miles) {

    this.model = model;

    this.year = year;

    this.miles = miles;

    // 自定义一个output输出内容

    this.output = function () {

        return this.model + "走了" + this.miles + "公里";

    }

}
//方法1:作为函数调用

Car("大叔", 2009, 20000);  //添加到window对象上

console.log(window.output());
//方法2:在另外一个对象的作用域内调用

var o = new Object();

Car.call(o, "Dudu", 2010, 5000);

console.log(o.output());

该代码的方法1有点特殊,如果不适用new直接调用函数的话,this指向的是全局对象window,我们来验证一下:
//作为函数调用

var tom = Car("大叔", 2009, 20000);

console.log(typeof tom); // "undefined"

console.log(window.output()); // "大叔走了20000公里"

这时候对象tom是undefined,而window.output()会正确输出结果,而如果使用new关键字则没有这个问题,验证如下:
//使用new 关键字

var tom = new Car("大叔", 2009, 20000);

console.log(typeof tom); // "object"

console.log(tom.output()); // "大叔走了20000公里"

强制使用new

上述的例子展示了不使用new的问题,那么我们有没有办法让构造函数强制使用new关键字呢,答案是肯定的,上代码:

function Car(model, year, miles) {

    if (!(this instanceof Car)) {

        return new Car(model, year, miles);

    }

    this.model = model;

    this.year = year;

    this.miles = miles;

    this.output = function () {

        return this.model + "走了" + this.miles + "公里";

    }

}
var tom = new Car("大叔", 2009, 20000);

var dudu = Car("Dudu", 2010, 5000);
console.log(typeof tom); // "object"

console.log(tom.output()); // "大叔走了20000公里"

console.log(typeof dudu); // "object"

console.log(dudu.output()); // "Dudu走了5000公里"

通过判断this的instanceof是不是Car来决定返回new Car还是继续执行代码,如果使用的是new关键字,则(this instanceof Car)为真,会继续执行下面的参数赋值,如果没有用new,(this instanceof Car)就为假,就会重新new一个实例返回。

原始包装函数

JavaScript里有3中原始包装函数:number, string, boolean,有时候两种都用:

// 使用原始包装函数

var s = new String("my string");

var n = new Number(101);

var b = new Boolean(true);


// 推荐这种

var s = "my string";

var n = 101;

var b = true;

推荐,只有在想保留数值状态的时候使用这些包装函数,关于区别可以参考下面的代码:
// 原始string

var greet = "Hello there";

// 使用split()方法分割

greet.split(' ')[0]; // "Hello"

// 给原始类型添加新属性不会报错

greet.smile = true;

// 单没法获取这个值(18章ECMAScript实现里我们讲了为什么)

console.log(typeof greet.smile); // "undefined"
// 原始string

var greet = new String("Hello there");

// 使用split()方法分割

greet.split(' ')[0]; // "Hello"

// 给包装函数类型添加新属性不会报错

greet.smile = true;

// 可以正常访问新属性

console.log(typeof greet.smile); // "boolean"

总结

本章主要讲解了构造函数模式的使用方法、调用方法以及new关键字的区别,希望大家在使用的时候有所注意。

参考:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript

Javascript 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
a标签调用js的方法总结
Sep 05 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
js+jquery常用知识点汇总
Mar 03 #Javascript
js实现宇宙星空背景效果的方法
Mar 03 #Javascript
Angular中的Promise对象($q介绍)
Mar 03 #Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 #Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 #Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 #Javascript
You might like
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php explode函数实例代码
2012/02/27 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
不安全的常用的js写法
2009/09/15 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python利用IPython提高开发效率
2016/08/10 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Python中的类与类型示例详解
2019/07/10 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
西部世纪面试题
2014/12/05 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
股权投资意向书
2014/04/01 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
婚庆主持词大全
2015/06/30 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫