js学习（三）继承

最新推荐文章于 2025-12-26 10:47:03 发布

原创最新推荐文章于 2025-12-26 10:47:03 发布 · 846 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

6 篇文章

订阅专栏

写一些看到的继承的方法

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");//true
instance1.hasOwnProperty("colors");//true
instance1.hasOwnProperty("age");//true
SubType.prototype.hasOwnProperty("name");//true
SubType.prototype.hasOwnProperty("sayAge");//true
SubType.prototype.hasOwnProperty("colors");//true

然后也上一个图片

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

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