JavaScript中的继承(原型链)

一、原型链

ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.

实例1:

function SupType() {
	this.property = true;
}

SupType.prototype.getSupvalue = function() {
	return this.property;
};

function SubType() {
	this.subproperty = false;
}

//原型对象等于一个类型的实例
SubType.prototype = new SupType();

SubType.prototype.getSubValue = function() {
	return this.subproperty;
};

var instance = new SubType();
alert(instance.getSupvalue());//true

 

原理分析:

javascript中继承的原理是通过原型让一个引用类型继承另一个引用类型的属性和方法,当一个原型对象等于一个引用类型的实例(就如同将一个对象赋值给另一个对象一样,此时被赋值的对象就拥有了这个对象的属性或方法),此时这个原型对象就拥有了这个实例所拥有的属性或方法.

SupType的实例中包含一个指向原型对象的内部指针和一个属性property,SupType的实例被赋值给了SubType原型对象,现在SubType原型对象中就包含了指向SupType原型对象的内部指针和property属性.此时SubType的实例对象就可以访问到SupType构造函数中的方法getSupvalue,当前getSupvalue中的this指向的是SubType的实例对象,所以最后得到的结果为true.

理解javascript中的原型模式 ,理解了原型模式就很好理解javascript中的原型链,从而就很好理解JavaScript中的继承.

二、继承中定义方法的2个规则.

1.当子类型要重写超类型中的方法或是要为超类型添加不存在的方法时,给原型添加方法的代码必须放在替换原型的语句之后.

实例1:

function SupType() {
	this.property = true;
}

SupType.prototype.getSupvalue = function() {
	return this.property;
};

function SubType() {
	this.subproperty = false;
}

//原型对象等于一个类型的实例
SubType.prototype = new SupType();

SubType.prototype.getSupvalue = function() {
	return false;
};

SubType.prototype.getSubValue = function() {
	return this.subproperty;
};

//SubType.prototype = new SupType();

var instance = new SubType();
alert(instance.getSupvalue());//false

子类型重写了超类型中的方法,因此会屏蔽原来的方法,最后返回的结果为false.

实例2:

如果将SubType.prototype = new SupType();这段替换原型的语句放在给原型添加方法的后面,上面最后得到的结果为true.

function SupType() {
	this.property = true;
}

SupType.prototype.getSupvalue = function() {
	return this.property;
};

function SubType() {
	this.subproperty = false;
}

//原型对象等于一个类型的实例
//SubType.prototype = new SupType();

SubType.prototype.getSupvalue = function() {
	return false;
};

SubType.prototype.getSubValue = function() {
	return this.subproperty;
};

SubType.prototype = new SupType();

var instance = new SubType();
alert(instance.getSupvalue());//true
alert(instance.getSubValue());// instance.getSubValue is not a function

  如果是先给子类型的原型添加方法,然后再将超类型的实例赋值给子类型的原型,那么子类型的原型就被这个超类型的原型重写了,子类型中的方法都不再存在,现在子类型的原型指向的是超类型的原型对象,调用方法instance.getSupvalue()是超类型中的方法返回true.

2.通过原型链实现继承时,不要用字面量创建原型方法,这样会重写原型链.

实例:

function SupType() {
	this.property = true;
}

SupType.prototype.getSupvalue = function() {
	return this.property;
};

function SubType() {
	this.subproperty = false;
}

//原型对象等于一个类型的实例
SubType.prototype = new SupType();

//SubType.prototype.getSupvalue = function() {
//	return false;
//};

//SubType.prototype.getSubValue = function() {
//	return this.subproperty;
//};

SubType.prototype = {
	getSubvalue: function() {
		return this.subproperty;
	}
};

var instance = new SubType();
alert(instance.getSupvalue());
alert(instance.getSubValue());

测试结果: 

 

重写原型链切断了子类型和超类型之间的关系(SubType和SupType现在没有了关系).

时间: 2024-12-24 04:39:52

JavaScript中的继承(原型链)的相关文章

javascript精髓篇之原型链维护和继承.

一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了.其实啊,光靠这一个属性是无法完成javascript的继承.我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料.另外一个看不见的prototype成员.每一个实例都有有一条指向原型的prototype属性,这个属性是无法被访问到的,当然也就无法被修改了,因为这是维护javascript继承的基础. 1 //构

JavaScript 中实现继承的方式(列举3种在前一章,我们曾经讲解过创建类的最好方式是用构造函数定义属性,用原型定义方法。)

第一种:对象冒充 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 = f

Javascript 组合继承 原型链继承 寄生继承

Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { //通过ca

JavaScript学习13 JavaScript中的继承

JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式:对象冒充 function Parent(username) //父类对象 { this.username = username; //下面的代码最关键的部分就是将子对象的this传递给了父对象 this.sayHello = function() { alert(this.username); } } f

javascript 中各种继承方式的优缺点 (转)

javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name) { this.name = name; this.setName = (newName) => { this.name = name; }; this.getName = () => { return this.name; } } let Sub = function(sex) { this.se

javascript 中实现继承的六种方式

javascript 中对于继承的描述: 许多面向对象语言都支持两种继承的方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.在 javascript 中由于函数没有签名也就无法实现接口继承,而只支持实现继承,而且实现继承主要通过原型链来实现的. 先引述下官方文档对于原型链的描述:其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.要理解这个概念要先弄清楚构造函数,原型,和实例的关系:每个构造函数(只要是函数)都有一个 prototype 属性该属性指向一

javascript中实现继承的几种方式

javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Child1(){ Parent1.call(this); this.type = "child1"; } 缺点:Child1无法继承Parent1的原型对象,并没有真正的实现继承(部分继承) 2.借用原型链实现继承 function Parent2(){ this.name = "p

javascript中的继承实现

javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是“类”,代码如下: 首先定义一个父类(或超类): 1 function Person(name){ 2 this.name=name; 3 } 4 5 Person.prototype.getName=function(){

JavaScript中的继承机制

JavaScript到底是不是面向对象的?! 有人说是,有人说基于对象更准确,因为JavaScript没有类.不去管它,但JavaScript确实提供了一些面向对象的机制. 本文主要讨论JavaScript中的继承.继承,简单来说,就是让子类获得父类的属性和方法,以达到共享和复用的目的. 在开始继承之前,首先需要创建父类.为了后续讨论的需要,我分别为父类创建了私有对象.实例对象.引用对象和两个实例方法. 创建父类的代码如下: // 父类实例的构造函数 function Pet(name,soun