本文介绍了JavaScript中实现继承的五种方法，包括对象冒充、使用call和apply方法、原型链方式以及结合多种技术的混合方式，并通过示例代码详细解释了每种方式的实现原理。
1）继承第1种方式：对象冒充
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function Parent(username){
this.username = username;
this.sayHello = function(){
alert(this.username);
}
}
function Child(username,password){
//下面三行是关键代码
this.method = Parent;
this.method(username);
delete this.method;
this.password = password;
this.sayWorld = function(){
alert(this.password);
}
}
var parent1 = new Parent(“jack”);
var child1 = new Child(“kyle”,”123″);
parent1.sayHello();
child1.sayHello();
child1.sayWorld();
|
2）继承第2种方式：call方法
call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，call方法的第一个参数会被传递给函数中的this，从第二个参数开始，逐一赋值给函数中的参数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function Parent(username){
this.username = username;
this.sayHello = function(){
alert(this.username);
}
}
function Child(username,password){
Parent.call(this,username);
this.password = password;
this.sayWorld = function(){
alert(this.password);
}
}
var p1 = new Parent(“jack”);
var c1 = new Child(“kyle”,”123″);
p1.sayHello();
c1.sayHello();
c1.sayWorld();
|
3）继承第3种方式：apply方法
apply方法与call方法的不同之处在于，apply方法第二个参数传递的是一个数组，而不像call方法那样以离散的形式传递参数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function Parent(username){
this.username = username;
this.sayHello = function(){
alert(this.username);
}
}
function Child(username,password){
<strong>Parent.apply(this,new Array(username));</strong>
this.password = password;
this.sayWorld = function(){
alert(this.password);
}
}
var p1 = new Parent(“jack”);
var c1 = new Child(“kyle”,”123″);
p1.sayHello();
c1.sayHello();
c1.sayWorld();
|
4）继承第4种方式：原型链方式
该方式的缺点是不能够传递参数。初始化必须要等对象创建之后
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function Parent(){
}
Parent.prototype.hello = “hello”;
Parent.prototype.sayHello = function(){
alert(this.hello);
}
function Child(){
}
Child.prototype = new Parent();
Child.prototype.world = “world”;
Child.prototype.sayWorld = function(){
alert(this.world);
}
var c1 = new Child();
c1.sayHello();
c1.sayWorld();
|
5）继承第5种方式：混合方式（推荐）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function Parent(hello){
this.hello = hello;
}
Parent.prototype.sayHello = function(){
alert(this.hello);
}
function Child(hello,world){
Parent.call(this,hello);
this.world = world;
}
Child.prototype = new Parent();
Child.prototype.sayWorld = function(){
alert(this.world);
}
var c1 = new Child(“HELLO”,”WORLD”);
c1.sayHello();
c1.sayWorld();
|
转自：http://www.html5war.com/?p=358#127501-tsina-1-65799-37403ee4d52bdcc85c83ed483a1ad958
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
