JS继承实现方式有哪些

这篇文章主要介绍“JS继承实现方式有哪些”，在日常操作中，相信很多人在JS继承实现方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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();

到此，关于“JS继承实现方式有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文名称：JS继承实现方式有哪些
当前网址：https://www.cdcxhl.com/article12/jgdddc.html

成都网站建设公司_创新互联，为您提供网站设计公司、域名注册、网站制作、外贸网站建设、、做网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联