1 工厂模式

1.1 创建

function createFruit(name,colors) {
var o = new Object();
o.name = name;
o.colors = colors;
o.getInfo = function () {
console.log(this.name+"是"+this.colors+"的");
}
return o;
}
var apple = createFruit("苹果",["红色","黄色"]);

1.2 说明

利用水果工厂可以很容易的创建一种新的水果,每个新创建的水果都是包括两个属性和一个方法的Object。因为没有水果对象,所以不能通过instanceof得出苹果是水果的结论。

2 构造函数模式

2.1 创建

function Fruit(name,colors) {
this.name = name;
this.colors = colors;
this.getInfo = function () {
console.log(this.name+"是"+this.colors+"的");
}
}
var apple = new Fruit("苹果",["红色","黄色"]);

2.2 说明

利用构造函数模式可以解决对象识别问题,但其主要问题是每个方法在每个实例上重新创建一遍,没有做到方法的重用。

3 原型模式

3.1 创建

function Fruit() {
}
Fruit.prototype.name = "水果";
Fruit.prototype.colors = [];
Fruit.prototype.getInfo = function () {
console.log(this.name+"是"+this.colors+"的");
}
var apple = new Fruit();
apple.name = "苹果";

3.2 说明

原型模式没办法向构造函数传递参数,原型中所有的属性是被多实例共享的,对于引用类型的共享属性的操作可能引起突出的问题。例如向苹果的颜色属性put一个"红色"(apple.colors.push("红色")),哪么所有水果通过原型访问到的颜色都是"红色",而这是很危险的。

4 组合模式(构造函数与原型)

4.1 创建

function Fruit(name,colors) {
this.name = name;
this.colors = colors;
}
Fruit.prototype = {
constructor : Fruit,
getInfo : function () {
console.log(this.name+"是"+this.colors+"的");
}
}
var apple = new Fruit("苹果",["红色","黄色"]);

4.2 说明

组合模式是最常见的创建自定义对象的方式,构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性。可以最大限度的节省内存。

5 动态原型模式

5.1 创建

function Fruit(name,colors) {
this.name = name;
this.colors = colors;
if(typeof this.getInfo != "function") {
Fruit.prototype.getInfo = function () {
console.log(this.name+"是"+this.colors+"的");
};
}
}
var apple = new Fruit("苹果",["红色","黄色"]);

5.2 说明

很完美的方式,把所有信息都封装在构造函数中。只有在getInfo()方法不存在的情况下,才会将它添加到原型中。原型的这段代码只会在初次调用构造函数时才会执行。

6 寄生构造函数模式

6.1 创建

function Fruit(name,colors) {
var o = {};
o.name = name;
o.colors = colors;
o.getInfo = function () {
console.log(this.name+"是"+this.colors+"的");
}
return o;
}
var apple = new Fruit("苹果",["红色","黄色"]);

6.2 说明

这种方式和工厂模式代码其实是一样的,只是函数名采用了Fruit的首字母大写的形式,并且用new来进行初始化。这种模式可以在特殊的情况下用来为对象创建构造函数。

7 稳妥构造函数模式

7.1 创建

function Fruit(name,colors) {
var o = {};
o.getInfo = function () {
console.log(name+"是"+colors+"的");
}
return o;
}
var apple = Fruit("苹果",["红色","黄色"]);

7.2 说明

稳妥对象(durable objects)是由道格拉斯(douglas)发明。指的是没有公共属性,并且其方法也不引用this的对象。适合在安全环境中实用。

JavaScript对象创建的几种方式的更多相关文章

  1. JavaScript对象创建的九种方式

    1.标准创建对象模式 var person = new Object(); person.name = "Nicholas"; person.age = 29; person.jo ...

  2. JS对象创建的几种方式整理

    ​ 本文主要介绍了JS对象创建的几种方式 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = ...

  3. 对JS关于对象创建的几种方式的整理

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object();Person.na ...

  4. 于Unity3D动态创建对象和创建Prefab三种方式的原型对象

    于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...

  5. 并发编程 ~~~ 多进程~~~进程创建的两种方式, 进程pid, 验证进程之间的空间隔离, 进程对象join方法, 进程对象其他属性

    一 进程创建的两种方式 from multiprocessing import Process import time def task(name): print(f'{name} is runnin ...

  6. Javascript判断数据类型的五种方式及其特殊性

    Javascript判断数据类型的五种方式及区别 @ 目录 typeof instanceof Object.prototype.toString isArray iisNaN ----------- ...

  7. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  8. javascript中创建对象的几种方式

    1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...

  9. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

随机推荐

  1. Codeforces 895C - Square Subsets 状压DP

    题意: 给了n个数,要求有几个子集使子集中元素的和为一个数的平方. 题解: 因为每个数都可以分解为质数的乘积,所有的数都小于70,所以在小于70的数中一共只有19个质数.可以使用状压DP,每一位上0表 ...

  2. 如何使用mysql命令行

    现在向大家介绍mysql命令行下,从数据库的建立到表数据的删除全过程,希望对网友有所帮助 方法/步骤 1.登陆mysql 打cmd命令终端,如果已经添加了mysql的环境变量,可以直接使用命令 mys ...

  3. spring task 定时

    最近工作中需要用到定时任务的功能,虽然Spring3也自带了一个轻量级的定时任务实现,但感觉不够灵活,功能也不够强大.在考虑之后,决定整合更为专业的Quartz来实现定时任务功能. 首先,当然是添加依 ...

  4. FPGA上如何求32个输入的最大值和次大值:分治

    上午在论坛看到个热帖,里头的题目挺有意思的,简单的记录了一下. 0. 题目 在FPGA上实现一个模块,求32个输入中的最大值和次大值,32个输入由一个时钟周期给出.(题目来自论坛,面试题,如果觉得不合 ...

  5. c语言统计一个文件中的单词,字符和行数

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  6. u8g2库的相关资料

    2017-12-1309:13:32更新51论坛上的帖子,大神自己写的库文件,待调试! http://www.51hei.com/bbs/forum.php?mod=viewthread&ti ...

  7. linux_磁盘体系

    未曾习艺先学礼,未曾学武先习德 当今磁盘都是温室磁盘,原理是一样的,高速转动的的盘,磁头做径向运动 当今磁盘的发展趋势: 体积更小.速度更快.容量更大.使用更安全 速度更快: 主轴转速: 10000/ ...

  8. java利用poi生成/读取excel表格

    1.引入jar包依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi< ...

  9. HTML5入门要点

    要点 HTML5是HTML的最新版本.通过引入心的标签.新的语义和媒体元素,同时要依赖一组支持Web应用的JavaScript库 XHTML不再是Web页面开发标准.开发人员和W3C组织觉决定还是继续 ...

  10. Cacti在selinux开启的情况下使用

    # chcon -R -t httpd_sys_content_t /var/www/html/cacti