实现Javascript编写类的方式3(类的继承)

javascript中类的继承也有三种方式.

  1. 对象冒充方式
  2. 原型链继承方式
  3. 混合方式

是不是有点像之前提到过的类的创建的3种方式呢. 下面分别来介绍一下这3种方式

1. 对象冒充方式

"构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 ClassA 构造函数成为 ClassB 的方法,然后调用它。ClassB 就会收到 ClassA 的构造函数中定义的属性和方法。"

 1 function Person(name){
 2     this.name = name;
 3 }
 4 function Student(name){
 5     this.newMethod = Person;
 6     this.newMethod(name);
 7     delete this.newMethod;
 8 
 9     this.sayName = function(){
10         alert(this.name);
11     };
12 }
13 var jimmy = new Student('jimmy');
14 jimmy.sayName();//弹出jimmy

但是看子类继承的代码是不是哪里有很不舒服呢, 比如这三句:

1 this.newMethod = Person;
2 this.newMethod(name);
3 delete this.newMethod;

仅仅一个继承就得写3句话, 而且还是很不爽的3句话, 其实可以用call(), 或者apply(), 这两个方法来替代上面的写法(不清楚call()或者apply()用法的可以自己google一下, 其实就有点像Java的反射机制)

 1 function Person(name){
 2     this.name = name;
 3 }
 4 function Student(name){
 5     //this.newMethod = Person;
 6     //this.newMethod(name);
 7     //delete this.newMethod;
 8     Person.call(this,name);
 9 
10     this.sayName = function(){
11         alert(this.name);
12     };
13 }
14 var jimmy = new Student('jimmy');
15 jimmy.sayName();

第8行, 替代了5,6,7行, 这样看起来简洁并且舒服了很多.

对象冒充方式实现继承, 子类新属性或者方法必须在冒充父类对象之后, 否则会被覆盖掉. 这种方法可以实现多继承, 但是多个父类的同名属性会出现最下面的父类覆盖掉上面父类的情况.

 2. 原型链继承方式

 1 function Person() {
 2     Person.prototype.name = "people";
 3     Person.prototype.sayName = function () {
 4         alert(this.name);
 5     };
 6 }
 7 
 8 function Student(){
 9 }
10 Student.prototype = new Person();
11 
12 var jimmy = new Student();
13 jimmy.sayName();

第十行就是原型继承的方式, 但是原型继承的弊端是不能给构造方法传递参数. 所以第三种继承方式出场了...

3. 混合继承方式

在第一节里, 我们说过定义类最好的方式是通过构造函数定义属性, 通过原型定义方法. 这种方式同样也适用于继承. 用对象冒充继承构造函数的属性, 用原型链继承 prototype 对象的方法.

 1 function Person(name) {
 2     this.name = name;
 3 }
 4 Person.prototype.sayName = function(){
 5     alert('Name: '+this.name);
 6 };
 7 
 8 function Student(id, name){
 9     Person.call(this, name);
10     this.id = id;
11 }
12 Student.prototype = new Person();
13 Student.prototype.sayId = function(){
14     alert('Id: '+this.id);
15 }
16 var people = new Person('people');
17 var jimmy = new Student('001','jimmy');
18 people.sayName();//弹出people
19 jimmy.sayId();//弹出001
20 jimmy.sayName();//弹出jimmy

 

 

posted on 2012-05-14 12:51  Hao Jia  阅读(184)  评论(0)    收藏  举报