Javascript中的原型式继承

继承的概念

继承:通过一定的方式事项某个类型A获取另外一个类型B的属性和方法其中类型A就是子类型,类型B就是父类型。

Javascript的继承

Object是所有对象的父级|父类型|超类型,
js中所有的对象都直接或间接继承自Object。继承有两种方式,接受继承和实现继承,
在js中只有实现继承,试下继承主要依赖原型链来完成。

Javascript实现继承的几种方式

1.原型式继承
2.原型链继承
3.经典继承
4.组合继承

原型式继承

原型链继承方式A

<script>
	//提供一个构造函数
	function Person(name,age) {
		this.name = name;
		this.age = age;
	};
	//设置原型对象的属性
	Person.prototype.className = '1班';

	//使用构造函数来创建原型对象
	var p1 = new Person('小明',10);
	var p2 = new Person('小红',20);

	//打印p1,p2的className
	console.log(p1.className); //1班
	console.log(p2.className); //1班
</script>

原型链继承方式B

<script>
	//提供一个构造函数
	function Person(name,age) {
		this.name = name;
		this.age = age;
	};
	//设置原型对象的属性
	Person.prototype = {
		constructor:Person,
		className:'1班'
	};

	//使用构造函数来创建原型对象
	var p1 = new Person('小明',10);
	var p2 = new Person('小红',20);
	
	//打印p1,p2的className
	console.log(p1.className); //1班
	console.log(p2.className); //1班
	
	//对象p1,p2继承了构造函数原型对象的属性className,
	但是使用原型替换的方式实现继承的时候,原有原型对象中的属性和方法会丢失。
</script>

原型链继承方式C

//提供一个超类型|父类型构造函数
function SuperPerson() {
	this.name = 'SuperPerson';
	this.showName = function() {
		console.log(this.name);
		}
	}
//设置父类型的原型属性和原型方法
	SuperPerson.prototype.info = 'SuperPerson的信息';
	SuperPerson.prototype.showinfo = function() {
		console.log(this.info);
	}
//提供子类型
	function Person() {};
//设置继承
	Person.prototype = SuperPerson.prototype;
	Person.prototype.constructor = Person;
	
	var p1 = new Person();
	console.log(p1.name);  //undefined
	console.log(p1.info);  //SuperPerson的信息
	p1.showinfo(); //SuperPerson的信息
	p1.showName(); //not a function
	

结论

上面的方式可以继承父类型的原型属性和原型方法,但是无法继承实例属性和实例方法