关于JavaScript中实现继承，及prototype属性

感谢Mozilla 让我弄懂继承。

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

与传统的基于类的面向对象语言不同，javascript中没有从一个类扩展出另一个类的底层类结构。在javascript中，继承是通过简单地从一个对象原形向另一个对象原形复制方法而实现的。---《javascript DOM 高级程序设计》

并且每个函数和对象都有prototype属性。（"原型链"（prototype chain）模式）

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

常见的几种继承方法：

1.简单的继承

var ClassA={};

ClassA.sayHi=function(){...};

var ClassB={};

ClassB.sayColor=function(){...};

ClassB.sayHi=ClassA.sayHi;

直接复制，简洁明了。缺点是，要是继承的属性过多，需要写大量代码。

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已经没有用了。

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;

    };

（样式图根据上代码画图）

如样式图--详细解释

秒客网

关于JavaScript中实现继承，及prototype属性

相关文章