继承
本周,逆战班学习的主题是继承。
继承是什么?爸爸有的,儿子也有;爸爸很有钱,所以儿子也很有钱。
js中面向对象的三大特点:封装,继承,多态,
这里的继承说的其实是指,让一个构造函数去继承另一个构造函数的属性和方法,发生在两个构造函数之间的。
继承发生的条件:1两个构造函数之间;2子级继承父级;3继承的是父级的属性和方法。
继承又有很多种方法,ES5中有原型继承,构造函数继承,组合继承,ES6中有class继承,接下去我们来一一学习认识他们到底是怎么继承的。
1、原型继承
//原型继承1-原型对象继承:
//只能继承原型身上的方法和属性,不能继承构造函数内的方法和属性
function Parent(){
this.name="parent";
}
Parent.prototype.show=function(){
console.log("我是父");
}
function Child(){
}
//1.浅拷贝,一旦给child重新赋值,则会覆盖父级原型的属性和方法
// Child.prototype=Parent.prototype;
// Child.prototype.abc=function(){
// console.log("我是子");
// }
//----------------------------
//2.深拷贝:不会影响父级原型身上的属性和方法
// for(var i in Parent.prototype){
// Child.prototype[i]=Parent.prototype[i];
// }
// Child.prototype.show=function(){
// console.log("我是子");
// }
var p=new Parent();
p.show();
console.log(p.name);
var c=new Child();
c.show();
// c.abc();
console.log(c.name);
============================================================
// 原型继承2 - 原型链继承:
// 1.不仅可以继承原型身上的方法和属性,而且还可以继承构造函数中的方法和属性
// 2.但是,不方便传参
function Parent(n){
this.name=n;
}
Parent.prototype.show=function(){
console.log(this.name);
}
function Child(n){
}
// Child的实例c ---> __proto__ ---> Child.prototype ---> Parent的实例 ---> __proto__ ---> Parent.prototype
Child.prototype=new Parent("child");
Child.prototype.show=function(){
console.log("hhhh");
}
var p=new Parent("parent");
console.log(p.name);
p.show();
var c=new Child();
console.log(c.name);
c.show();
2、借用构造函数继承
//构造函数继承(改变this的指向)
//方便传参
//可以实现多继承
//但是,只能继承构造函数内的属性和方法,不能继承原型身上的属性和方法
function Parent(a){
this.skill=a;
}
Parent.prototype.show=function(){
console.log(this.skill);
}
function Child(b){
Parent.call(this,b);
}
var p=new Parent("父");
console.log(p.skill);
p.show();
var c=new Child("子");
console.log(c.skill);
c.show();
=============================================================
//多继承
function Mp3(){
this.music="听音乐";
}
function Camera(){
this.phone="拍照";
}
function Tel(){
this.call="打电话";
}
function Computer(){
this.net="上网";
}
function MobilePhone(n){
Mp3.call(this);
Camera.call(this);
Tel.call(this);
Computer.call(this);
this.name=n;
this.game="打游戏";
}
var mp=new MobilePhone("huawei");
console.log(mp);
3、组合继承
// 组合继承:构造函数继承+ 原型继承
// 1.既可以继承构造函数,又可以继承原型
// 2.方便传参
// 3.可以多继承构造函数
// 4.注意:原型链继承时,依然有参数隐患
function Parent(p){
this.skill=p;
// 测试原型链继承的参数隐患
// this.skill.split();
}
Parent.prototype.show=function(){
console.log(this.skill);
}
function Child(c){
Parent.call(this,c);
}
// Child.prototype = new Parent();
for(var i in Parent.prototype){
Child.prototype[i]=Parent.prototype[i];
}
var p=new Parent("父");
console.log(p.skill);
p.show();
var c=new Child("子");
console.log(c.skill);
c.show();
4、ES6 class继承
// ES6的class继承,原理就是:构造函数方式继承 + 原型链继承
class Parent{
constructor(a){
this.skill=a;
}
show(){
console.log(this.skill);
}
}
class Child extends Parent{
constructor(a){
super(a);
}
}
var p = new Parent("父");
p.show();
console.log(p);
var c = new Child("子");
c.show();
console.log(c);
总结:继承最大的特点就是代码重用,让代码变得简洁。相同的功能方法不用重复的写,减少了工作量,类与类之间的关系更加明了,功能分配也更加清楚明白。
继承的学习让原本学习的代码进一步的进行了优化。