Some print.
Some print.

javascript的面向对象

By19.Published on2009-01-7.

JS的面向对象.

所谓JS面向对象当然不会像JAVA，AS3那样的完全面向对象语言所具有继承、多态，以及接口这样的概念。这里的面向对象只是创建JS“对象”后，调用“对象”中的方法。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<html> 
<head> 
<title>javascript_oop</title> 
<script type="text/javascript"> 
var Test = function() {
 
	// 私有属性
	var key;
 
	// 私有方法
	function private1() {
		alert ("测试私有方法private1");
	}
	//测试私有
	private1();
 
	return {
		// 公用属性
		p : 1,
		// 公用方法
		getkey : function() {
			return this.key;
		},
		setkey : function(key) {
			this.key = key;
		}
	};
};
 
// 测试公用
var t = new Test();
t.setkey(100);
alert('调用公用属性：' + t.p);
alert('调用公用方法：' + t.getkey());
 
function t1() {
t.private1();
}
</script> 
</head> 
<body> 
<a href="javascript:t1()">测试调用私有方法</a> 
</body> 
</html>

首先创建的var Test = function() 可以看做一个类似java的类，类名就是Test。之后创建对象var t = new Test();的时候就执行了Test = 后面的匿名函数function() {}（就像JAVA的构造函数一样），里面return以外的部分类似JAVA中private私有的方法和属性，至于return里面就是公用的public方法和属性。其实到这就很明白了，就是return回来一个json当做公用，从而来达到类似“对象”的效果。

其中上面的js在运行过程中,第一次alert就是在创建对象的时候执行了类似JAVA的构造函数的匿名函数function() {}，测试了私有方法的调用。之后的两次alert测试了公用属性和公用方法，如果你点击“测试调用私有方法”来调用对象“私有”的方法就会报错，因为这是不被允许的。

之后另一个实现JS对象，这是我在网络搜索的一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<html> 
<head> 
<title>javascript_oop2</title> 
 
</head> 
<body> 
<script type="text/javascript"> 
//构造函数
function Animal(name, sound, age) {
    this.name = name;
    this.sound = sound;
    this.age = age;
}
 
//类属性
Animal.description = 'animal';
 
//类静态方法
Animal.descript = function() {
    document.write('This is a \'' + this.description + '\' class!<br>');
}
 
//实例后对象方法
Animal.prototype = {
    sayName:function(str) {
                document.write('My name is:' + this.name + str + '<br>');
            },
    shout:function() {
              document.write('My sound is:' + this.sound + '!!!<br>');
          },
    sayInfo:function() {
                document.write('Name = ' + this.name + '; Age = ' + this.age + '<br>');
            }
};
 
//测试类
Animal.descript();
var dog = new Animal('dog', 'wang wang', 5);
var cat = new Animal('cat', 'miao miao', 3);
dog.sayName('.--wang');
cat.sayName('.--miao');
dog.shout();
cat.shout();
dog.sayInfo();
cat.sayInfo();
</script> 
</body> 
</html>

同样的道理不同的写法。

JQUERY的插件实现也用到了类似的方法，源码中jQuery.fn = jQuery.prototype={…}，对jQuery类的prototype和jQuery.fn指向同一个对象。在我们开发插件的时候jQuery.fn.yourName = function() {} 就有点继承的感觉了。

{ Tags: }

(查看之前文章)    »    |    (查看之后文章)    »    |


这篇文章发布于 2009年01月7日，星期三，6:43 下午，归类于 Diary。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。



3 Responses to “ javascript的面向对象 ”

  1. QQ个性签名 说： ( Has commented 1 times in LL19.com )
    2009-01-13 于 11:34 下午

    看起来有点头疼。。。。

    回复 |  回复并邮件
  2. 纪小年 说： ( Has commented 28 times in LL19.com )
    2009-01-12 于 8:41 下午

    第一个例子里面的连接：

    测试调用私有方法

    点击之后IE7会报错…FF和chrome没反应…
    第二个没看懂，因为没学习过JAVA….
    o(╯□╰)o

    回复 |  回复并邮件
    • 19. 说： ( Admin commented )
      2009-01-13 于 9:24 上午

      点击测试调用私有方法报错是正常的，后面说了，这是尝试调用对象的私有方法，是不被允许的。

      回复 |  回复并邮件

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。