JavaScript 面向对象编程（三）如何写类和子类

2022-11-26 22:25:45

在JavaScript面向对象编程（一）原型与继承和JavaScript面向对象编程（二）构造函数和类中，我们分别讨论了JavaScript中面向对象的原型和类的概念。基于这两点理论，本篇文章用一个简单的例子来阐述如何在JavaScript中写类与子类。

几个面向对象的概念

实例属性：是每个对象所拥有的属性。比如对于一个Person类的对象而言，name、age等属性是每一个person所拥有的。而且，不同person的age和name可能不同。所以，在JavaScript中我们必须把实例属性加在对象上面。

实例方法：是类的实例所共享的方法。这些方法通过实例进行调用。比如所有的Person类的对象共享一个getName()方法，通过person对象调用这个方法获取对象的name属性的值。这个方法是实例对象共享的，所以把实例方法加在类的prototype上。

类属性与方法：这与传统面向对象语言中静态属性和方法类似。类属性与方法是类所拥有的，而非对象所拥有。在JavaScript所实现的类属性和类方法是通过“构造函数对象”获取。

基类方法调用：在子类的构造函数或者是子类所重载的方法中，调用基类相应方法。

现在用Person类和其子类Student类来阐述上面的概念。

定义一个类

 var Person = function(name,age){

     //instance property, which owns by the instance.

     this.name = name;

     this.age = age;

 };

 //Class methods and properties, owned by Class not by the instances. They are "static"

 Person.YOUNG = 18;

 //instance methods, which are shared by all the instances

 Person.prototype.sayHello = function(){

     console.log("Hello!");

     console.log("I am " + this.name);

 };

 Person.prototype.isAdult  = function() {

     if(this.age >= Person.YOUNG){

         return true;

     }

     else{

         return false;

     }

 };

 Person.prototype.grow = function(){

     this.age = this.age + 1;

 };

在Person类中，name和age是实例属性，它们是每个实例对象所拥有的。所以将name和age放在构造函数中。前一篇文章已经讨论过，new关键字生成一个对象，并且使用new后面的函数来初始化这个对象。所以name和id这两个实例属性已经通过this.name = name 和this.age = age这两行代码加在了实例对象上面了。

Person.YOUNG是类属性，它是由Person类所拥有的。isAdult中通过与它比较来判断一个Person是否为成年人。如果YOUNG的值改变了，那么所有isAdult的行为也会发生变化。

sayHello，isAdult和grow是实例方法。通过对象进行调用,实例方法中经常会带有this关键字，用来指代调用方法的对象。前一篇文章已经讨论过，通过new关键字的对象以构造函数的prototype属性为原型。所以根据原型链的概念，所有对Person类的对象都能调用这些方法。对象可以通过调用grow方法来增长其age的值，grow方法的this指代的是调用它的对象。

那么就能使用这个类了：

 var p = new Person("Jack", 17);

 p.sayHello();//Hello!I am Jack

 p.isAdult();//false

 p.grow();

 p.isAdult();//true

定义子类

这里介绍定义子类的基本方法。定义子类的关键是，将基类（父类）的prototype属性作为子类的prototype属性的原型。这样就能构成一个原型链：实例->子类.prototype->父类.prototype。那么根据原型链的概念，就能通过实例对象访问父类定义的方法。同样，子类也可以覆盖父类中的方法。

在传统面向对象编程语言中，子类（基类）在构造函数中会调用父类的构造函数。子类在覆盖父类方法中也能调用父类的方法。因为在定义子类时，我们往往希望对父类的行为进行修改或补充，而不一定是完全替换它们。

 //define a sub class

 var Student = function(major,name,age){

     this.major = major;

     Person.prototype.constructor.call(this,name,age);

 };

 Student.prototype = Object.create(Person.prototype);

 Student.prototype.constructor = Student;

 Student.baseClass = Person;

 //override the sayHello method

 Student.prototype.sayHello = function(){

     //call the method in the base class

     Student.baseClass.prototype.sayHello.call(this);

     console.log("I am a " + this.major + " student!");

 };

 //add a method

 Student.prototype.doHomework = function(){

     console.log("I am doing " + this.major + " homework!");

 };

Student类是Person类的子类。它的每个实例对象除了拥有name和age之外还拥有一个major属性，用来表示每个student的专业。因为Person类的构造函数已经对name和age进行初始化了，所以在Student类的构造函数中可以调用其父类的构造函数（第4行）。

为了让Student的实例也能访问Person类的实例方法，就要将Person.prototype作为Student.prototype的原型。这样就构成了原型链：实例->Student.prototype->Person.prototype。代码的第6行实现了这一点。需要补充的是：Student.prototype = new Person() 同样可以将Person.prototype作为Student.prototype的原型，但是此时Student.prototype却拥有了两个实例属性name和age，而这两个实例属性应该是实例所拥有而非类的prototype拥有。所以在这里使用Object.create(Person.prototype)比较好。（具体使用哪种方法要根据实现类的步骤决定）

第7行的作用是将Student类的构造函数纠正为Student.

第8行的作用是将Student类的基类（父类）赋值为Person，方便之后重定义父类方法时调用。

Student类重定义了父类中的sayHello方法，不仅说出了自己的name而且说出了自己的major是什么。因为sayHello中只是补充了说出major的行为，所以调用了父类的方法。

最后Student类增加了一个doHomework的方法（因为学生都得做作业）。

这样就能使用这个类了：

 var s = new Student("Computer Science","Mike",17);

 s.sayHello();//Hello!I am Mike

             //I am a Computer Science student!

 s.isAdult();//false

 s.grow();

 s.isAdult(); //true

 s.doHomework();//I am doing Computer Science homework!

面向对象编程的作用是：封装，继承和多态。我会在相关日志中不断从这三个角度更新日志。

参考文章：

1）《JavaScript The Definitive Guide》第九章

2）CoolShell：http://coolshell.cn/articles/6441.html

3）MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

码农公寓

相关文章