学习Javascript面向对象编程之封装


Posted in Javascript onFebruary 23, 2016

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。
那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?
一、 生成对象的原始模式
假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

var Cat = {

name : '',


color : ''

}

现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。 

var cat1 = {}; // 创建一个空对象

cat1.name = "大毛"; // 按照原型对象的属性赋值


cat1.color = "黄色";

var cat2 = {};


cat2.name = "二毛";


cat2.color = "黑色";

好了,这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。
二、 原始模式的改进
我们可以写一个函数,解决代码重复的问题。

function Cat(name,color){

return {



name:name,



color:color


}

}

然后生成实例对象,就等于是在调用函数:

var cat1 = Cat("大毛","黄色");
var cat2 = Cat("二毛","黑色");

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。
三、 构造函数模式
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
比如,猫的原型对象现在可以这样写,
 

 function Cat(name,color){

this.name=name;


this.color=color;

}

我们现在就可以生成实例对象了。

 var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");

alert(cat1.name); // 大毛

alert(cat1.color); // 黄色

这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。 

alert(cat1.constructor == Cat); //true
alert(cat2.constructor == Cat); //true

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。 

 alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true

四、构造函数模式的问题
构造函数方法很好用,但是存在一个浪费内存的问题。
请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样: 

 function Cat(name,color){

this.name = name;


this.color = color;


this.type = "猫科动物";


this.eat = function(){alert("吃老鼠");};

}

还是采用同样的方法,生成实例:

 var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");

alert(cat1.type); // 猫科动物

cat1.eat(); // 吃老鼠

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

alert(cat1.eat == cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。
五、 Prototype模式
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上:

 function Cat(name,color){

this.name = name;


this.color = color;

}

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")};

然后,生成实例。

 var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");

alert(cat1.type); // 猫科动物

cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

 alert(cat1.eat == cat2.eat); //true

六、 Prototype模式的验证方法
为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。,
6.1 isPrototypeOf()
这个方法用来判断,某个proptotype对象和某个实例之间的关系。

 alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()
每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。 

 alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false

6.3 in运算符
in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。 

 alert("name" in cat1); // true
alert("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。 

 for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

以上就是关于javascript封装的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
javascript每日必学之封装
Feb 23 #Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 #Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 #Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 #Javascript
JavaScript tab选项卡插件实例代码
Feb 23 #Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 #Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 #Javascript
You might like
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python 实现进度条的六种方式
2021/01/06 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
网络工程专业大学生求职信
2014/10/01 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
户外拓展训练感想
2015/08/07 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技