深入理解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 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
jquery append与appendTo方法比较
May 24 jQuery
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
浅谈php命令行用法
2015/02/04 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
学生实习推荐信范文
2013/11/26 职场文书
英语教研活动总结
2014/07/02 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
客户经理岗位职责
2015/01/31 职场文书
入党申请书怎么写?
2019/06/21 职场文书