详解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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
原生js编写焦点图效果
Dec 08 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
深入解析koa之异步回调处理
Jun 17 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
javascript测试题练习代码
2012/10/10 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
安装dbus-python的简要教程
2015/05/05 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
windows下python安装pip图文教程
2018/05/25 Python
python构建基础的爬虫教学
2018/12/23 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python 必须了解的5种高级特征
2020/09/10 Python
外语系毕业生求职自荐信
2014/04/12 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2015年校长新年寄语
2014/12/08 职场文书
实习介绍信模板
2015/01/30 职场文书
会计工作检讨书
2015/02/19 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android