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基础知识之数据类型
Aug 06 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
微信小程序框架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 数组实例说明
2008/08/18 PHP
php url路由入门实例
2014/04/23 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
js获取单选按钮的数据
2006/11/27 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
$("").click与onclick的区别示例介绍
2014/09/25 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
远程调用的原理
2014/07/05 面试题
医学院毕业生自荐信
2013/11/08 职场文书
社区清明节活动总结
2014/07/04 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
长城的导游词
2015/01/30 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
2016公司年会通知范文
2015/04/25 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
导游词之阆中古城
2019/12/23 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电