Javascript 面向对象编程(coolshell)


Posted in Javascript onMarch 18, 2012

这两天有个前同事总在问我Javascript面向对象的东西,所以,索性写篇文章让他看去吧,这里这篇文章主要想从一个整体的角度来说明一下Javascript的面向对象的编程。(成文比较仓促,应该有不准确或是有误的地方,请大家批评指正)
另,这篇文章主要基于 ECMAScript 5, 旨在介绍新技术。关于兼容性的东西,请看最后一节。

初探
我们知道Javascript中的变量定义基本如下:

var name = 'Chen Hao';; 
var email = 'haoel(@)hotmail.com'; 
var website = 'http://3water.com';

如果要用对象来写的话,就是下面这个样子:
var chenhao = { 
name :'Chen Hao', 
email : 'haoel(@)hotmail.com', 
website : 'http://3water.com' 
};

于是,我就可以这样访问:
//以成员的方式 
chenhao.name; 
chenhao.email; 
chenhao.website; //以hash map的方式 
chenhao["name"]; 
chenhao["email"]; 
chenhao["website"];

关于函数,我们知道Javascript的函数是这样的:
var doSomething = function(){ 
alert('Hello World.'); 
};

于是,我们可以这么干:
var sayHello = function(){ 
var hello = "Hello, I'm "+ this.name 
+ ", my email is: " + this.email 
+ ", my website is: " + this.website; 
alert(hello); 
}; //直接赋值,这里很像C/C++的函数指针 
chenhao.Hello = sayHello; 
chenhao.Hello();

相信这些东西都比较简单,大家都明白了。 可以看到javascript对象函数是直接声明,直接赋值,直接就用了。runtime的动态语言。

还有一种比较规范的写法是:

//我们可以看到, 其用function来做class。 
var Person = function(name, email, website){ 
this.name = name; 
this.email = email; 
this.website = website; this.sayHello = function(){ 
var hello = "Hello, I'm "+ this.name + ", \n" + 
"my email is: " + this.email + ", \n" + 
"my website is: " + this.website; 
alert(hello); 
}; 
}; 
var chenhao = new Person("Chen Hao", "haoel@hotmail.com", 
"http://3water.com"); 
chenhao.sayHello();

顺便说一下,要删除对象的属性,很简单:

1 delete chenhao['email']

上面的这些例子,我们可以看到这样几点:

Javascript的数据和成员封装很简单。没有类完全是对象操作。纯动态!
Javascript function中的this指针很关键,如果没有的话,那就是局部变量或局部函数。
Javascript对象成员函数可以在使用时临时声明,并把一个全局函数直接赋过去就好了。
Javascript的成员函数可以在实例上进行修改,也就是说不同实例相同函数名的行为不一定一样。
属性配置 ? Object.defineProperty
先看下面的代码:

//创建对象 
var chenhao = Object.create(null); //设置一个属性 
Object.defineProperty( chenhao, 
'name', { value: 'Chen Hao', 
writable: true, 
configurable: true, 
enumerable: true }); 
//设置多个属性 
Object.defineProperties( chenhao, 
{ 
'email' : { value: 'haoel@hotmail.com', 
writable: true, 
configurable: true, 
enumerable: true }, 
'website': { value: 'http://3water.com', 
writable: true, 
configurable: true, 
enumerable: true } 
} 
);

下面就说说这些属性配置是什么意思。

writable:这个属性的值是否可以改。
configurable:这个属性的配置是否可以改。
enumerable:这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value:属性值。
get()/set(_value):get和set访问器。
Get/Set 访问器
关于get/set访问器,它的意思就是用get/set来取代value(其不能和value一起使用),示例如下:

var age = 0; 
Object.defineProperty( chenhao, 
'age', { 
get: function() {return age+1;}, 
set: function(value) {age = value;} 
enumerable : true, 
configurable : true 
} 
); 
chenhao.age = 100; //调用set 
alert(chenhao.age); //调用get 输出101(get中+1了);

我们再看一个更为实用的例子——利用已有的属性(age)通过get和set构造新的属性(birth_year):
Object.defineProperty( chenhao, 
'birth_year', 
{ 
get: function() { 
var d = new Date(); 
var y = d.getFullYear(); 
return ( y - this.age ); 
}, 
set: function(year) { 
var d = new Date(); 
var y = d.getFullYear(); 
this.age = y - year; 
} 
} 
); alert(chenhao.birth_year); 
chenhao.birth_year = 2000; 
alert(chenhao.age);

这样做好像有点麻烦,你说,我为什么不写成下面这个样子:
var chenhao = { 
name: "Chen Hao", 
email: "haoel@hotmail.com", 
website: "http://3water.com", 
age: 100, 
get birth_year() { 
var d = new Date(); 
var y = d.getFullYear(); 
return ( y - this.age ); 
}, 
set birth_year(year) { 
var d = new Date(); 
var y = d.getFullYear(); 
this.age = y - year; 
} }; 
alert(chenhao.birth_year); 
chenhao.birth_year = 2000; 
alert(chenhao.age);

是的,你的确可以这样的,不过通过defineProperty()你可以干这些事:
1)设置如 writable,configurable,enumerable 等这类的属性配置。
2)动态地为一个对象加属性。比如:一些HTML的DOM对像。

查看对象属性配置
如果查看并管理对象的这些配置,下面有个程序可以输出对象的属性和配置等东西:

//列出对象的属性. 
function listProperties(obj) 
{ 
var newLine = "<br />"; 
var names = Object.getOwnPropertyNames(obj); 
for (var i = 0; i < names.length; i++) { 
var prop = names[i]; 
document.write(prop + newLine); // 列出对象的属性配置(descriptor)动用getOwnPropertyDescriptor函数。 
var descriptor = Object.getOwnPropertyDescriptor(obj, prop); 
for (var attr in descriptor) { 
document.write("..." + attr + ': ' + descriptor[attr]); 
document.write(newLine); 
} 
document.write(newLine); 
} 
} 
listProperties(chenhao);

call,apply, bind 和 this
关于Javascript的this指针,和C++/Java很类似。 我们来看个示例:(这个示例很简单了,我就不多说了)
function print(text){ 
document.write(this.value + ' - ' + text+ '<br>'); 
} var a = {value: 10, print : print}; 
var b = {value: 20, print : print}; 
print('hello');// this => global, output "undefined - hello" 
a.print('a');// this => a, output "10 - a" 
b.print('b'); // this => b, output "20 - b" 
a['print']('a'); // this => a, output "10 - a"

我们再来看看call 和 apply,这两个函数的差别就是参数的样子不一样,另一个就是性能不一样,apply的性能要差很多。(关于性能,可到 JSPerf 上去跑跑看看)
print.call(a, 'a'); // this => a, output "10 - a" 
print.call(b, 'b'); // this => b, output "20 - b" print.apply(a, ['a']); // this => a, output "10 - a" 
print.apply(b, ['b']); // this => b, output "20 - b"

但是在bind后,this指针,可能会有不一样,但是因为Javascript是动态的。如下面的示例
var p = print.bind(a); 
p('a'); // this => a, output "10 - a" 
p.call(b, 'b'); // this => a, output "10 - b" 
p.apply(b, ['b']); // this => a, output "10 - b"

继承 和 重载
通过上面的那些示例,我们可以通过Object.create()来实际继承,请看下面的代码,Student继承于Object。
var Person = Object.create(null); Object.defineProperties 
( 
Person, 
{ 
'name' : { value: 'Chen Hao'}, 
'email' : { value : 'haoel@hotmail.com'}, 
'website': { value: 'http://3water.com'} 
} 
); 
Person.sayHello = function () { 
var hello = "<p>Hello, I am "+ this.name + ", <br>" + 
"my email is: " + this.email + ", <br>" + 
"my website is: " + this.website; 
document.write(hello + "<br>"); 
} 
var Student = Object.create(Person); 
Student.no = "1234567"; //学号 
Student.dept = "Computer Science"; //系 
//使用Person的属性 
document.write(Student.name + ' ' + Student.email + ' ' + Student.website +'<br>'); 
//使用Person的方法 
Student.sayHello(); 
//重载SayHello方法 
Student.sayHello = function (person) { 
var hello = "<p>Hello, I am "+ this.name + ", <br>" + 
"my email is: " + this.email + ", <br>" + 
"my website is: " + this.website + ", <br>" + 
"my student no is: " + this. no + ", <br>" + 
"my departent is: " + this. dept; 
document.write(hello + '<br>'); 
} 
//再次调用 
Student.sayHello(); 
//查看Student的属性(只有 no 、 dept 和 重载了的sayHello) 
document.write('<p>' + Object.keys(Student) + '<br>');

通用上面这个示例,我们可以看到,Person里的属性并没有被真正复制到了Student中来,但是我们可以去存取。这是因为Javascript用委托实现了这一机制。其实,这就是Prototype,Person是Student的Prototype。

当我们的代码需要一个属性的时候,Javascript的引擎会先看当前的这个对象中是否有这个属性,如果没有的话,就会查找他的Prototype对象是否有这个属性,一直继续下去,直到找到或是直到没有Prototype对象。

为了证明这个事,我们可以使用Object.getPrototypeOf()来检验一下:

Student.name = 'aaa'; //输出 aaa 
document.write('<p>' + Student.name + '</p>'); 
//输出 Chen Hao 
document.write('<p>' +Object.getPrototypeOf(Student).name + '</p>');

于是,你还可以在子对象的函数里调用父对象的函数,就好像C++里的 Base::func() 一样。于是,我们重载hello的方法就可以使用父类的代码了,如下所示:
//新版的重载SayHello方法 
Student.sayHello = function (person) { 
Object.getPrototypeOf(this).sayHello.call(this); 
var hello = "my student no is: " + this. no + ", <br>" + 
"my departent is: " + this. dept; 
document.write(hello + '<br>'); 
}

这个很强大吧。

组合
上面的那个东西还不能满足我们的要求,我们可能希望这些对象能真正的组合起来。为什么要组合?因为我们都知道是这是OO设计的最重要的东西。不过,这对于Javascript来并没有支持得特别好,不好我们依然可以搞定个事。

首先,我们需要定义一个Composition的函数:(target是作用于是对象,source是源对象),下面这个代码还是很简单的,就是把source里的属性一个一个拿出来然后定义到target中。

function Composition(target, source) 
{ 
var desc = Object.getOwnPropertyDescriptor; 
var prop = Object.getOwnPropertyNames; 
var def_prop = Object.defineProperty; prop(source).forEach( 
function(key) { 
def_prop(target, key, desc(source, key)) 
} 
) 
return target; 
}

有了这个函数以后,我们就可以这来玩了:
//艺术家 
var Artist = Object.create(null); 
Artist.sing = function() { 
return this.name + ' starts singing...'; 
} 
Artist.paint = function() { 
return this.name + ' starts painting...'; 
} //运动员 
var Sporter = Object.create(null); 
Sporter.run = function() { 
return this.name + ' starts running...'; 
} 
Sporter.swim = function() { 
return this.name + ' starts swimming...'; 
} 
Composition(Person, Artist); 
document.write(Person.sing() + '<br>'); 
document.write(Person.paint() + '<br>'); 
Composition(Person, Sporter); 
document.write(Person.run() + '<br>'); 
document.write(Person.swim() + '<br>'); 
//看看 Person中有什么?(输出:sayHello,sing,paint,swim,run) 
document.write('<p>' + Object.keys(Person) + '<br>');

Prototype 和 继承
我们先来说说Prototype。我们先看下面的例程,这个例程不需要解释吧,很像C语言里的函数指针,在C语言里这样的东西见得多了。
var plus = function(x,y){ 
document.write( x + ' + ' + y + ' = ' + (x+y) + '<br>'); 
return x + y; 
}; var minus = function(x,y){ 
document.write(x + ' - ' + y + ' = ' + (x-y) + '<br>'); 
return x - y; 
}; 
var operations = { 
'+': plus, 
'-': minus 
}; 
var calculate = function(x, y, operation){ 
return operations[operation](x, y); 
}; 
calculate(12, 4, '+'); 
calculate(24, 3, '-');

那么,我们能不能把这些东西封装起来呢,我们需要使用prototype。看下面的示例:
var Cal = function(x, y){ 
this.x = x; 
this.y = y; 
} Cal.prototype.operations = { 
'+': function(x, y) { return x+y;}, 
'-': function(x, y) { return x-y;} 
}; 
Cal.prototype.calculate = function(operation){ 
return this.operations[operation](this.x, this.y); 
}; 
var c = new Cal(4, 5); 
c.calculate('+'); 
c.calculate('-');

这就是prototype的用法,prototype 是javascript这个语言中最重要的内容。网上有太多的文章介始这个东西了。说白了,prototype就是对一对象进行扩展,其特点在于通过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是我们所称的“原型”,这个原型是可定制的(当然,这里没有真正的复制,实际只是委托)。上面的这个例子中,我们扩展了实例Cal,让其有了一个operations的属性和一个calculate的方法。

这样,我们可以通过这一特性来实现继承。还记得我们最最前面的那个Person吧, 下面的示例是创建一个Student来继承Person。

function Person(name, email, website){ 
this.name = name; 
this.email = email; 
this.website = website; 
}; Person.prototype.sayHello = function(){ 
var hello = "Hello, I am "+ this.name + ", <br>" + 
"my email is: " + this.email + ", <br>" + 
"my website is: " + this.website; 
return hello; 
}; 
function Student(name, email, website, no, dept){ 
var proto = Object.getPrototypeOf; 
proto(Student.prototype).constructor.call(this, name, email, website); 
this.no = no; 
this.dept = dept; 
} 
// 继承prototype 
Student.prototype = Object.create(Person.prototype); 
//重置构造函数 
Student.prototype.constructor = Student; 
//重载sayHello() 
Student.prototype.sayHello = function(){ 
var proto = Object.getPrototypeOf; 
var hello = proto(Student.prototype).sayHello.call(this) + '<br>'; 
hello += "my student no is: " + this. no + ", <br>" + 
"my departent is: " + this. dept; 
return hello; 
}; 
var me = new Student( 
"Chen Hao", 
"haoel@hotmail.com", 
"http://3water.com", 
"12345678", 
"Computer Science" 
); 
document.write(me.sayHello());

兼容性
上面的这些代码并不一定能在所有的浏览器下都能运行,因为上面这些代码遵循 ECMAScript 5 的规范,关于ECMAScript 5 的浏览器兼容列表,你可以看这里“ES5浏览器兼容表”。

本文中的所有代码都在Chrome最新版中测试过了。

下面是一些函数,可以用在不兼容ES5的浏览器中:

Object.create()函数

function clone(proto) { 
function Dummy() { } Dummy.prototype = proto; 
Dummy.prototype.constructor = Dummy; 
return new Dummy(); //等价于Object.create(Person); 
} 
var me = clone(Person);

defineProperty()函数
function defineProperty(target, key, descriptor) { 
if (descriptor.value){ 
target[key] = descriptor.value; 
}else { 
descriptor.get && target.__defineGetter__(key, descriptor.get); 
descriptor.set && target.__defineSetter__(key, descriptor.set); 
} return target 
}

keys()函数
function keys(object) { var result, key 
result = []; 
for (key in object){ 
if (object.hasOwnProperty(key)) result.push(key) 
} return result; 
}

Object.getPrototypeOf() 函数
function proto(object) { 
return !object? null 
: '__proto__' in object? object.__proto__ 
: /* not exposed? */ object.constructor.prototype 
}

bind 函数
var slice = [].slice function bind(fn, bound_this) { var bound_args 
bound_args = slice.call(arguments, 2) 
return function() { var args 
args = bound_args.concat(slice.call(arguments)) 
return fn.apply(bound_this, args) } 
}

参考
W3CSchool
MDN (Mozilla Developer Network)
MSDN (Microsoft Software Development Network)
Understanding Javascript OOP.
Javascript 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
JS字符串截取函数实例
Dec 27 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
package.json配置文件构成详解
Aug 27 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
element跨分页操作选择详解
Jun 29 Javascript
Javascript面向对象编程
Mar 18 #Javascript
javascript 常用功能总结
Mar 18 #Javascript
Jquery实现简单的动画效果代码
Mar 18 #Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 #Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 #Javascript
基于jQuery的弹出框插件
Mar 18 #Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 #Javascript
You might like
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
Opacity.js
2007/01/22 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
javascript基本语法
2016/05/31 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
通过python检测字符串的字母
2020/02/18 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
公司总经理任命书
2014/06/05 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2019年教师入党申请书
2019/06/27 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python