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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
基于node.js实现微信支付退款功能
Dec 19 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
Vue多选列表组件深入详解
Mar 02 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
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php 常用的系统函数
2017/02/07 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
Vuex简单入门
2017/04/19 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python中is和==的区别详解
2018/11/15 Python
python 图像平移和旋转的实例
2019/01/10 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书