Javascript 之封装(Package)


Posted in Javascript onSeptember 14, 2018

一、 构造函数(Constructor)模式的封装
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
举个例子,下面生成的是狗的原型对象:

function Dog(name,color,species){

this.name = name;

this.color = color;

this.species = species;

this.type = "犬科动物";

}

生成实例对象如下:

var dog1 = new Dog("大黄","黄色","中华田园犬");

var dog2 = new Dog("小黑","黑色","德国黑背");

alert(dog1.name); //大黄

alert(dog2.color); //黑色

这时dog1和dog2会自动含有一个constructor属性,指向它们的构造函数。

alert(dog1.constructor == Dog); //true

alert(dog2.constructor == Dog); //true

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。

alert(dog1 instanceof Dog); //true

alert(dog2 instanceof Dog); //true

但是,构造函数模式也存在浪费内存的问题。因为对于每一个实例对象,type属性都是一样的内容,每生成一个实例对象,都必须为重复的内容多分配一次内存,这样既不节省,也缺乏效率。因此,我们应该想出一种让type这样的属性在内存中只生成一次,并且所有实例都指向这个内存地址的方法。

二、 构造函数结合原型属性(Prototype)模式的封装
针对构造函数方法会浪费内存的问题,有下面的解决方案,即将那些不变的属性和方法,直接定义在构造函数的Prototype对象上。

function Dog(name,color,species){

this.name = name;

this.color = color;

this.species = species;

}

Dog.prototype.type = "犬科动物";

生成实例对象如下:

var dog1 = new Dog("大黄","黄色","中华田园犬");

var dog2 = new Dog("小黑","黑色","德国黑背");

alert(dog1.type); //犬科动物

这时所有实例的type属性,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

三、 Prototype模式的验证方法
为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。

3.1 isPrototypeOf()

这个方法用来判断,某个proptotype对象和某个实例之间的关系。

alert(Dog.prototype.isPrototypeOf(dog1)); //true

alert(Dog.prototype.isPrototypeOf(dog2)); //true

3.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

alert(dog1.hasOwnProperty("name")); // true

alert(dog1.hasOwnProperty("type")); // false

3.3 in运算符

in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

alert("name" in dog1); // true

alert("type" in dog1); // true

in运算符还可以用来遍历某个对象的所有属性。

for(var prop in dog1) { alert("dog1["+prop+"]="+dog1[prop]); }

总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
vue二级路由设置方法
Feb 09 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
微信小程序框架wepy之动态控制类名
Sep 14 #Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 #Javascript
react 国际化的实现代码示例
Sep 14 #Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 #Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 #Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 #Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 #Javascript
You might like
星际争霸中的热键
2020/03/04 星际争霸
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
使用PHP维护文件系统
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python微信好友数据分析详解
2018/11/19 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
小学生学习感言
2014/03/10 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
机械系毕业生求职信
2014/05/28 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python