当前位置: 首页 / 技术分享 / 正文
好程序员web前端教程之JS继承实现方式解析

2020-04-21

好程序员Java web前端教程 web前端培训

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

JS2

  什么是继承?

  继承就是让一个类型(可以通过构造函数或者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();

  4ES6继承

  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学习技巧,你可以关注好程序员”微信公众号,定期发布技术文章和求职趋势分析。如果你想快速入行Web前端行业拿高薪,可以来好程序员北京Web前端培训班,专业大牛讲师以项目驱动教学过程和内容,让你理论与实战兼得,求职更具竞争力!

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-02-17(北京)

    开班盛况

    开班时间:2020-03-02(深圳)

    开班盛况
  • 大数据+人工智能 <好程序员严选班>

    开班时间:2019-12-23(北京)

    开班盛况
  • 大数据+人工智能 <好程序员班>

    开班时间:2020-02-24(杭州)

    开班盛况

    开班时间:2020-02-17(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2020-03-09(北京)

    开班盛况
  • Python全栈+人工智能 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2020-02-24(北京)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号