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返回顶部效果(自写代码)
Jan 06 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
vuex提交state&&实时监听state数据的改变方法
Sep 16 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
Node.js API详解之 net模块实例分析
May 18 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版(2)
2006/10/09 PHP
Php注入点构造代码
2008/06/14 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
详解vue-cli3使用
2018/08/14 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
flask项目集成swagger的方法
2020/12/09 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
情况说明书格式范文
2014/05/06 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL