详解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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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二维数组排序简单实现方法
2016/02/14 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
python+opencv轮廓检测代码解析
2018/01/05 Python
python3调用R的示例代码
2018/02/23 Python
python使用thrift教程的方法示例
2019/03/21 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
python excel转换csv代码实例
2019/08/26 Python
python创建n行m列数组示例
2019/12/02 Python
python数字类型math库原理解析
2020/03/02 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
个人安全生产承诺书
2014/05/22 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
医学求职自荐信
2014/06/21 职场文书
就业导师推荐信范文
2015/03/27 职场文书
接待员岗位职责范本
2015/04/15 职场文书
检讨书怎么写
2015/05/07 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫