详解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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 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和ACCESS写聊天室(八)
2006/10/09 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python写入CSV文件的方法
2015/07/08 Python
详解K-means算法在Python中的实现
2017/12/05 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
个人担保书格式范文
2014/05/12 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
毕业生工作求职信
2014/06/30 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
员工辞职信范文大全
2015/05/12 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js