好程序员 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();