详解js 创建对象的几种方法


Posted in Javascript onMarch 08, 2019

在js中创建对象的方法可分为6种,分别是:基本模式、工厂模式、构造函数模式、原型模式、组合模式、动态原型模式,接下来分别看下这几种模式的写法吧

一、基本模式

var person = new Object();
 person.name = "孙悟空";
 person.weapon = "棒子";
 person.run = function () { return this.name + "武器是" + person.weapon;
 }

二、工厂模式

function creatPerson(name, weapon) { var person = new Object();
 person.name = "孙悟空";
 person.weapon = "棒子";
 person.run = function () { return this.name + "武器是" + person.weapon;
 } return person;
 }

缺点:1、实例之间没有联系;2、没有使用new关键字;3、会造成资源的浪费,每生成一个实例都会都会增加一些重复的内容
缺点3如何理解呢:在多次调用creatPerson方法时,创建对象的方法run会生成多个,虽然多个对象的方法都是一样的。

构造函数解决了多个实列之间没有联系的问题,可以用instanceof判断

三、构造函数模式

function creatPerson(name, weapon) { this.name = name; this.weapon = weapon; this.run = function () { return this.name + "武器是" + this.weapon;
 }
 } //调用创建对象
 var wukou =new creatPerson("孙悟空", "棒子");

缺点:没有解决工厂模式浪费内存的缺点,每创建一个对象会增加很多重复的东西
为了解决这个问题请看原型模式

四、原型(Prototype)模式

js中规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法,都会被构造函数的实例继承,可以把那些不变的属性和方法直接定义在prototype对象上

function personObj() { }
 personObj.prototype.name = "孙悟空";
 personObj.prototype.weapon = "棒子";
 personObj.prototype.run = function () { return this.name + "武器是" + this.weapon;
 } //创建对象
 var person = new personObj(); //原型模式的另一种写法 function personObj() { }
 personObj.prototype = {
 constructor: personObj,//强制指回personObj
 name: "孙悟空",
 weapon: "棒子",
 run: function () { return this.name + "武器是" + this.weapon;
 }
 }

缺点:构造函数没有参数,不能传参初始化值,因为不同的对象可能只共享方法,但是不会共享属性,为了解决这个问题请看构造函数和原型模式的组合模式,还解决了前面的所有缺点,Jquery就是使用的这种方法

五、组合模式

这样,不同的实例可有自己特有的属性,还有共享的方法

function personObj(name,weapon) { this.name = name; this.weapon = weapon;
 }
 personObj.prototype = {
 run: function () { return this.name + "武器是" + this.weapon;
 }
 } //创建对象
 var wukou = new personObj("孙悟空", "棒子");

虽然这种创建对象的方式已经够我们使用了,平时使用这方式也没有问题的,当然还有一点小问题:对象中的属性和方法是分开的,请看动态原型方法

六、动态原型模式

function personObj(name, weapon) { this.name = name this.weapon = weapon if (typeof this.run != "function")
 {
 personObj.prototype = {
 run: function () { return this.name + "武器是" + this.weapon;
 }
 }
 }
 
 } 
 //创建对象
 var wukou = new personObj("孙悟空", "棒子");

函数中使用 if (typeof this.run != "function") 目的是为了防止创建多个对象时,方法执行多次

以上所述是小编给大家介绍的js 创建对象的几种方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript淡入淡出效果的实现思路
Mar 31 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 #Javascript
validform表单验证的实现方法
Mar 08 #Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 #Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 #Javascript
深入理解react 组件类型及使用场景
Mar 07 #Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 #Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 #Javascript
You might like
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
javascript event 事件解析
2011/01/31 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
layui表格数据重载
2019/07/27 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
通过cmd进入python的实例操作
2019/06/26 Python
详解Python实现进度条的4种方式
2020/01/15 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Keras loss函数剖析
2020/07/06 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
如何获得EntityManager
2014/02/09 面试题
学前班学生评语
2014/12/29 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python