你的位置:首页 > Java教程

[Java教程]关于JavaScript中实现继承,及prototype属性


感谢Mozilla 让我弄懂继承。

JavaScript有八种基本类型,函数属于object。所以所有函数都继承自object。//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且都可以被储存在变量里。将这个记在脑子里。

但是JavaScript并没有真正意义上的继承。而是类似于指向和复制。并且每个函数和对象都有prototype属性。("原型链"(prototype chain)模式)

所有就构造了如同树结构一般的原型链。

常见的几种继承方法:

1.

function ClassA(sColor) {  this.color = sColor;  this.sayColor = function () {    alert(this.color);  };}function ClassB(sColor, sName) {  this.newMethod = ClassA;  this.newMethod(sColor);  delete this.newMethod;  this.name = sName;  this.sayName = function () {    alert(this.name);  };}var objA = new ClassA("blue");var objB = new ClassB("red", "John");objA.sayColor();  //输出 "blue"objB.sayColor();  //输出 "red"objB.sayName();//输出 "John"

以上代码,主要的在标红部分,先解释ClassB函数体中标红第一句:

this.newMethod = ClassA;
this是指的当前对象的拥有者。代码,this.newMethod = ClassA在ClassB的函数体中。
假如我var v=new ClassB();//ClassB函数体中的this就指代的v,因为v是ClassB函数体的拥有者。
//以上代码,具体经历了哪些步骤,我们先分析一下:
this肯定是指的ClassB。所以this.newMethod 可以就解释为ClassB新建一个newMethod属性并且赋值ClassA。//this.XXX快速建立一个属性,或者修改属性值

接着解释ClassB标红第二句:
this.newMethod(sColor);
关键在这第二句,代码上的this毋庸置疑肯定是指的ClassB。具体执行表示:执行newMethod函数。//就是执行ClassA
//步骤解释
newMethod既然赋值为ClassA,那newMethod就有ClassA所有属性和方法
function newMethod(sColor) {  this.color = sColor;  this.sayColor = function () {    alert(this.color);  };}

之前说过,this当前对象拥有者,newMethod是ClassB的属性,所有newMethod函数体中的this指代的是ClassB

执行函数体中的代码就是,ClassB.color=Scolor;ClassB.sayColor=function...;//动态添加属性

ClassB中的第三句:

 delete this.newMethod;//删除属性
既然我ClassB已经拥有了ClassA中的方法和属性了,newMethod对ClassB已经没有用了。

2.

function ClassA() {  this.color = "red";  this.sayColor = function () {    console.log(this.color);  };}ClassA.prototype.height=100;function ClassB() {  this.color="bule";}ClassB.prototype=new ClassA();ClassB.prototype.width=200;var b =new ClassB();b.sayColor();//bule

 

如下例:

 var BaseCalculator = function() {    this.t=2;  };//这是一个构造函数  BaseCalculator.prototype = {    add: function(x, y) {      return x + y;    },    subtract: function(x, y) {      return x - y;    }  };  var Calculator = function () {    //为每个实例都声明一个数字    this.tax = 5;  };  Calculator.prototype = new BaseCalculator();//继承  //Calculator.prototype.constructor=Calculator;  Calculator.prototype.add = function (x, y) {    return x + y + this.tax;  };

(样式图 根据上代码画图)

 

如样式图--详细解释