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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
JS中字符串trim()使用示例
May 26 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
微信小程序框架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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
文件上传程序的全部源码
2006/10/09 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
JS数组转字符串实现方法解析
2020/09/04 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python中open函数的基本用法示例
2019/09/07 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
详解python中的异常捕获
2020/12/15 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
行政办公员自我评价分享
2013/12/14 职场文书
法务专员岗位职责
2014/01/02 职场文书
商铺消防安全责任书
2014/07/29 职场文书
教师节活动总结
2014/08/29 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android