JavaScript继承方式(3)

JavaScript 六种继承方式

2017/06/20 · JavaScript
· 继承

原文出处: Xuthus
Blog   

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。

3,继承工具函数三

这篇开始写几个工具函数实现类的扩展。每个工具函数都是针对特定的写类方式(习惯)。这篇按照构造函数方式写类:属性(字段)和方法都挂在this上。以下分别提供了个类,分别作为父类和子类。

前段时间温故了下JS OO之写类方式,从这篇开始我们看看JS OO之继承方式。

JavaScript继承

原型链

首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细

原型链继承基本思想就是让一个原型对象指向另一个类型的实例

function SuperType() { this.property = true }
SuperType.prototype.getSuperValue = function () { return this.property }
function SubType() { this.subproperty = false } SubType.prototype = new
SuperType() SubType.prototype.getSubValue = function () { return
this.subproperty } var instance = new SubType()
console.log(instance.getSuperValue()) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function () {
  return this.subproperty
}
var instance = new SubType()
console.log(instance.getSuperValue()) // true

代码定义了两个类型SuperType和SubType,每个类型分别有一个属性和一个方法,SubType继承了SuperType,而继承是通过创建SuperType的实例,并将该实例赋给SubType.prototype实现的。

实现的本质是重写原型对象,代之以一个新类型的实例,那么存在SuperType的实例中的所有属性和方法,现在也存在于SubType.prototype中了。

我们知道,在创建一个实例的时候,实例对象中会有一个内部指针指向创建它的原型,进行关联起来,在这里代码SubType.prototype = new SuperType(),也会在SubType.prototype创建一个内部指针,将SubType.prototype与SuperType关联起来。

所以instance指向SubType的原型,SubType的原型又指向SuperType的原型,继而在instance在调用getSuperValue()方法的时候,会顺着这条链一直往上找。

添加方法

在给SubType原型添加方法的时候,如果,父类上也有同样的名字,SubType将会覆盖这个方法,达到重新的目的。
但是这个方法依然存在于父类中。

记住不能以字面量的形式添加,因为,上面说过通过实例继承本质上就是重写,再使用字面量形式,又是一次重写了,但这次重写没有跟父类有任何关联,所以就会导致原型链截断。

function SuperType() { this.property = true }
SuperType.prototype.getSuperValue = function () { return this.property }
function SubType() { this.subproperty = false } SubType.prototype = new
SuperType() SubType.prototype = { getSubValue:function () { return
this.subproperty } } var instance = new SubType()
console.log(instance.getSuperValue()) // error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function () {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType()
SubType.prototype = {
  getSubValue:function () {
   return this.subproperty
  }
}
var instance = new SubType()
console.log(instance.getSuperValue())  // error

问题

单纯的使用原型链继承,主要问题来自包含引用类型值的原型。

function SuperType() { this.colors = [‘red’, ‘blue’, ‘green’] }
function SubType() { } SubType.prototype = new SuperType() var instance1
= new SubType() var instance2 = new SubType()
instance1.colors.push(‘black’) console.log(instance1.colors) // [“red”,
“blue”, “green”, “black”] console.log(instance2.colors) // [“red”,
“blue”, “green”, “black”]

1
2
3
4
5
6
7
8
9
10
11
function SuperType() {
  this.colors = [‘red’, ‘blue’, ‘green’]
}
function SubType() {
}
SubType.prototype = new SuperType()
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push(‘black’)
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green", "black"]

在SuperType构造函数定义了一个colors属性,当SubType通过原型链继承后,这个属性就会出现SubType.prototype中,就跟专门创建了SubType.prototype.colors一样,所以会导致SubType的所有实例都会共享这个属性,所以instance1修改colors这个引用类型值,也会反映到instance2中。

view sourceprint?1 /** 

//  父类Person
function Person(nationality) {
    this.nationality = nationality;
    this.setNationality = function(n) {this.nationality=n;};
    this.getNationality = function() {return this.nationality;};
}

// 类Man
function Man(name) {
    this.name = name;
    this.setName = function(n){this.name=n;};
    this.getName = function(){return this.name;};
}

面向对象的语言多数都支持继承,继承最重要的优点就是代码复用,从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法,就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JS库继承方式也各不相同。从最简单的复用开始。

借用构造函数

此方法为了解决原型中包含引用类型值所带来的问题。

这种方法的思想就是在子类构造函数的内部调用父类构造函数,可以借助apply()和call()方法来改变对象的执行上下文

function SuperType() { this.colors = [‘red’, ‘blue’, ‘green’] }
function SubType() { // 继承SuperType SuperType.call(this) } var
instance1 = new SubType() var instance2 = new SubType()
instance1.colors.push(‘black’) console.log(instance1.colors) // [“red”,
“blue”, “green”, “black”] console.log(instance2.colors) // [“red”,
“blue”, “green”]

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType() {
  this.colors = [‘red’, ‘blue’, ‘green’]
}
function SubType() {
  // 继承SuperType
  SuperType.call(this)
}
var instance1 = new SubType()
var instance2 = new SubType()
instance1.colors.push(‘black’)
console.log(instance1.colors)  // ["red", "blue", "green", "black"]
console.log(instance2.colors) // ["red", "blue", "green"]

在新建SubType实例是调用了SuperType构造函数,这样以来,就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码。

结果,SubType的每个实例就会具有自己的colors属性的副本了。

传递参数

借助构造函数还有一个优势就是可以传递参数

function SuperType(name) { this.name = name } function SubType() { //
继承SuperType SuperType.call(this, ‘Jiang’) this.job = ‘student’ } var
instance = new SubType() console.log(instance.name) // Jiang
console.log(instance.job) // student

1
2
3
4
5
6
7
8
9
10
11
12
function SuperType(name) {
  this.name = name
}
function SubType() {
  // 继承SuperType
  SuperType.call(this, ‘Jiang’)
 
  this.job = ‘student’
}
var instance = new SubType()
console.log(instance.name)  // Jiang
console.log(instance.job)   // student

问题

如果仅仅借助构造函数,方法都在构造函数中定义,因此函数无法达到复用

2  * @param {Function} subCls 

 

 

组合继承(原型链+构造函数)

组合继承是将原型链继承和构造函数结合起来,从而发挥二者之长的一种模式。

思路就是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

function SuperType(name) { this.name = name this.colors = [‘red’,
‘blue’, ‘green’] } SuperType.prototype.sayName = function () {
console.log(this.name) } function SubType(name, job) { // 继承属性
SuperType.call(this, name) this.job = job } // 继承方法
SubType.prototype = new SuperType() SubType.prototype.constructor =
SuperType SubType.prototype.sayJob = function() { console.log(this.job)
} var instance1 = new SubType(‘Jiang’, ‘student’)
instance1.colors.push(‘black’) console.log(instance1.colors) //[“red”,
“blue”, “green”, “black”] instance1.sayName() // ‘Jiang’
instance1.sayJob() // ‘student’ var instance2 = new SubType(‘J’,
‘doctor’) console.log(instance2.colors) // //[“red”, “blue”, “green”]
instance2.sayName() // ‘J’ instance2.sayJob() // ‘doctor’

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
function SuperType(name) {
  this.name = name
  this.colors = [‘red’, ‘blue’, ‘green’]
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承方法
SubType.prototype = new SuperType()
SubType.prototype.constructor = SuperType
SubType.prototype.sayJob = function() {
  console.log(this.job)
}
var instance1 = new SubType(‘Jiang’, ‘student’)
instance1.colors.push(‘black’)
console.log(instance1.colors) //["red", "blue", "green", "black"]
instance1.sayName() // ‘Jiang’
instance1.sayJob()  // ‘student’
var instance2 = new SubType(‘J’, ‘doctor’)
console.log(instance2.colors) // //["red", "blue", "green"]
instance2.sayName()  // ‘J’
instance2.sayJob()  // ‘doctor’

这种模式避免了原型链和构造函数继承的缺陷,融合了他们的优点,是最常用的一种继承模式。

3  * @param {Function} superCls 

1,继承工具函数一

1、构造函数方式写类,通过方法调用复制父类属性/字段到子类
实现继承

原型式继承

借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

function object(o) { function F() {} F.prototype = o return new F() }

1
2
3
4
5
function object(o) {
  function F() {}
  F.prototype = o
  return new F()
}

在object函数内部,先创建一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。

本质上来说,object对传入其中的对象执行了一次浅复制。

var person = { name: ‘Jiang’, friends: [‘Shelby’, ‘Court’] } var
anotherPerson = object(person) console.log(anotherPerson.friends) //
[‘Shelby’, ‘Court’]

1
2
3
4
5
6
var person = {
  name: ‘Jiang’,
  friends: [‘Shelby’, ‘Court’]
}
var anotherPerson = object(person)
console.log(anotherPerson.friends)  // [‘Shelby’, ‘Court’]

这种模式要去你必须有一个对象作为另一个对象的基础。

在这个例子中,person作为另一个对象的基础,把person传入object中,该函数就会返回一个新的对象。

这个新对象将person作为原型,所以它的原型中就包含一个基本类型和一个引用类型。

所以意味着如果还有另外一个对象关联了person,anotherPerson修改数组friends的时候,也会体现在这个对象中。

Object.create()方法

ES5通过Object.create()方法规范了原型式继承,可以接受两个参数,一个是用作新对象原型的对象和一个可选的为新对象定义额外属性的对象,行为相同,基本用法和上面的object一样,除了object不能接受第二个参数以外。

var person = { name: ‘Jiang’, friends: [‘Shelby’, ‘Court’] } var
anotherPerson = Object.create(person) console.log(anotherPerson.friends)
// [‘Shelby’, ‘Court’]

1
2
3
4
5
6
var person = {
  name: ‘Jiang’,
  friends: [‘Shelby’, ‘Court’]
}
var anotherPerson = Object.create(person)
console.log(anotherPerson.friends)  // [‘Shelby’, ‘Court’]

4  */

/**
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 * @param {Object} param 父类构造参数
 */
function extend(subCls, superCls, param) {
    superCls.call(subCls.prototype, param);
}

这里父类,子类都采用构造函数方式写,不用原型。子类调用父类函数来复制父类的属性。

寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数。

function createAnother(o) { var clone = Object.create(o) //
创建一个新对象 clone.sayHi = function() { // 添加方法 console.log(‘hi’)
} return clone // 返回这个对象 } var person = { name: ‘Jiang’ } var
anotherPeson = createAnother(person) anotherPeson.sayHi()

1
2
3
4
5
6
7
8
9
10
11
12
function createAnother(o) {
  var clone = Object.create(o) // 创建一个新对象
  clone.sayHi = function() { // 添加方法
    console.log(‘hi’)
  }
  return clone  // 返回这个对象
}
var person = {
  name: ‘Jiang’
}
var anotherPeson = createAnother(person)
anotherPeson.sayHi()

基于person返回了一个新对象anotherPeson,新对象不仅拥有了person的属性和方法,还有自己的sayHi方法。

在主要考虑对象而不是自定义类型和构造函数的情况下,这是一个有用的模式。

5 function extend(subCls,superCls) { 

使用如下

/**
 * 父类Polygon:多边形
 * @param {Object} sides
 */
function Polygon(sides) {
    this.sides = sides;
    this.setSides = function(s) {this.sides=s;}
}

/**
 * 子类Triangle:三角形
 */
function Triangle() {
    this.tempfun = Polygon;//父类引用赋值给子类的一个属性tempfun
    this.tempfun(3);//调用
    delete this.tempfun;//删除该属性
    this.getArea = function(){};
}

//new个对象 
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有的方法

//缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
console.log(tri instanceof Triangle);//true
console.log(tri instanceof Polygon);//false

寄生组合式继承

在前面说的组合模式(原型链+构造函数)中,继承的时候需要调用两次父类构造函数。

父类

function SuperType(name) { this.name = name this.colors = [‘red’,
‘blue’, ‘green’] }

1
2
3
4
function SuperType(name) {
  this.name = name
  this.colors = [‘red’, ‘blue’, ‘green’]
}

第一次在子类构造函数中

function SubType(name, job) { // 继承属性 SuperType.call(this, name)
this.job = job }

1
2
3
4
5
6
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}

第二次将子类的原型指向父类的实例

// 继承方法 SubType.prototype = new SuperType()

1
2
// 继承方法
SubType.prototype = new SuperType()

当使用var instance = new SubType()的时候,会产生两组name和color属性,一组在SubType实例上,一组在SubType原型上,只不过实例上的屏蔽了原型上的。

使用寄生式组合模式,可以规避这个问题。

这种模式通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。

基本思路:不必为了指定子类型的原型而调用父类的构造函数,我们需要的无非就是父类原型的一个副本。

本质上就是使用寄生式继承来继承父类的原型,在将结果指定给子类型的原型。

function inheritPrototype(subType, superType) { var prototype =
Object.create(superType.prototype) prototype.constructor = subType
subType.prototype = prototype }

1
2
3
4
5
function inheritPrototype(subType, superType) {
  var prototype = Object.create(superType.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}

该函数实现了寄生组合继承的最简单形式。

这个函数接受两个参数,一个子类,一个父类。

第一步创建父类原型的副本,第二步将创建的副本添加constructor属性,第三部将子类的原型指向这个副本。

function SuperType(name) { this.name = name this.colors = [‘red’,
‘blue’, ‘green’] } SuperType.prototype.sayName = function () {
console.log(this.name) } function SubType(name, job) { // 继承属性
SuperType.call(this, name) this.job = job } // 继承
inheritPrototype(SubType, SuperType) var instance = new SubType(‘Jiang’,
‘student’) instance.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType(name) {
  this.name = name
  this.colors = [‘red’, ‘blue’, ‘green’]
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承
inheritPrototype(SubType, SuperType)
var instance = new SubType(‘Jiang’, ‘student’)
instance.sayName()

补充:直接使用Object.create来实现,其实就是将上面封装的函数拆开,这样演示可以更容易理解。

function SuperType(name) { this.name = name this.colors = [‘red’,
‘blue’, ‘green’] } SuperType.prototype.sayName = function () {
console.log(this.name) } function SubType(name, job) { // 继承属性
SuperType.call(this, name) this.job = job } // 继承 SubType.prototype =
Object.create(SuperType.prototype) // 修复constructor
SubType.prototype.constructor = SubType var instance = new
SubType(‘Jiang’, ‘student’) instance.sayName()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function SuperType(name) {
  this.name = name
  this.colors = [‘red’, ‘blue’, ‘green’]
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}
function SubType(name, job) {
  // 继承属性
  SuperType.call(this, name)
 
  this.job = job
}
// 继承
SubType.prototype = Object.create(SuperType.prototype)
// 修复constructor
SubType.prototype.constructor = SubType
var instance = new SubType(‘Jiang’, ‘student’)
instance.sayName()

ES6新增了一个方法,Object.setPrototypeOf,可以直接创建关联,而且不用手动添加constructor属性。

// 继承 Object.setPrototypeOf(SubType.prototype, SuperType.prototype)
console.log(SubType.prototype.constructor === SubType) // true

1
2
3
// 继承
Object.setPrototypeOf(SubType.prototype, SuperType.prototype)
console.log(SubType.prototype.constructor === SubType) // true

1 赞 2 收藏
评论

图片 1

6     subCls.prototype = new superCls();   

extend(Man, Person, 'China');
var m = new Man('jack');
console.log(m.nationality);//China
console.log(m.setNationality('Japan'));
console.log(m.getNationality('Japan'));//Japan

因为
JavaScript中具名函数的多种调用方式,子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。

7 }

输出可以看到Man继承了Person的属性及所有方法。这种继承方式于java的很不一样哦,

function Triangle() {
    Polygon.call(this,3); //call方式调用父类
    this.getArea = function(){};    
}
function Triangle() {
    Polygon.apply(this,[3]); //apply方式调用父类
    this.getArea = function(){};
}
function Triangle() {
    var temp = new Polygon(3); //new方式调用父类
    for(atr in temp) { //全部复制给子类
        this[atr] = temp[atr];
    }   
    this.getArea = function(){};
}

父类,按原型方式写,即属性和方法都挂在原型上。

class Animal {
    int legs;   
    Animal(int l) {
        legs = l;
    }
    int getLegs() {
        return legs;
    }
}
public class Person extends Animal{
    //属性(字段)
    String name;    
    //构造方法(函数)
    Person(int legs, String name) {
        super(legs);//调用父类构造器
        this.name = name;
    }   
    //方法
    String getName() {
        return this.name;
    }
    public static void main(String[] args) {

        Person p = new Person(2,"jack");        
        System.out.println(p.legs);
    }
}

这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承”is
a “的关系是违背的。

view sourceprint?1 /** 

Java中,子类Person在自身构造方法中调用父类构造方法super(legs),创建对象的时候直接将父类构造参数legs:2传进去,不仅仅只传自己的name:jack。上面JavaScript继承是在extend时传父类构造参数(extend函数的第三个参数),而不是在new
Man时将父类构造参数传过去。好,模拟Java来实现下extend,这里巧妙的在子类上暂存了父类引用。

 

2  *  父类Person 

 

2、原型方式写类,原型方式继承

3  */

2,继承工具函数二

core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core
JS没有采用常见的类继承(class
based)系统,而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承,代码复用以构建自己的功能模块。 

4 function Person(){} 

/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls, superCls) { 
    subCls.supr = superCls;
} 
/**
 * 父类Polygon:多边形
 * 
 */
function Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function(s) {this.sides=s;}

/**
 * 子类Triangle:三角形
 */
function Triangle() {}
Triangle.prototype = new Polygon(); //这是原型继承关键的一句
Triangle.prototype.getArea = function(){}

//new个对象
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有方法

//instanceof测试
console.log(tri instanceof Triangle);//true,表明该对象是三角形
console.log(tri instanceof Polygon);//true,表明三角形也是多边形

5 Person.prototype.nationality = China; 

还是以Person为父类,来实现子类Woman

虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides,但sides是0,怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数,即是原型方式的缺点。优点是正确的维护了”is
a”的关系。

6 Person.prototype.getNationality = function() {return
this.nationality;} 

function Woman(nationality, name) {
    Woman.supr.call(this, nationality);//和java有点类似哦,在子类中调用父类构造器
    this.name = name;
    this.setName = function(n){this.name=n;};
    this.getName = function(){return this.name;};
}
extend(Woman, Person);

 

7 Person.prototype.setNationality = function(n) { this.nationality = n;}

最后,创建对象的方式和java也类似,即new的时候同时将父类构造参数(nationality:Japan)传进去。

3、组合构造函数/原型方式写类,采用前面种方式继承

子类继承与父类

var w = new Woman('Japan', 'lily');
console.log(w.nationality);//Japan
w.setNationality('U.S.A');
console.log(w.getNationality());//U.S.A

这种方式父类,子类的属性都挂在构造函数里,方法都挂在原型上。

view sourceprint?1 function Man() {} 

/**
 * 父类Polygon:多边形
 */
function Polygon(sides) {
    this.sides = sides;
}
Polygon.prototype.setSides = function(s) {this.sides=s;}

/**
 * Triangle 三角形
 * @param {Object} base 底
 * @param {Object} height 高
 */
function Triangle(base,height) {
    Polygon.call(this,3);//复制父类属性给自己
    this.base = base;
    this.height = height;
}
Triangle.prototype = new Polygon();//复制父类方法给自己

Triangle.prototype.getArea = function(){ //最后定义自己的方法
    return this.base*this.height/2;
}

//new个对象
var tri = new Triangle(12,4);
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.base);//自有属性
console.log(tri.height);//自有属性
console.log(tri.getArea);//自有方法

//instanceof测试,表明正确的维护了"is a"的关系
console.log(tri instanceof Triangle);//true,表明该对象是三角形
console.log(tri instanceof Polygon);//true,表明三角形也是多边形

2 extend(Man,Person);

 

继承父类的属性和方法后,再添加子类自有属性,方法 

相关:

view sourceprint?1 Man.prototype.name = jack; 

JavaScript继承方式(2) 

2 Man.prototype.getName = function() { return this.name;} 

JavaScript继承方式(3)

3 Man.prototype.setName = function(n) { this.name=n;}

JavaScript继承方式(4)

测试如下,

snandy Class.js

view sourceprint?1 var m = new Man(); 

2 console.log(m); 

3 console.log(m instanceof Person);

可以看到这种写类方式,继承方式完全采用原型机制。

 

4,继承工具函数四

这种方式是目前比较流行的,51ditu网站的开发就是按照这种模式的。

view sourceprint?01 /** 

02  * @param {Function} subCls 子类 

03  * @param {Function} superCls 父类 

04  */

05 function extend(subCls,superCls) {   

06     //暂存子类原型 

07     var sbp = subCls.prototype; 

08     //重写子类原型–原型继承 

09     subCls.prototype = new superCls(); 

10     //重写后一定要将constructor指回subCls 

11     subCls.prototype.constructor = subCls; 

12     //还原子类原型 

13     for(var atr in sbp) { 

14         subCls.prototype[atr] = sbp[atr]; 

15     } 

16     //暂存父类   

17     subCls.supr = superCls; 

18 }

按 构造函数+原型 方式写类,即属性挂在this上,方法挂在prototype上。

view sourceprint?01 /** 

02  *  父类Person 

03  */

04 function Person(nationality){ 

05     this.nationality = nationality; 

06 } 

07 Person.prototype.getNationality = function() {return
this.nationality;} 

08 Person.prototype.setNationality = function(n) { this.nationality =
n;} 

09   

10 /** 

11  *  子类Man 

12  */

13 function Man(nationality,name) { 

14     Man.supr.call(this,nationality); //很重要的一句,调用父类构造器 

15     this.name = name; 

16 } 

17 Man.prototype.getName = function() {return this.name;} 

18 Man.prototype.setName = function(n) {this.name=n;}

注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。

extend调用,创建Man的实例

view sourceprint?1 extend(Man,Person); 

2 var m = new Man(USA,jack); 

3 console.log(m); 

4 m.setName(lily); 

5 console.log(m.name);

view sourceprint?1 /** 2 *
@param {Function} subCls 3 * @param {Function} superCls 4 */ 5
function extend(subCls,superCls) { 6 subCls.prototype = new
supe…

发表评论

电子邮件地址不会被公开。 必填项已用*标注