深入理解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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
js实现交通灯效果
Jan 13 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
深入理解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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
php session的锁和并发
2016/01/22 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
原生js调用json方法总结
2018/02/22 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
施工人员岗位职责
2013/12/12 职场文书
项目合作协议书范本
2014/04/16 职场文书
家长会学生演讲稿
2014/04/26 职场文书
委托公证书样本
2015/01/23 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
小学运动会宣传稿
2015/07/23 职场文书
大学生志愿者心得体会
2016/01/15 职场文书