不知为何上面链接的文章里面的例子报错，所以找到另一篇文章供大家参考学习。再推荐一篇英文文章《JavaScript Object-Oriented Programming Part 2》，关于继承部分如下，查看全文请到：http://www.sitepoint.com/article/oriented-programming-2Prototype Revisited Let's go back and revisit the Function object's prototype property. In Java, a popular, well-known feature is to extend a class; however, in JavaScript, most people are unaware that you can do this - but you can! For instance, let's say we have a Car object. A Corvette and an Ares are two different types of cars, but they are both still cars. In this way, they have similar properties/methods and extend upon the Car object.Let's create the three objects we're going to use - Car, Corvette, and Ares. Then, we'll discuss the ways for the latter two to inherit the properties/methods of the Car object.function Car(color){ this.wheels = 4; this.doors = 4; this.color = color; this.speed = 0; this.accelerate = function(){ this.speed+=20; } this.brake = function(){ this.speed-=20; } } function Corvette(color){ // all of Car properties/methods this.doors = 2; this.color = color; this.accelerate = function(){ this.speed+=40; } } function Ares(color){ // all of Car properties/methods this.doors = 2; this.color = color; this.accelerate = function(){ this.speed+=10; } this.brake = function(){ this.speed-=10; } } var myCar = new Car("white"); var myCorvette = new Corvette("black"); var myAres = new Ares("red");Because a Corvette is an especially fast car, we've upped its acceleration speed from a normal car, and because a Dodge Ares is a rickety, old car, we've made it so the brakes don't work as well, and it doesn't accelerate as fast (no offense to Dodge Ares owners). Now, we could use the Corvette() and Ares() prototype property and add to each the properties/methods from the Car object that we want them to inherit. However, this could be a confusing and tedious task, especially if there are many properties/methods. To overcome this, we need to examine the prototype property again.The prototype property is an object with no initial properties/methods. When we add properties/methods to this object, we automatically add them to all instances of the object. However, instead of adding properties/methods to the prototype object, we could replace the prototype object with an object that already has the properties/methods we want. For example, instead of using:Corvette.prototype.wheels = 4; Corvette.prototype.speed = 0; Corvette.prototype.brake = function(){ this.speed-=20; }we can more easily use:Corvette.prototype = new Car();We can do the same for the Ares object:Ares.prototype = new Car();Both the Corvette and Ares objects now have all the Car's properties/methods, which can then be overridden by the properties/methods defined in each object constructor. For example, in both the Corvette and Ares objects, the door property is overridden to 2. Altogether, our now code looks like:function Car(color){ this.wheels = 4; this.doors = 4; this.color = color; this.speed = 0; this.accelerate = function(){ this.speed+=20; } this.brake = function(){ this.speed-=20; } } function Corvette(color){ this.doors = 2; this.color = color; this.accelerate = function(){ this.speed+=40; } } Corvette.prototype = new Car(); function Ares(color){ this.doors = 2; this.color = color; this.accelerate = function(){ this.speed+=10; } this.brake = function(){ this.speed-=10; } } Ares.prototype = new Car(); var myCar = new Car("white"); var myCorvette = new Corvette("black"); var myAres = new Ares("red");Now, from the Corvette and Ares objects, we can retrieve the appropriate properties and run the accelerate() and brake() methods that correspond to those objects. In this way, in JavaScript, object inheritance is not hard to accomplish.Wrap-up Through this tutorial, I hope you've learned a general understanding of how JavaScript operates. In addition, I hope you've gained a basic knowledge of OOP and an understanding of the power of JavaScript as an object-based language. I suggest that you post any questions you might have in the SitePoint Forums; however, if you can't seem to find an answer to your JavaScript object question, I'd be more than happy to give it a shot if you email me at [email protected] There have been many people who have helped me write this tutorial. In particular, though, I'd like to thank Alex Vincent, Jason Davis, and Jared for helping me to understand the finer points of JavaScript's object abilities.
Let's go back and revisit the Function object's prototype property. In Java, a popular, well-known feature is to extend a class; however, in JavaScript, most people are unaware that you can do this - but you can! For instance, let's say we have a Car object. A Corvette and an Ares are two different types of cars, but they are both still cars. In this way, they have similar properties/methods and extend upon the Car object.Let's create the three objects we're going to use - Car, Corvette, and Ares. Then, we'll discuss the ways for the latter two to inherit the properties/methods of the Car object.function Car(color){
this.wheels = 4;
this.doors = 4;
this.color = color;
this.speed = 0;
this.accelerate = function(){
this.speed+=20;
}
this.brake = function(){
this.speed-=20;
}
}
function Corvette(color){
// all of Car properties/methods
this.doors = 2;
this.color = color;
this.accelerate = function(){
this.speed+=40;
}
}
function Ares(color){
// all of Car properties/methods
this.doors = 2;
this.color = color;
this.accelerate = function(){
this.speed+=10;
}
this.brake = function(){
this.speed-=10;
}
}
var myCar = new Car("white");
var myCorvette = new Corvette("black");
var myAres = new Ares("red");Because a Corvette is an especially fast car, we've upped its acceleration speed from a normal car, and because a Dodge Ares is a rickety, old car, we've made it so the brakes don't work as well, and it doesn't accelerate as fast (no offense to Dodge Ares owners). Now, we could use the Corvette() and Ares() prototype property and add to each the properties/methods from the Car object that we want them to inherit. However, this could be a confusing and tedious task, especially if there are many properties/methods. To overcome this, we need to examine the prototype property again.The prototype property is an object with no initial properties/methods. When we add properties/methods to this object, we automatically add them to all instances of the object. However, instead of adding properties/methods to the prototype object, we could replace the prototype object with an object that already has the properties/methods we want. For example, instead of using:Corvette.prototype.wheels = 4;
Corvette.prototype.speed = 0;
Corvette.prototype.brake = function(){
this.speed-=20;
}we can more easily use:Corvette.prototype = new Car();We can do the same for the Ares object:Ares.prototype = new Car();Both the Corvette and Ares objects now have all the Car's properties/methods, which can then be overridden by the properties/methods defined in each object constructor. For example, in both the Corvette and Ares objects, the door property is overridden to 2. Altogether, our now code looks like:function Car(color){
this.wheels = 4;
this.doors = 4;
this.color = color;
this.speed = 0;
this.accelerate = function(){
this.speed+=20;
}
this.brake = function(){
this.speed-=20;
}
}
function Corvette(color){
this.doors = 2;
this.color = color;
this.accelerate = function(){
this.speed+=40;
}
}
Corvette.prototype = new Car();
function Ares(color){
this.doors = 2;
this.color = color;
this.accelerate = function(){
this.speed+=10;
}
this.brake = function(){
this.speed-=10;
}
}
Ares.prototype = new Car();
var myCar = new Car("white");
var myCorvette = new Corvette("black");
var myAres = new Ares("red");Now, from the Corvette and Ares objects, we can retrieve the appropriate properties and run the accelerate() and brake() methods that correspond to those objects. In this way, in JavaScript, object inheritance is not hard to accomplish.Wrap-up
Through this tutorial, I hope you've learned a general understanding of how JavaScript operates. In addition, I hope you've gained a basic knowledge of OOP and an understanding of the power of JavaScript as an object-based language. I suggest that you post any questions you might have in the SitePoint Forums; however, if you can't seem to find an answer to your JavaScript object question, I'd be more than happy to give it a shot if you email me at [email protected] There have been many people who have helped me write this tutorial. In particular, though, I'd like to thank Alex Vincent, Jason Davis, and Jared for helping me to understand the finer points of JavaScript's object abilities.