JavaScript承继方式（2） _JavaScript

JavaScript继承方式（2）

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

01

//? 父类Person

02

function
 Person(nationality) {

03

????
this
.nationality = nationality;

04

????
this
.setNationality = 
function
(n) {
this
.nationality=n;};

05

????
this
.getNationality = 
function
() {
return
 this
.nationality;};

06

}

07

08

// 类Man

09

function
 Man(name) {

10

????
this
.name = name;

11

????
this
.setName = 
function
(n){
this
.name=n;};

12

????
this
.getName = 
function
(){
return
 this
.name;};

13

}

1，继承工具函数一

1

/**

2

?
* @param {Function} subCls 子类

3

?
* @param {Function} superCls 父类

4

?
* @param {Object} param 父类构造参数

5

?
*/

6

function
 extend(subCls,superCls,param) {

7

????
superCls.call(subCls.prototype,param);

8

}

使用如下

1

extend(Man,Person,
'China'
);

2

var
 m = 
new
 Man(
'jack'
);

3

console.log(m.nationality);
//China

4

console.log(m.setNationality(
'Japan'
));

5

console.log(m.getNationality(
'Japan'
));
//Japan

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

01

class
 Animal {

02

????
int
 legs;?? 

03

????
Animal(
int
 l) {

04

????????
legs = l;

05

????
}

06

????
int
 getLegs() {

07

????????
return
 legs;

08

????
}

09

}

10

public
 class
 Person 
extends
 Animal{

11

????
//属性（字段）

12

????
String name;??? 

13

????
//构造方法（函数）

14

????
Person(
int
 legs, String name) {

15

????????
super
(legs);
//调用父类构造器

16

????????
this
.name = name;

17

????
}?? 

18

????
//方法

19

????
String getName() {

20

????????
return
 this
.name;

21

????
}

22

????
public
 static
 void
 main(String[] args) {

23

????????
?

24

????????
Person p = 
new
 Person(
2
,
"jack"
);??????? 

25

????????
System.out.println(p.legs);

26

????
}

27

}

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

2，继承工具函数二

1

/**

2

?
* @param {Function} subCls

3

?
* @param {Function} superCls

4

?
*/

5

function extend(subCls,superCls) {? 

6

????
subCls.supr = superCls;

7

}

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

1

function
 Woman(nationality,name) {

2

????
Woman.supr.call(
this
,nationality);
//和java有点类似哦，在子类中调用父类构造器

3

????
this
.name = name;

4

????
this
.setName = 
function
(n){
this
.name=n;};

5

????
this
.getName = 
function
(){
return
 this
.name;};

6

}<br>extend(Woman,Person);<br>

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

`1`	`var` `w =` `new` `Woman(` `'Japan'` `,` `'lily'` `);`

`2`	`console.log(w.nationality);` `//Japan`

`3`	`w.setNationality(` `'U.S.A'` `);`

`4`	`console.log(w.getNationality());` `//U.S.A`