详解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 index()方法 获取相应元素索引值
Oct 12 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
浅谈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/01/06 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Angular的$http与$location
2016/12/26 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python操作MongoDB详解及实例
2017/05/18 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
详解python中的线程与线程池
2019/05/10 Python
django中间键重定向实例方法
2019/11/10 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
监察建议书范文
2014/03/12 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
买房委托公证书
2014/04/08 职场文书
励志演讲稿800字
2014/08/21 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书