JavaScriptの中の継承を深く分析する
4542 ワード
JavaScriptの継承には以下のような方法があります.
一、相手を偽る
一、相手を偽る
function Parent(username) {
this.username = username;
this.hello = function() {
alert(this.username);
}
}
function Child(username, password) {
this.method = Parent;
this.method(username);
delete this.method;
this.password = password;
this.world = function() {
alert(this.password);
}
}
var p = new Parent(" ");
var c = new Child(" ", " ");
p.hello();
c.hello();
c.world();
二、コール方法を使用して、コール方法の最初のパラメータをコールメソッドの関数としてのthisとします. function Parent(username) {
this.username = username;
this.hello = function() {
alert(this.username);
}
}
function Child(username, password) {
Parent.call(this, username);
this.password = password;
this.world = function() {
alert(this.password);
}
}
var p = new Parent(" ");
var c = new Child(" ", " ");
p.hello();
c.hello();
c.world();
三、アプリを使うと、前と似ています. function Parent(username) {
this.username = username;
this.hello = function() {
alert(this.username);
}
}
function Child(username, password) {
//Parent.apply(this, new Array(username));
Parent.apply(this, [username]);
this.password = password;
this.world = function() {
alert(this.password);
}
}
var p = new Parent(" ");
var c = new Child(" ", " ");
p.hello();
c.hello();
c.world();
四、原型チェーン方式 function Parent() {
}
Parent.prototype.username = " ";
Parent.prototype.hello = function() {
alert(this.username);
}
function Child() {
}
Child.prototype = new Parent();
Child.prototype.password = " I.N.G";
Child.prototype.world = function() {
alert(this.password);
}
var parent = new Parent();
var child = new Child();
parent.hello();
child.hello();
child.world();
五、混合方式(おすすめ) function Parent(username) {
this.username = username;
}
Parent.prototype.hello = function() {
alert(this.username);
}
function Child(username, password) {
Parent.call(this, username);
//Parent.apply(this, new Array(username));
this.password = password;
}
Child.prototype = new Parent();
Child.prototype.world = function() {
alert(this.password);
}
var p = new Parent(" ");
var c = new Child(" ", " ");
p.hello();
c.hello();
c.world();
以下はJavaScriptを総合的に使って対象と継承に向かう小さい例で、より深く理解するのに役立ちます. function Shape(edge) {
this.edge = edge;
}
Shape.prototype.getArea = function() {
return 0;
}
Shape.prototype.getEdge = function() {
return this.edge;
}
function Triangle(bottom, height) {
Shape.call(this, 3);
this.bottom = bottom;
this.height = height;
}
Triangle.prototype = new Shape();
Triangle.prototype.getArea = function() {
return 0.5 * this.bottom * this.height;
}
function Rectangle(bottom, height) {
Shape.call(this, 4);
this.bottom = bottom;
this.height = height;
}
Rectangle.prototype = new Shape();
Rectangle.prototype.getArea = function() {
return this.bottom * this.height;
}
var triangle = new Triangle(10, 5);
alert(triangle.getEdge());//3
alert(triangle.getArea());//25
var rectangle = new Rectangle(10, 10);
alert(rectangle.getEdge());//4
alert(rectangle.getArea());//100
// prototype
function class1(){
//
}
class1.prototype={
method:function(){
alert(1);
},
method2:function(){
alert("method2");
}
}
function class2(){
//
}
// class2 class1
for(var p in class1.prototype){
class2.prototype[p]=class1.prototype[p];
}
// class1 method
class2.prototype.method=function(){
alert(2);
}
//
var obj1=new class1();
var obj2=new class2();
// obj1 obj2 method
obj1.method();
obj2.method();
// obj1 obj2 method2
obj1.method2();
obj2.method2();
// inherit
Function.prototype.inherit=function(baseClass){
for(var p in baseClass.prototype){
this.prototype[p]=baseClass.prototype[p];
}
}
// ( ) Function , inherit , // , 。 , :
// class2 class1
for(var p in class1.prototype){
class2.prototype[p]=class1.prototype[p];
}
// :
// class2 class1
class2.inherit(class1)
// , 。 , , class2 // , prototype ,