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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
你必须知道的Javascript知识点之"this指针"的应用
Apr 23 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
js实现上传图片到服务器
Apr 11 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
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
深入理解ES7的async/await的用法
2017/09/09 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
使用pandas读取文件的实现
2019/07/31 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2015年材料员工作总结
2015/04/30 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
python中opencv实现图片文本倾斜校正
2021/06/11 Python