javascript --- 面向对象 --- 封装
javascript中有原型对象和实例对象
如有疑问请参考:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
下面的代码可以用Rhino解释,代码如下:
/**
* Cat的对象
* name、color;猫科动物,吃老鼠
*/
print("--- --- --- 生成对象的原始模式 --- ---");
/*var Cat = {
name : '',
color : ''
};*/
var cat1 = {};
cat1.name = "mao1";
cat1.colr = "orange";
print("cat1 : name=" + cat1.name + ", color=" + cat1.colr);
print();
print("--- --- --- 原始模式的改进 --- ---");
function Cat1(name,color){
return {
name:name,
color:color
};
};
var cat2 = Cat1("mao2", "yellow");
print("cat2 : name=" + cat2.name + ", color=" + cat2.color);
print();
print("--- --- --- 构造函数模式 --- ---");
function Cat2(name, color){
this.name = name;
this.color = color;
}
var cat3 = new Cat2("mao3", "blue");
print("cat3 : name=" + cat3.name + ", color=" + cat3.color);
print("cat3.constructor == Cat2 --- " + (cat3.constructor == Cat2));
print("cat3 instanceof Cat2 --- --- " + (cat3 instanceof Cat2));
print();
print("--- --- --- 构造函数模式的问题 --- ---");
function Cat3(name, color){
this.name = name;
this.color = color;
this.type = "猫科动物";
this.eat = function(){
print("吃老鼠");
};
}
var cat4 = new Cat3("mao4", "red");
var cat5 = new Cat3("mao5", "pink");
print("cat4 : name=" + cat4.name + ", color=" + cat4.color + ", type=" + cat4.type);
cat4.eat();
print("cat5 : name=" + cat5.name + ", color=" + cat5.color + ", type=" + cat5.type);
cat5.eat();
print("cat4.type == cat5.type --- --- " + (cat4.type == cat5.type));
print("cat4.eat == cat5.eat() --- --- " + (cat4.eat == cat5.eat));
print();
print("--- --- --- Prototype模式 --- ---");
function Cat4(name,color){
this.name = name;
this.color = color;
}
Cat4.prototype.type = "猫科动物";
Cat4.prototype.eat = function(){
print("吃老鼠");
};
var cat6 = new Cat4("mao6", "green");
var cat7 = new Cat4("mao7", "gray");
print("cat6 : name=" + cat6.name + ", color=" + cat6.color + ", type=" + cat6.type);
cat6.eat();
print("cat7 : name=" + cat7.name + ", color=" + cat7.color + ", type=" + cat7.type);
cat7.eat();
print("cat6.type == cat7.type --- --- " + (cat6.type == cat7.type));
print("cat6.eat == cat7.eat --- --- - " + (cat6.eat == cat7.eat));
print();
print("--- --- --- Prototype模式的验证方法 --- ---");
print("Cat4.prototype.isPrototypeOf(cat6) --- " + Cat4.prototype.isPrototypeOf(cat6));
print("Cat4.prototype.isPrototypeOf(cat5) --- " + Cat4.prototype.isPrototypeOf(cat5));
print('cat6.hasOwnProperty("name") --- --- ' + cat6.hasOwnProperty("name"));
print('cat6.hasOwnProperty("type") --- --- ' + cat6.hasOwnProperty("type"));
print('"name" in cat7 --- ---' + ("name" in cat7));
print('"colr" in cat7 --- ---' + ("colr" in cat7));
for(var prop in cat7) {
print("\tcat7["+prop+"] = " + cat7[prop]);
}
打印结果如下:
--- --- --- 生成对象的原始模式 --- ---
cat1 : name=mao1, color=orange
--- --- --- 原始模式的改进 --- ---
cat2 : name=mao2, color=yellow
--- --- --- 构造函数模式 --- ---
cat3 : name=mao3, color=blue
cat3.constructor == Cat2 --- true
cat3 instanceof Cat2 --- --- true
--- --- --- 构造函数模式的问题 --- ---
cat4 : name=mao4, color=red, type=猫科动物
吃老鼠
cat5 : name=mao5, color=pink, type=猫科动物
吃老鼠
cat4.type == cat5.type --- --- true
cat4.eat == cat5.eat() --- --- false
--- --- --- Prototype模式 --- ---
cat6 : name=mao6, color=green, type=猫科动物
吃老鼠
cat7 : name=mao7, color=gray, type=猫科动物
吃老鼠
cat6.type == cat7.type --- --- true
cat6.eat == cat7.eat --- --- - true
--- --- --- Prototype模式的验证方法 --- ---
Cat4.prototype.isPrototypeOf(cat6) --- true
Cat4.prototype.isPrototypeOf(cat5) --- false
cat6.hasOwnProperty("name") --- --- true
cat6.hasOwnProperty("type") --- --- false
"name" in cat7 --- ---true
"colr" in cat7 --- ---false
cat7[name] = mao7
cat7[color] = gray
cat7[type] = 猫科动物
cat7[eat] =
function () {
print("\u5403\u8001\u9f20");
}
javascript --- 面向对象 --- 封装的更多相关文章
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- JavaScript面向对象--封装
一.封装的概念 面向对象的类包括两大成员,一种是暴露给外部的接口,另一种是只在类内部才能访问的私有属性.在这个类被实例化成对象后,用户只能通过操作给定的接口来访问该类内部的私有属性,这就被称为面向对象 ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象(一):封装
本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...
- 【转】Javascript 面向对象编程(一):封装
原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript ...
- Javascript 面向对象编程(一):封装 by 阮一峰
<Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Java ...
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...
- Javascript 面向对象编程—封装
前 言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
- Javascript 面向对象编程—继承和封装
前 言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
随机推荐
- C++:delete和delete[]释放内存的区别
C++告诉我们在回收用 new 分配的单个对象的内存空间的时候用 delete,回收用 new[] 分配的一组对象的内存空间的时候用 delete[]. 关于 new[] 和 delete[], ...
- 分析函数(Analytic Functions)
在OLAP这类系统或者DW这类数据库中,作为某份报表的数据源,我们常常需要在某个存储过程中编写复杂的运算代码来汇总数据.分析函数便具备这样的能力,引用多行的数据值来进行多层面的聚合运算,在数据子集中进 ...
- 转:C# 通过委托更新UI(异步加载)
来自:http://blog.csdn.net/gongzhe2011/article/details/27351853 using System.Windows.Forms; using Syste ...
- Git设置及GitHub的使用
把github上的help略略翻译一遍.备忘. First : 安装:ubuntu 下,终端输入命令: sudo apt-get install git-core git-gui git-doc Ne ...
- java基础篇---I/O技术
java基础篇---I/O技术 对于任何程序设计语言而言,输入输出(I/O)系统都是比较复杂的而且还是比较核心的.在java.io.包中提供了相关的API. java中流的概念划分 流的方向: 输 ...
- xpath选择器使用
简单说,xpath就是选择XML文件中节点的方法. 所谓节点(node),就是XML文件的最小构成单位,一共分成7种. - element(元素节点)- attribute(属性节点)- text ( ...
- SGU 132 Another Chocolate Maniac 状态压缩DP
感觉不是很好写的一道状态压缩. dp[i][j][k]表示第 i 行状态为k,第i - 1行状态为 j,具体细节见代码. 内存卡的很死,要用滚动数组. 还有一个比较坑爹的地方是它在输入蛋糕的时候中间可 ...
- (step4.2.5)hdu 1495(非常可乐——BFS)
题目大意:输入三个整数 a,b,c. a : 可乐瓶的容量,b: 甲杯的容量 ,c: 乙杯的容量.问能否用这三个被来实现饮料的平分???如果可以输出倒饮料的次数, 否则输出NO 解题思路:BFS ...
- 《Linux/Unix系统编程手册》读书笔记 目录
<Linux/Unix系统编程手册>读书笔记1 (创建于4月3日,最后更新4月7日) <Linux/Unix系统编程手册>读书笔记2 (创建于4月9日,最后更新4月10日) ...
- Redstone 云观象台 服务器部署 - Nginx配置文件
以下信息仅针对Redstone的Ngxin配置文件进行更新. web服务器Nginx配置文件结构如下: /etc/nginx/nginx.conf # For more information on ...