详解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的滚动鼠标放大缩小图片效果
Oct 27 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
js实现日历与定时器
Feb 22 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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常用的文件操作函数经典收藏
2013/04/02 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
python登录豆瓣并发帖的方法
2015/07/08 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python对List中的元素排序的方法
2018/04/01 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
技术负责人任命书
2014/06/05 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
技术入股协议书
2016/03/22 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL