深入理解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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
初中化学教学反思
2014/01/23 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
企业宣传标语
2014/06/09 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers