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中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
vue中的scope使用详解
Oct 29 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
js+canvas实现画板功能
Sep 13 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
个人自我鉴定范文
2013/10/04 职场文书
仓管员岗位职责范文
2013/11/08 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
八一建军节慰问信
2015/02/14 职场文书
党校个人总结
2015/03/04 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
高中语文教学反思范文
2016/02/16 职场文书
自荐信范文
2019/05/20 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server