Extjs 4入门 Javascript中的面向对象编程

1.在Javascript中直接使用对象

 

module("Javascript Class & Extjs Class")
		test("Javascript Object", function() {
			//直接使用对象
			var bob = {
				name : "bob",
				age : 13
			}
			equal(bob.name, "bob")
			equal(bob.age, 13)
			//相当于
			var jack = new Object()
			jack.name = "jack"
			jack.age = 14
			equal(jack.name, "jack")
			equal(jack.age, 14)
		})

 

 

 Javascript中的对象，相当于一个Map，就是属性名称和属性值的对应关系集合。

 Javascript中除了基本类型：null,undefined,boolean,string,number之外，其他都是Object类型。

2.在Javascript中定义类

 

 //定义一个People类
			var People = function(name)
			{
				this.name = name;
				this.say=function(){
					return Ext.String.format("I'm {0}.",this.name)
				}
			}
			var p = new People("Jack")
			equal(p.name,"Jack")
			equal(p.say(),"I'm Jack.")

 

 

new People("Jack")的执行过程是，先创建一个空对象，相当于：

 

var p = new Object 
//或者
var p = {}

 

 

然后，将这空对象，作为函数的context（就是this引用的对象）， 传递给函数，并调用这个函数(带上参数name)。（如果要改变一个函数内部this引用的对象，可以通过myfunction.call或者myfunction.apply调用myfunction，而不是直接调用myfunction() ）

也就是说，相当于执行了如下代码：

 

p.name = name
p.say = function(){...}

 

 

也就是：

 

var p = {}
People.call(p,"David")
equal(p.name,"David")
equal(p.say(),"I'm David.")

 

 

 

上面的代码定义了People类，实现了OOP中的封装（封装了两个成员name 和 say()）。

3.实现继承

Javascript中使用prototype来实现继承。prototype就是原型，“原型"很好理解，假如类型A的原型是B，那么B的属性就由A完全继承过来。

Javascript中的prototype也是一个对象。prototype这个对象的特殊意义在于：prototype的属性，将直接被其他对象继承，只要其他对象的prototype属性是它。

先从函数说起：

 

var People = function(name)
{
	this.name = name
}

 

 

 上面的函数People只是普通的javascript函数而已。但是，javascript函数如果和运算符new结合，它就变成了构造函数了；并且，javascript为了实现继承，每个函数都包含一个Prototype属性，这个属性的值默认就是一个空对象，也就是说，People.prototype = {} 。

 执行下面的语句，定义People类型的对象：

 

var p = new People("Lucy");

 

 除了上面介绍的new 创建对象过程外，Javascript还执行了如下操作：将对象p的原型，设置成People这个构造函数的原型，也就是上面介绍的空对象，相当于：p.prototype = Person.prototype，这就是javascript中每个函数都需要有一个prototype属性的原因：因为函数可能和new一起使用变成构造函数，构造函数创建的对象都必须有一个prototype属性，用于实现javascript中的继承。因此，每一个由People构造函数创建的对象，其原型都是上面说的空对象。

 上面已经介绍过了，原型的作用就是，让其他对象直接继承它的属性。这里的“继承”，原理就是prototype链：程序读取对象p的属性name时，如果p对象本身不包含该属性，那么将读取p的原型（p.prototype）的name属性，如果p.prototype不包含name属性，那么继续尝试p.prototype的原型（p.prototype.prototype），直到原型为null为止。类似于下面代码展示的逻辑：

 

function read( identifier, object )
	{
		for( var element in object )
		{
			if( element == identifier )
			{
				return object.element;
			}
		}
		if( object.constructor.prototype != null )
		{
			return read( identifier, object.constructor.prototype )
		}
		return undefined;
	}

 

但是，设置对象p的属性name时（p.name = someValue），如果javascript发现对象p不包含name属性，将直接为p对象创建name属性然后赋值，和prototype没有关系。这点，将在下面的多态中讲到。

实现继承，就用prototype:

                        Student.prototype = new People(null) 
			//上面的语句相当于java语言中的Student extend People 
			function Student(name,studentNum)
			{
				Student.prototype.constructor.call(this,name)
				//相当于java语言中的super(name)
				this.studentNum=studentNum
			}
			
			var s = new Student("Lily","1234")
			equal(s.name,"Lily") //name属性是继承prototype对象的
			equal(s.studentNum,"1234")

 

用上面的方法实现继承，还有很多不完美的地方。网上有很多Javascript中实现继承的方法，但基本上都是以prototype为基础的。

4.实现多态

   因为Javascript是脚本语言，对象没有类型的限制，因此原生支持多态：

 

test("Javascript polymorphism ",function(){
			function Person()
			{
				this.say = function()
				{
					return "I'm a person."
				}
			}
			function Student()
			{
				this.say = function(){
					return "I'm a student."
				}
			}
			
			function Worker()
			{
				this.say = function(){
					return "I'm a worker."
				}
			}
			var clowd =new Array( new Student(),new Worker(),new Person())
			var words = ""
			for(var i in clowd )
			{
				words += clowd[i].say()
//不管对象是什么类型，直接调用方法；javascript直接调用对象相应的方法，不会搞错。
			}
			equal(words,"I'm a student.I'm a worker.I'm a person.")
			
		})

 

    javascript的多态和继承结合起来讲，将说明javascript语言的另外一个特性：

 

var Person = function()
			{
			}
			Person.prototype.say = function(){
				return "person"
			}
			var bob = new Person()
			equal(bob.say(),"person")
			
			bob.say = function(){
				return "bob"
			}
			equal(bob.say(),"bob")
			
			equal(Person.prototype.say(),"person")
			
			var jack = new Person()
			equal(jack.say(),"person")

 

    当为bob设置属性say时，就像上文所说的那样，由于bob对象本身并不包含say属性（它的say属性是从它的原型那里继承过来的，别忘了bob.prototype == Person.prototype），因此javascript将为bob对象创建say属性，并将新的函数赋给bob.say。但是，原型里的say属性并没有变，所有Person构造函数创建的对象，将继承那个原始的say属性。这样就实现了多态了，其他语言如java中的多态，都是靠子类重写父类的方法实现的，而javascript中实现这一点很简单。

  实际上，java，C++等语言中，对象的行为（即方法）是由类定义的，而对象的状态是有每个对象自己保存的，也就是说，对象本身不会包含方法的代码，相同类的对象执行的方法都是同一个。但是javascript不一样，方法也是对象的一个属性，方法的内容由对象本身携带（如果是继承过来的，就由原型对象携带）。

  在Extjs框架中，类型系统将变得更加OOP、更好理解，这一点，对于Extjs的成功帮助很大。