好程序员web前端教程之JS继承实现方式解析

Posted 2021-02-27

好程序员web前端教程之JS继承实现方式解析，JS是Web前端三要素之一，也是每一个初学前端的同学遭遇的第一条拦路虎。很多人反应JS学习不易，各类知识点概念及应用常常让人抓耳挠腮。在接下来的北京Web前端进阶课中，好程序员小编就给大家简单介绍一下JS的继承方式。

　　什么是继承?
　　继承就是让一个类型(可以通过构造函数或者class来定义)的对象能够访问另外一个类型的属性和方法，它是类和类之间的一种关系，通常说子类继承父类。但这里容易出现一个误区：认为实例继承了某个类,某人有响应的属性和方法是因为他继承人类，这种说法是错误。
　　实现继承的方式有很多种，本次课程中小编给大家分享四种：借助构造函数实现继承、原型继承、组合继承、ES6继承。
　　1、借助构造函数实现继承
　　function Person(name,age){ //定义了一个父类
　　this.name = name;
　　this.age = age;
　　this.sayHello = function(){
　　console.log(this.name);
　　}
　　}
　　function Male(name,age){ //定义了一个子类 男性类
　　//继承父类，让子类具有相应的属性和方法
　　//call或者apply的用法
　　//构造函数里的this指向实例
　　Person.call(this,name,age);
　　this.hx = "true";//除了继承过来的属性和方法，还能添加针对于子类自身的属性和方法
　　}
　　function FeMale(name,age){ //定义了一个子类 女性类
　　Person.call(this,name,age);
　　this.hj = "no";
　　}
　　var male = new Male("chenjinfeng",20);
　　male.sayHello();
　　2、原型继承
　　function Person(){
　　}
　　Person.prototype.name = "john";
　　Person.prototype.age = 20;
　　Person.prototype.sayHello = function(){
　　console.log(this.name);
　　}
　　function Male(){
　　}
　　Male.prototype = new Person();//Male.prototype.proto == Person.prototype 通过这行代码就实现继承
　　//查找流程 male的proto(Male.prototype)上面有没有sayHello,
　　//如果没有继续查找 male.proto.proto(Male.prototype.proto) 就是查找 Person.prototype
　　var male = new Male();
　　male.sayHello();
　　3、组合继承
　　function Person(name,age){
　　this.name = name;
　　this.age = age;
　　}
　　Person.prototype.sayHello = function(){
　　console.log(this.name);
　　}
　　function Male(name,age){
　　Person.call(this,name,age);//只能继承实例属性
　　}
　　//只考虑继承原型方法 是不是就可以了 让Male的原型对象也有Person原型对象上的方法
　　/ Male.prototype = Person.prototype;
　　//sayHi方法是我子类独有的方法
　　Male.prototype.sayHi = function(){
　　console.log("hi");
　　}
　　var male = new Male("john",20);
　　male.sayHello();
　　var person = new Person("aa",22);
　　person.sayHi();//完了，父类居然能访问子类的方法，继承彻底乱了，原因是 Male.prototype 和 Person.prototype指向一样，任何一方改变，都会影响另一方 /
　　for(let attr in Person.prototype){
　　Male.prototype[attr] = Person.prototype[attr];
　　}
　　Male.prototype.sayHi = function(){
　　console.log("hi");
　　}
　　var male = new Male("john",20);
　　male.sayHello();
　　male.sayHi();
　　var person = new Person("aa",22);
　　person.sayHi();
　　4、ES6继承
　　class Person{
　　constructor(name,age){
　　this.name = name;
　　this.age = age;
　　}
　　sayHello(){
　　console.log(this.name);
　　}
　　//扩展，定义类方法
　　static foo(){
　　console.log("这是类方法，不是实例方法");
　　}
　　}
　　//通过extends这个关键字实现继承
　　class Male extends Person{
　　constructor(name,age){
　　super(name,age);//1.创建this对象2.super指向父类的构造函数
　　this.sexy = "男";//添加子类的实例属性
　　}
　　//在子类的原型方法里使用了父类的原型方法
　　sayHi(){
　　console.log("hi");
　　super.sayHello();//super指向谁?指向父类的原型对象
　　}
　　static foo1(){
　　super.foo(); //super指向父类
　　}
　　}
　　var male = new Male("john",20);
　　//male.sayHello();
　　male.sayHi();
　　Male.foo1();