详解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中的数字与字符串相加实例分析
Aug 14 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
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
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Python 没有main函数的原因
2020/07/10 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
一道SQL面试题
2012/12/31 面试题
2014两会优秀的心得体会范文
2014/03/17 职场文书
农村文化活动总结
2014/08/28 职场文书
法人代表证明书格式
2014/10/01 职场文书
党员自我评价范文2015
2015/03/03 职场文书
社区国庆节活动总结
2015/03/23 职场文书
技术转让协议书
2016/03/19 职场文书
装修安全责任协议书
2016/03/22 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS