详解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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
详解js获取video任意时间的画面截图
Apr 17 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
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
js word表格动态添加代码
2010/06/07 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python数字类型math库原理解析
2020/03/02 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
团员的自我评价
2013/12/01 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
大学生自我鉴定
2013/12/16 职场文书
劳资专员岗位职责
2013/12/27 职场文书
社区工作者先进事迹
2014/01/18 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
设计师求职信
2014/07/01 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
检讨书大全
2015/01/27 职场文书
获奖感言一句话
2015/07/31 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android