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来解决ajax读取页面乱码
Nov 28 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
Vue CL3 配置路径别名详解
May 30 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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在线生成ico文件的代码
2007/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
js中符号转意问题示例探讨
2013/08/19 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
javascript每日必学之循环
2016/02/19 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
React实现全选功能
2020/08/25 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
jQuery冲突问题解决方法
2021/01/19 jQuery
Python单例模式实例详解
2017/03/01 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
经理职责范文
2013/11/08 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
党课学习思想汇报
2014/01/02 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers