You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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
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实现类
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
前面一篇文章,我简单的讲了Es6以前js实现“类”的三种方式。http://www.haorooms.com/post/js_lei_jicheng ,但是继承的方式,我只简单写了一下极简主义继承。这篇文章在上篇文章基础之上,我再写写js继承的几种方式,最后再和大家一起看看ES6中类的实现方式。
js继承
关于继承,网上也有很多资料可以查询,但是很多朋友对其理解的不够深入。讲到继承,假如你不去查资料,猛地一下,可能说不出个所以然来。这就说明我们的基础知识打的不够扎实。没有理解透彻。今天,我站在前辈的基础之上,再来和大家一起回顾一下这个 继承。
继承最常用的两种方式如下:
原型链继承
什么是原型链继承?这里我就不说什么定义了。其实就是用prototype继承父级。
举个例子:
上面例子,通过原型,形成链条,Child继承了Parent,Brother有继承了Child,最后brother既有Child和Parent的属性,又有自己的属性。这就是原形链的继承。
类式继承(借用构造函数)
类式继承一般是通过运用call或者apply 进行子类型构造函数的内部调用超类型的构造函数。关于call和apply的用法,请看我之前文章:http://www.haorooms.com/post/js_constructor_pro 纯粹的运用这种方式,项目中通常比较少见,一般都是组合着运用。
举个例子:
上面的两种继承是最基本的两种继承方式。
此外还有一些继承方式,我们一起来看一下!
组合继承
组合继承通常是上面两种继承方式组合在一起使用的继承方式。
举例如下:
原型式继承
和上面讲的原形链式继承只有一字之差,但是不是同一个内容。我们所说的原型式继承,就是我们上节课所讲的,通过Object.create()方式来创建新的类。因为这种方式老式浏览器不支持。因此,假如我们不用Object.create(),也可以有替代法,方式如下:
这个函数,就实现了我们Object.create()创建类的方式!
因此举例如下:
寄生式继承
举例如下:
寄生组合式
类的继承,基本上就是如上几种方式。下面再简单的说一下ES6的class类吧!
es6实现类
Class的继承
由于Es6大多数浏览器现在还不支持,紧紧在reactNative或者node中使用的较多,亲们可以先看看其定义类和继承类的方式!
The text was updated successfully, but these errors were encountered: