我用OOP语言编程已有10多年了,但我现在正在学习JavaScript,这是我第一次遇到基于原型的继承。通过学习优秀的代码,我倾向于学得最快。什么是正确使用原型继承的JavaScript应用程序(或库)的精心编写的示例?您能否(简要地)描述如何/在何处使用原型继承,所以我知道从哪里开始阅读?
答案 0 :(得分:75)
如前所述,道格拉斯·克罗克福德(Douglas Crockford)的电影对其原因进行了很好的解释,并涵盖了如何进行。但是把它放在几行JavaScript中:
// Declaring our Animal object
var Animal = function () {
this.name = 'unknown';
this.getName = function () {
return this.name;
}
return this;
};
// Declaring our Dog object
var Dog = function () {
// A private variable here
var private = 42;
// overriding the name
this.name = "Bello";
// Implementing ".bark()"
this.bark = function () {
return 'MEOW';
}
return this;
};
// Dog extends animal
Dog.prototype = new Animal();
// -- Done declaring --
// Creating an instance of Dog.
var dog = new Dog();
// Proving our case
console.log(
"Is dog an instance of Dog? ", dog instanceof Dog, "\n",
"Is dog an instance of Animal? ", dog instanceof Animal, "\n",
dog.bark() +"\n", // Should be: "MEOW"
dog.getName() +"\n", // Should be: "Bello"
dog.private +"\n" // Should be: 'undefined'
);
然而,这种方法的问题在于,每次创建对象时都会重新创建对象。另一种方法是在原型堆栈上声明对象,如下所示:
// Defining test one, prototypal
var testOne = function () {};
testOne.prototype = (function () {
var me = {}, privateVariable = 42;
me.someMethod = function () {
return privateVariable;
};
me.publicVariable = "foo bar";
me.anotherMethod = function () {
return this.publicVariable;
};
return me;
}());
// Defining test two, function
var testTwo = function() {
var me = {}, privateVariable = 42;
me.someMethod = function () {
return privateVariable;
};
me.publicVariable = "foo bar";
me.anotherMethod = function () {
return this.publicVariable;
};
return me;
};
// Proving that both techniques are functionally identical
var resultTestOne = new testOne(),
resultTestTwo = new testTwo();
console.log(
resultTestOne.someMethod(), // Should print 42
resultTestOne.publicVariable // Should print "foo bar"
);
console.log(
resultTestTwo.someMethod(), // Should print 42
resultTestTwo.publicVariable // Should print "foo bar"
);
// Performance benchmark start
var stop, start, loopCount = 1000000;
// Running testOne
start = (new Date()).getTime();
for (var i = loopCount; i>0; i--) {
new testOne();
}
stop = (new Date()).getTime();
console.log('Test one took: '+ Math.round(((stop/1000) - (start/1000))*1000) +' milliseconds');
// Running testTwo
start = (new Date()).getTime();
for (var i = loopCount; i>0; i--) {
new testTwo();
}
stop = (new Date()).getTime();
console.log('Test two took: '+ Math.round(((stop/1000) - (start/1000))*1000) +' milliseconds');
内省时有一点点缺点。倾倒testOne,会导致信息量减少。此外,“testOne”中的私有财产“privateVariable”在所有情况下都是共享的,在shesek的回复中也有帮助。
答案 1 :(得分:47)
五年前,我在JavaScript中编写了Classical Inheritance。它表明JavaScript是一种无类别的原型语言,它具有足够的表达能力来模拟经典系统。从那时起,我的编程风格就已经发生了变化,就像任何优秀的程序员一样。我学会了完全接受原型主义,并将自己从经典模型的范围中解放出来。
Dean Edward的Base.js,Mootools's Class或John Resig's Simple Inheritance作品是JavaScript中classical inheritance的工作方式。
答案 2 :(得分:26)
function Shape(x, y) {
this.x = x;
this.y = y;
}
// 1. Explicitly call base (Shape) constructor from subclass (Circle) constructor passing this as the explicit receiver
function Circle(x, y, r) {
Shape.call(this, x, y);
this.r = r;
}
// 2. Use Object.create to construct the subclass prototype object to avoid calling the base constructor
Circle.prototype = Object.create(Shape.prototype);
答案 3 :(得分:14)
我会看看YUI和Dean Edward的Base
图书馆:http://dean.edwards.name/weblog/2006/03/base/
对于YUI,您可以快速查看lang module,尤其是。 YAHOO.lang.extend方法。然后,您可以浏览一些小部件或实用程序的源代码,并了解它们如何使用该方法。
答案 4 :(得分:5)
还有Microsoft的ASP.NET Ajax库,http://www.asp.net/ajax/。
还有很多好的MSDN文章,包括 Create Advanced Web Applications With Object-Oriented Techniques 。
答案 5 :(得分:4)
ES6 class
和extends
ES6 class
和extends
只是以前可能的原型链操作的语法糖,因此可以说是最规范的设置。
首先在https://stackoverflow.com/a/23877420/895245
了解有关原型链和.
属性查找的更多信息
现在让我们解构会发生什么:
class C {
constructor(i) {
this.i = i
}
inc() {
return this.i + 1
}
}
class D extends C {
constructor(i) {
super(i)
}
inc2() {
return this.i + 2
}
}
// Inheritance syntax works as expected.
(new C(1)).inc() === 2
(new D(1)).inc() === 2
(new D(1)).inc2() === 3
// "Classes" are just function objects.
C.constructor === Function
C.__proto__ === Function.prototype
D.constructor === Function
// D is a function "indirectly" through the chain.
D.__proto__ === C
D.__proto__.__proto__ === Function.prototype
// "extends" sets up the prototype chain so that base class
// lookups will work as expected
var d = new D(1)
d.__proto__ === D.prototype
D.prototype.__proto__ === C.prototype
// This is what `d.inc` actually does.
d.__proto__.__proto__.inc === C.prototype.inc
// Class variables
// No ES6 syntax sugar apparently:
// https://stackoverflow.com/questions/22528967/es6-class-variable-alternatives
C.c = 1
C.c === 1
// Because `D.__proto__ === C`.
D.c === 1
// Nothing makes this work.
d.c === undefined
没有所有预定义对象的简化图表:
__proto__
(C)<---------------(D) (d)
| | | |
| | | |
| |prototype |prototype |__proto__
| | | |
| | | |
| | | +---------+
| | | |
| | | |
| | v v
|__proto__ (D.prototype)
| | |
| | |
| | |__proto__
| | |
| | |
| | +--------------+
| | |
| | |
| v v
| (C.prototype)--->(inc)
|
v
Function.prototype
答案 6 :(得分:3)
这是我发现的最明显的例子,来自Mixu的Node书(http://book.mixu.net/node/ch6.html):
我赞成合成而不是继承:
组合 - 对象的功能由聚合体组成 包含其他对象实例的不同类。 继承 - 对象的功能由它自己组成 功能以及其父类的功能。如果你必须 有继承,使用普通的旧JS
如果必须实现继承,至少要避免使用另一个继承 非标准实现/魔术功能。这是你怎么做的 在纯ES3中实现合理的传承传真(同样长 当你遵循从未在原型上定义属性的规则时):
function Animal(name) { this.name = name; }; Animal.prototype.move = function(meters) { console.log(this.name+" moved "+meters+"m."); }; function Snake() { Animal.apply(this, Array.prototype.slice.call(arguments)); }; Snake.prototype = new Animal(); Snake.prototype.move = function() { console.log("Slithering..."); Animal.prototype.move.call(this, 5); }; var sam = new Snake("Sammy the Python"); sam.move();
这与经典继承不同 - 但确实如此 标准的,可理解的Javascript并具有该功能 人们主要寻求:可链接的构造函数和调用的能力 超类的方法。
答案 7 :(得分:2)
我建议看看PrototypeJS的Class.create:
第83行@ http://prototypejs.org/assets/2009/8/31/prototype.js
答案 8 :(得分:1)
我见过的最好的例子是Douglas Crockford的JavaScript: The Good Parts。绝对值得购买,以帮助您获得平衡的语言观点。
Douglas Crockford负责JSON格式,并作为JavaScript专家在雅虎工作。
答案 9 :(得分:0)
有一个代码段JavaScript Prototype-based Inheritance,其中包含特定于ECMAScript版本的实现。它将根据当前运行时自动选择在ES6,ES5和ES3实现之间使用哪个。
答案 10 :(得分:0)
在Javascript中添加基于原型的继承的示例。
// Animal Class
function Animal (name, energy) {
this.name = name;
this.energy = energy;
}
Animal.prototype.eat = function (amount) {
console.log(this.name, "eating. Energy level: ", this.energy);
this.energy += amount;
console.log(this.name, "completed eating. Energy level: ", this.energy);
}
Animal.prototype.sleep = function (length) {
console.log(this.name, "sleeping. Energy level: ", this.energy);
this.energy -= 1;
console.log(this.name, "completed sleeping. Energy level: ", this.energy);
}
Animal.prototype.play = function (length) {
console.log(this.name, " playing. Energy level: ", this.energy);
this.energy -= length;
console.log(this.name, "completed playing. Energy level: ", this.energy);
}
// Dog Class
function Dog (name, energy, breed) {
Animal.call(this, name, energy);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function () {
console.log(this.name, "barking. Energy level: ", this.energy);
this.energy -= 1;
console.log(this.name, "done barking. Energy level: ", this.energy);
}
Dog.prototype.showBreed = function () {
console.log(this.name,"'s breed is ", this.breed);
}
// Cat Class
function Cat (name, energy, male) {
Animal.call(this, name, energy);
this.male = male;
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function () {
console.log(this.name, "meowing. Energy level: ", this.energy);
this.energy -= 1;
console.log(this.name, "done meowing. Energy level: ", this.energy);
}
Cat.prototype.showGender = function () {
if (this.male) {
console.log(this.name, "is male.");
} else {
console.log(this.name, "is female.");
}
}
// Instances
const charlie = new Dog("Charlie", 10, "Labrador");
charlie.bark();
charlie.showBreed();
const penny = new Cat("Penny", 8, false);
penny.meow();
penny.showGender();
ES6使用构造函数和超级关键字使用继承要容易得多。