详解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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
php PDO异常处理详解
2016/11/20 PHP
js获取事件源及触发该事件的对象
2013/10/24 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
vue中的ref和$refs的使用
2018/11/22 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python如何实现定时器功能
2020/05/28 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
Java的for语句中break, continue和return的区别
2013/12/19 面试题
护士辞职信模板
2014/01/20 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
美容院经理岗位职责
2014/04/03 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
cf战队宣传语
2015/07/13 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
python如何进行基准测试
2021/04/26 Python