详解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的匿名函数小结
Dec 31 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 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
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php生成动态验证码gif图片
2015/10/19 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python 可爱的大小写
2008/09/06 Python
python实现rest请求api示例
2014/04/22 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
美化环境标语
2014/06/20 职场文书
2014年行政工作总结
2014/11/19 职场文书
2014年环境整治工作总结
2014/12/10 职场文书