JS的继承是怎么回事?

什么是继承?

继承就是A对象通过继承B对象,就能直接拥有B对象的所有属性和方法

实现继承的几种方法

1、原型链继承

基本原理:将父类的实例赋值给子类的原型

现在子类Coder就继承了父类Staff的私有属性,getComName,子类自身上有个getInfo的私有属性,下面进行验证

源代码:

 // 父类
function Staff() {    
  this.company = '2demo';
  this.list = [];
}
// 父类的原型
Staff.prototype.getComName = function() {
return this.company;
};

// 子类
    function Coder(name, skill) {
      this.name = name;
      this.skill = skill;
    }

// 继承 Staff
    Coder.prototype = new Staff();

// 因为子类原型的指向已经变了,所以需要把子类原型的contructor指向子类本身
    Coder.prototype.constructor = Coder;

// 给子类原型添加属性
    Coder.prototype.getInfo = function() {
      return {
        name: this.name,
      skill: this.skill
      };
    };

    let coder1 = new Coder('jason', 'javascript');

    coder1.getInfo(); // {name: 'jason', skill: 'javascript'}
    coder1.getComName(); // '2demo'

缺点:

子类的实例可以访问到父类的私有属性并且可以对其进行更改,这样不够安全。

源代码:

let coder2 = new Coder('tom','Python')
let coder3 = new Coder("jarry","C++")
coder2.list//[]
coder2.list.push(233)//[233]
coder2.list.push(1)//[233,1]
coder2.list.push(1)//[233,1,1]
coder3.list//[233, 1, 1]

2、class extends 继承

ES6中有了类的概念,可以通过class声明一个类,然后通过extends关键字来实现继承关系。

源代码:

class Staff {
  constructor(name){
      this.name=name;
  }
  static slogan(){
      return "爱示范"
  }
}
class Coder extends Staff{
  constructor(name,skill){
      super(name);//调用父类的constructor(name)
      this.skill=skill;
  }
}
let coder1 = new Coder('jason','JavaScript')

undefined
console.log(coder1)

注意:

1、子类必须在constructor方法中调用super方法,否则新建实例时会因为子类没有自己的this对象而导致出错,子类的this对象是继承父类的this对象然后对其进行处理,如果不调用super方法,子类就获取不到this对象

2、由于上面这个原因,在子类的构造函数中必须要先调用super才能使用this 关键字,否则也会报错

子类的proto属性指向父类,所以子类可以继承父类的静态方法。

子类原型的proto总是指向父类的prototype属性

前端

常见的HTTP代码及其含义

2021-3-1 14:12:42

前端

跨域详解

2021-3-2 22:23:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索