基本用法

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()在每次创建对象的时候都重新定义了,没有共享。

可以用如下方式:

function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
this.output= formatCar;
} function formatCar() {
return this.model + "走了" + this.miles + "公里";
}

更好的方式,使用原型继承output方法:

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());

除了使用new,可以作为函数调用、call方式

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公里"

使用instanceof来强制使用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一个实例返回。

参考地址

[JS设计模式]:构造函数模式(2)的更多相关文章

  1. [js]js设计模式-构造函数模式

    构造函数模式 function WriteJsPerson(name,age) { this.name=name; //不用手动创建obj this.age = age; this.writeJs=f ...

  2. js设计模式--单体模式

    GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). ...

  3. js设计模式--迭代器模式

    迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按 ...

  4. [转]js设计模式-策略模式

    在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是本文 ...

  5. 如何做JS 单体模式的设计---->>js设计模式<<-------单体模式

    1. 单体模式是js中最基本 单最有用的模式之一,非常常用. 单体模式的基本结构如下: var Person = { name: 'lilu', age:', sayHi: function(){ a ...

  6. js设计模式--工厂模式

    工厂模式: 工厂模式的目的是为了创建对象,它经常是在类和类的方法中实现.简单的工厂模式是由一个方法来决定到底要创建哪类的实例,这些实例经常拥有相同的接口,这种模式在所实例化的类型在编译期并不确定,而是 ...

  7. JS设计模式——工厂模式详解

    它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器.取而代之,一个工厂能提供一个创建对象的公共接口,我们可以在其中指定我们希望被创建的工厂对象的类型. 简单工厂模式:使用一个类(通常 ...

  8. [js]js设计模式-原型模式

    构造函数模型- 对象的属性和方法每人一份 function createJs(name, age) { this.name = name; this.age = age; this.writeJs = ...

  9. 浅谈js设计模式 — 命令模式

    命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦 ...

  10. js设计模式-命令模式

    命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高 ...

随机推荐

  1. FTP出现PORT模式成功, 请更新你的站点配置文件

    最近用FTP连接站点,经常出现连接不上或者连接失败,提示以PASV模式连接失败,正在使用PORT模式连接,最后才能连接成功,连接时间也是相当长,又慢又不稳定.   工具/原料   FlashFXP等F ...

  2. [Swift]LeetCode788. 旋转数字 | Rotated Digits

    X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...

  3. [Swift]LeetCode1029. 两地调度 | Two City Scheduling

    There are 2N people a company is planning to interview. The cost of flying the i-th person to city A ...

  4. 如何随机排序数组?使用多种方式!递归,迭代,洗牌,sort方法!

    方式1: 使用sort 方法 ---- // 方法1 使用sort 方法 var arr = [1,2,3,4,5,6,7,8]; function foo(arr) { var cloneArr = ...

  5. ALL_SOURCE

    类型:View Owner: SYS 内容: 记录了该用户可访问的所有数据库对象的脚本信息(DDL) 字段:  OWNER: 对象的Owner NAME: 对象名称 TYPE: 对象类型,如FUNCT ...

  6. dedecms搜索模板,使用{dede:list}标签调用自定义字段不显示(空白)

    前几天使用织梦做一个搜索功能,正常使用{dede:list}调用自定义内容模型中的自定义字段,代码如下:(自定义字段的调用可以参考:http://www.dede58.com/a/dedejq/523 ...

  7. React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题

    首先 导航链接应该使用  NavLink 而不再是  Link NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/mas ...

  8. Typescript 查缺补漏

    Types Casting: let input = xxx as HTMLInputElement; let input = <HTMLElement>xxxx; Object Shap ...

  9. 开启 IPv6 新时代,升级后的 IPv6 厉害在哪?

    IPv6,Internet Protocol Version 6,从字面翻译 “互联网协议第 6 版”,它是IETF设计的用于替代现行版本 IP 协议-IPv4 协议,被称作“下一代互联网协议”.早在 ...

  10. 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...