JavaScript继承几种方式学习笔记

文章简单介绍了JavaScript继承模式,包括组合继承、原型继承、寄生继承、寄生组合继承。

文章目录

  • 1、组合继承
  • 2、原型式继承
  • 3、寄生式继承
  • 4、寄生组合式继承

1、组合继承

组合继承也叫做经典继承,指的是原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

function SuperType(name){
	this.name = name;
	this.colors = ["red"];
}
SuperType.prototype.sayName = function(){
	alert(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(){
	alert(this.age);
}
var instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);
instance1.sayName();
instance1.sayAge();

2、原型式继承

借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。它会在object创建临时构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}
var person = {
	name:"Nicholas",
	friends:["Shelly"];
}
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

alert(person.friends);

3、寄生式继承

在其中会创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象

function createAnother(original){
	var clone = object(original);
	clone.sayHi = function(){
		alert("hi");
	}
	return clone;
}
var person = {
	name:"Nicholas",
	friends:["Van"]
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

4、寄生组合式继承

借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数

function SuperType(name) {
	this.name = name;
	this.colors = ['red']
}

SuperType.prototype.sayName = function(){
	alert(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(){
	alert(this.age);
}

function inheritPrototype(subType,superType){
	var prototype = object(superType.prototype);
	prototype.constructor = subType;
	subType.prototype = prototype;
}

function SuperType(name){
	this.name = name;
	this.colors = ["red"];
}

SuperType.prototype.sayName = function(){
	alert(this.name);
}
function SubType(name,age){
	SuperType.call(this,name);
	this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge =function(){
	alert(this.age);
}

你可能感兴趣的:(JS基础,javascript,学习,笔记)