详解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 脚本将当地时间转换成其它时区
Mar 19 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
js+springMVC 提交数组数据到后台的实例
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
php 静态变量的初始化
2009/11/15 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
公积金转移接收函
2014/01/11 职场文书
小学端午节活动方案
2014/03/13 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
医院标语大全
2014/06/23 职场文书
基层党员对照检查材料
2014/08/25 职场文书
python爬虫selenium模块详解
2021/03/30 Python
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
深入理解pytorch库的dockerfile
2022/06/10 Python