js学习（三）继承

来源：互联网发布：网络红歌大全编辑：程序博客网时间：2024/05/25 05:37

写一些看到的继承的方法

3.1简单的继承

这个是参考了javascript高级程序设计一书上的继承方法，上一段代码如下

function SuperType(){    this.name ="person";}SuperType.prototype.getname = function(){  console.log(this.name);};function Subtype(){   this.name = "man";}Subtype.prototype = new SuperType();var instance1 = new Subtype();

然后再上一个图

根据原型链的概念，SubType可以通过原型链去访问在SuperType中的方法getname，这就也差不多实现了继承的思想，最关键就是Subtype.prototype= new SuperType();这句话让Subtype.prototype为一个新建的SuperType对象，换个方式去理解，每次新建一个对象的时候，新的那个对象的__proto__属性都会指向构造这个对象的那个构造函数的原型，上述代码中，就是Subtype.prototype中的__proto__由原来指向objec.prototype变成了指向了SuperType.prototype，由此之后变可以通过原型链访问父类的属性。

还有一点需要注意的就是在这里name属性，在父类也有，在子类也有，子类会把父类的name给覆盖掉，对外呈现的就是在实例中的name，上述代码就是man。

3.2稍微复杂点的继承

先一个代码的部分

function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function(){console.log(this.name);};function SubType (name ,age){SuperType.call(this,name);this.age = age;}SubType.prototype = new SuperType();//SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function(){console.log(this.age);};var instance1 = new SubType("niki",29);instance1.hasOwnProperty("name");//trueinstance1.hasOwnProperty("colors");//trueinstance1.hasOwnProperty("age");//trueSubType.prototype.hasOwnProperty("name");//trueSubType.prototype.hasOwnProperty("sayAge");//trueSubType.prototype.hasOwnProperty("colors");//true

然后也上一个图片

这个例子呢，其实继承的方式都是一样的，只不过在定义子类的方法中用到了call的方法，这里就是调用了SuperType的构造方法，还有一点需要注意的是SubType.prototype = new SuperType();会使得SubType.prototype的constructor属性指向父类的构造函数，如果需要让他指向SubType需要对他进行修改

//==貌似在博客上看到过其他的，下次看完了一起补上

0 0