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操作页面表格,元素的一些技巧
Feb 02 Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 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(7) php 字符串相关应用
2010/03/05 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
使用python实现BLAST
2018/02/12 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Django 再谈一谈json序列化
2020/03/16 Python
用python实现一个简单的验证码
2020/12/09 Python
酒店管理毕业生自荐信
2013/10/24 职场文书
社会学专业求职信
2014/02/24 职场文书
市场营销战略计划书
2014/05/06 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
教你使用TensorFlow2识别验证码
2021/06/11 Python