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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
JS实现瀑布流布局
Oct 21 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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备份/还原MySQL数据库的代码
2011/01/06 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
JavaScript 参考教程
2006/12/29 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
法律专业个人实习自我鉴定
2013/09/23 职场文书
干部对照检查材料范文
2014/08/26 职场文书
银行招聘自荐信
2015/03/06 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
求职信如何撰写?
2019/05/22 职场文书
入党申请书怎么写?
2019/06/21 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS