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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JavaScript函数详解
Nov 17 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
js仿微信抢红包功能
Sep 25 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
浅谈JavaScript作用域
Dec 06 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
header()函数使用说明
2006/11/23 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python CSV模块使用实例
2015/04/09 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Django中的Signal代码详解
2018/02/05 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python迭代器常见用法实例分析
2019/11/22 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
学生手册家长评语
2014/02/10 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
工作失职检讨书范文
2015/05/05 职场文书
爱心捐款活动总结
2015/05/09 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Python装饰器详细介绍
2022/03/25 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python