在JavaScript中模拟类(class)及类的继承关系(2)

关于继承,网上也有很多资料可以查询,但是很多朋友对其理解的不够深入。讲到继承,假如你不去查资料,猛地一下,可能说不出个所以然来。这就说明我们的基础知识打的不够扎实。没有理解透彻。今天,我站在前辈的基础之上,再来和大家一起回顾一下这个 继承。

继承最常用的两种方式如下:

原型链继承(对象间的继承)

类式继承(构造函数间的继承)

原型链继承

什么是原型链继承?这里我就不说什么定义了。其实就是用prototype继承父级。

举个例子:

function Parent(){ this.name = 'mike'; } function Child(){ this.age = 12; } Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条 var test = new Child(); alert(test.age); alert(test.name);//得到被继承的属性 //继续原型链继承 function Brother(){ //brother构造 this.weight = 60; } Brother.prototype = new Child();//继续原型链继承 var brother = new Brother(); alert(brother.name);//继承了Parent和Child,弹出mike alert(brother.age);//弹出12

上面例子,通过原型,形成链条,Child继承了Parent,Brother有继承了Child,最后brother既有Child和Parent的属性,又有自己的属性。这就是原形链的继承。

类式继承(借用构造函数)

类式继承一般是通过运用call或者apply 进行子类型构造函数的内部调用超类型的构造函数。举个例子:

function Parent(age){ this.name = ['mike','jack','smith']; this.age = age; } function Child(age){ Parent.call(this,age); } var test = new Child(21); alert(test.age);//21 alert(test.name);//mike,jack,smith test.name.push('bill'); alert(test.name);//mike,jack,smith,bill

上面的两种继承是最基本的两种继承方式。

此外还有一些继承方式,我们一起来看一下!

组合继承

组合继承通常是上面两种继承方式组合在一起使用的继承方式。

举例如下:

function Parent(age){ this.name = ['mike','jack','smith']; this.age = age; } Parent.prototype.run = function () { return this.name + ' are both' + this.age; }; function Child(age){ Parent.call(this,age);//对象冒充,给超类型传参 } Child.prototype = new Parent();//原型链继承 var test = new Child(21);//写new Parent(21)也行 alert(test.run());//mike,jack,smith are both21

原型式继承

和上面讲的原形链式继承只有一字之差,但是不是同一个内容。我们所说的原型式继承,就是我们上节课所讲的,通过Object.create()方式来创建新的类。因为这种方式老式浏览器不支持。因此,假如我们不用Object.create(),也可以有替代法,方式如下:

function obj(o){ function F(){} F.prototype = o; return new F(); }

这个函数,就实现了我们Object.create()创建类的方式!

因此举例如下:

function obj(o){ function F(){} F.prototype = o; return new F(); } var box = { name : 'trigkit4', arr : ['brother','sister','baba'] }; var b1 = obj(box); alert(b1.name);//trigkit4 b1.name = 'mike'; alert(b1.name);//mike alert(b1.arr);//brother,sister,baba b1.arr.push('parents'); alert(b1.arr);//brother,sister,baba,parents var b2 = obj(box); alert(b2.name);//trigkit4 alert(b2.arr);//brother,sister,baba,parents

寄生式继承

举例如下:

function creatAnother(original){ var clone=new Object(original); clone.sayHi=function(){ alert("hi") }; return clone; } var person={ name:"haorooms", friends:["hao123","zhansan","lisi"] } var antherPerson=creatAnother(person); antherPerson.sayHi();//hi

寄生组合式

function inheritPrototype (subType,superType) { var prototype = Object.creat(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; }; 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; } //继承方法 inheritPrototype(SubType,SuperType); SubType.prototype.sayAge = function () { console.log(this.age); } var instance = new SubType();

类的继承,基本上就是如上几种方式。下面再简单的说一下ES6的class类吧!

es6实现类

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpdfz.html