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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
如何制作自己的原生JavaScript路由
May 05 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php实现学生管理系统
2020/03/21 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
javaScript实现游戏倒计时功能
2018/11/17 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Python基于Faker假数据构造库
2020/11/30 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
群众路线剖析材料
2014/02/02 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
政治表现评语
2014/05/04 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
学习委员竞选稿
2015/11/20 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL