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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
js仿微信抢红包功能
Sep 25 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 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 YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
javascript如何写热点图
2015/12/08 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python实现Restful API的例子
2019/08/31 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python入门之基础语法学习笔记
2020/02/08 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python 5个顶级异步框架推荐
2020/09/09 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
一年级数学教学反思
2014/02/01 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
校友会致辞
2015/07/30 职场文书
采购员工作总结范文
2015/08/12 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
golang生成vcf通讯录格式文件详情
2022/03/25 Golang