面向对象的继承，就是为了优化代码程序，减少冗余的代码，适用于复杂的大型项目。

继承是面向对象软件技术当中的一个概念，与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。

语法形式：

实际项目中使用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);

面向对象的继承语法

ES6的继承语法

ES5继承语法

猜你喜欢