前端html继承的方式,好程序员web前端教程之JS继承实现方式解析-CSDN博客

好程序员

web

前端教程

之JS

继承实现方式解析

，

是

Web

前端三要素之一，也是每一个初学前端的同学遭遇的第一条拦路虎。很多人反应

学习不易，各类知识点概念及应用常常让人抓耳挠腮。在接下来的

北京

Web

前端进阶课中，

好程序员

小编就给大家简单介绍一下JS

的继承方式。

什么是继承?

继承就是让一个类型(

可以通过构造函数或者

class

来定义

)

的对象能够访问另外一个类型的属性和方法，它是类和类之间的一种关系，通常说子类继承父类。但这里容易出现一个误区：认为实例继承了某个类

某人有响应的属性和方法是因为他继承人类，这种说法是错误。

实现继承的方式有很多种，本次课程中小编给大家分享四种：借助构造函数实现继承、原型继承、组合继承、ES6

继承。

、借助构造函数实现继承

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();

、原型继承

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();

、组合继承

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();

、

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();