详解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和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
原生JS实现层叠轮播图
May 17 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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 采集心得技巧
2009/05/15 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
jQuery实现列表的全选功能
2015/03/18 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python绘制玫瑰的实现代码
2020/03/02 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
文艺演出策划方案
2014/06/07 职场文书
2015年端午节活动方案
2015/05/05 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书