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 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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留言板源码
2020/07/19 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python shell根据ip获取主机名代码示例
2017/11/25 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python深度优先算法生成迷宫
2018/01/22 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
产品售后服务承诺书
2014/05/21 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android