详解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实现分割提取页面所需内容
May 09 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jQuery 表格工具集
Apr 25 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
JS高级笔记
Jul 13 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
viewer.js实现图片预览功能
Jun 24 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
星际中的相关伤害
2020/03/04 星际争霸
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
jQuery.parseJSON()函数详解
2019/02/28 jQuery
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
python简单线程和协程学习心得(分享)
2017/06/14 Python
python实现dijkstra最短路由算法
2019/01/17 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
电气专业应届生求职信
2013/11/01 职场文书
党员承诺书格式
2014/05/21 职场文书
助学贷款贫困证明
2014/09/23 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
2015年入党决心书
2015/02/05 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
公司辞职信模板
2015/05/13 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB