Javascript 面向对象编程(一) 封装


Posted in Javascript onAugust 28, 2011

学习Javascript,最难的地方是什么?

我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。

下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了
以下两本书籍:

Javascript 面向对象编程(一) 封装

《面向对象的Javascript》(Object-Oriented JavaScript)

Javascript 面向对象编程(一) 封装

《Javascript高级程序设计(第二版)》(Professional JavaScript for Web Developers, 2nd Edition)

它们都是非常优秀的Javascript读物,推荐阅读。

笔记分成三部分。今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承"(Inheritance)。

============================

Javascript 面向对象编程(一):封装

作者:阮一峰

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

1. 生成对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

var Cat = { 

name : '', 


color : '' 

}

现在,我们需要根据这个原型对象,生成两个实例对象。
var cat1 = {}; // 创建一个空对象 


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


cat1.color = "黄色"; 

var cat2 = {}; 


cat2.name = "二毛"; 


cat2.color = "黑色";

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


return { 



name:name, 



color:color 


} 

}

然后生成实例对象,就等于是在调用函数:
var cat1 = Cat("大毛","黄色"); 

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

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。
3. 构造函数模式
为了解决从原型对象生成实例的问题,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

4. 构造函数模式的问题
构造函数方法很好用,但是存在一个浪费内存的问题。
请看,我们现在为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()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。
5. 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
6. Prototype模式的验证方法
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 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
Javascript继承机制的设计思想分享
Aug 28 #Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 #Javascript
JS面向对象编程浅析
Aug 28 #Javascript
用JS实现一个TreeMenu效果分享
Aug 28 #Javascript
JS target与currentTarget区别说明
Aug 28 #Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 #Javascript
range 标准化之获取
Aug 28 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
python em算法的实现
2020/10/03 Python
html5时钟实现代码
2010/10/22 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
美术师范毕业生自荐信
2013/11/16 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
自我推荐信怎么写
2015/03/24 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书