面向对象的继承,就是为了优化代码程序,减少冗余的代码,适用于复杂的大型项目。
继承是面向对象软件技术当中的一个概念,与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。
语法形式:
实际项目中使用ES6的继承方法,使用关键词来完成面对对象的继承程序。
ES5的继承方法:使用原型原型链的访问方式和改变this指向的方法,是面对对象继承的基本原理。
ES6的继承语法
extends关键词,指定继承的父类构造函数,子类实例化对象可以继承被指定的父类构造函数,也就是子类实例化对象具有父类的属性和方法。
super() 方法用于调用父类的构造函数。通过在构造方法中调用 super() 方法,我们调用了父类的构造方法,这样就可以访问父类的属性和方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//父类构造函数
class Father{
//定义构造函数的属性和属性值
constructor(name,age){
//给实例化对象定义的属性和属性值
this.name = name;
this.age = age;
}
//定义给构造函数prototype中
//实例化对象通过原型链可以访问调用
f1(){};
f2(){};
}
//创建父类实例化对象
const fatherObj = new father('张三' , 18);
//子类构造函数
//extends指定继承的父类构造函数
class Son extends Father{
constructor(name ,age , sex , addr){
//指定继承的父类构造函数的属性
super(name,age,sex);
//定义子类构造器自己的属性和属性值
this.sex = sex;
this.addr = addr;
}
//子类构造函数自己的函数方法
//定义在子类构造函数的prototype中
ff1(){};
ff2(){};
}
//创建子类构造函数对应的子类实例化对象
const objSon = new Son('李四' , 50 , '女' , '北京');
console.log( objSon );
</script>
</body>
</html>
ES5继承语法
ES5的构造函数语法
function Father(name , age){
//this指向new关键词创建的实例化对象
//也就是通过new关键词,调用父类构造函数创建的父类实例化对象
this.name = name;
this.age = age;
}
Father.prototype.f1 = function(){};
Father.prototype.f2 = function(){};
//创建实例化对象
const obj = new Father('王昭没有君啊' , 22);
console.log(obj);
//定义一个对象
const obj = {};
//通过call语法改变构造函数的this指向
//指向我们定义的空对象
//构造函数定义的属性和属性值就是定义给修改的this指向的这个对象
Father.call(obj , '王昭君' , 20);
console.log(obj);
继承属性,通过修改父类构造函数的this指向,让父类构造函数定义的属性属性值定义给子类实例化对象。
继承函数方法,子类实例化对象,原则上只能调用子类构造函数prototype中的函数方法,通过继承,子类实例化对象可以调用父类构造函数prototype中的函数方法。
给子类构造函数prototype赋值父类实例化对象的内存地址,通关父类实例化对象的__proto__调用父类构造函数prototype中的函数方法
//父类构造函数
function Fahter(name,age){
this.name = name;
this.age = age;
}
Father.prototype.f1 = function(){};
Father.prototype.f2 = function(){};
//子类构造函数和继承语法
function Son(name , age , sex , adde , phone){
//继承属性
//通过改变this指向继承父类构造函数的属性
//将父类构造函数的this指向,改变为子类实例化对象
Fahter.call(this , name , age);
//定义子类构造函数自己的属性
this.sex = sex;
this.addr = addr;
this.phone = phone;
}
//继承函数方法
//子类构造函数的prototype赋值为父类实例化对象
//创建父类实例化对象
const fatherObj = new Father();
//删除父类实例化对象的属性
delete(fatherObj.name);
delete(fatherObj.age);
//给子类构造函数prototype赋值父类实例化对象的内存地址
Son.prototype = fatherObj;
//给子类构造函数prototype定义自己的函数方法
Son.prototype.ff1 = function(){};
Son.prototype.ff2 = function(){};
//创建子类实例化对象
const objSon = new Son('王昭君' , 20 , '女' , '北京' , 123456);
console.log(objSon);