JavaScript中的继承方式

一、前言

面向对象特性:封装,继承,多态。

继承,类与类之间的关系,面向对象的语言的继承是为了多态服务的。

js不是面向对象的语言,但是可以模拟面向对象.模拟继承.为了节省内存空间。

在js中我们可以通过原型来进行继承，它的原理是改变原型的指向。

原型的两个作用：

原型作用1: 数据共享 ，目的是:为了节省内存空间,

原型作用2: 为了实现继承 目的是:为了节省内存空间

二、继承的几种方式

1.借用构造函数继承

优点：该方式主要解决属性的问题
缺点：父级类别中的方法不能继承

<script>
 function Person(name, age, sex, weight) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.weight = weight;
  }

  Person.prototype.sayHi = function () {
    console.log("hello!");
  };

  function Student(name, age, weight, sex, score,) {  //===》这里需要传入构造函数的参数
    Person.call(this, name, age, sex, weight); //=======>借用需要的构造函数，传入参数
    this.score = score;
  }

  var st = new Student("小明", 18, "180kg", "男", 99);
  console.log(st.name, st.age, st.sex, st.weight, st.score);
  //st.sayHi();  //父亲级类别中的方法不能继承

  var stu2 = new Student("小红", 20, "女", "20kg", "120");
  console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);

  var stu3 = new Student("小丽", 30, "妖", "30kg", "130");
  console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.组合继承

原型继承+借用构造函数继承。既能解决属性问题,又能解决方法不能继承问题。 //一般用这种，前提用构造函数创建对象

<script>
  function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }

  Person.prototype.sayHi = function () {
    console.log("嘿嘿嘿嘿");
  };

  function Student(name, age, sex, score) {
    //借用构造函数：解决属性值重复的问题
    Person.call(this, name, age, sex);
    this.score = score;
  }

  //改变原型指向————继承
  Student.prototype = new Person(); //===>这里不传参数
  Student.prototype.eat = function () {
    console.log("吃试卷");
  };

  var st = new Student("小明", 18, "男", "100分");
  console.log(st.name, st.age, st.sex, st.score);
  st.sayHi();
  st.eat();

  var st1 = new Student("小黑", 28, "女", "110分");
  console.log(st1.name, st1.age, st1.sex, st1.score);
  st1.sayHi();
  st1.eat();

  var st2 = new Student("小白", 38, "妖", "120分");
  console.log(st2.name, st2.age, st2.sex, st2.score);
  st2.sayHi();
  st2.eat();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3.拷贝继承

就是把对象中需要共享的属性或者方法,直接遍历的方式复制到另一个对象中。

3.1 通过改变地址指向实现

  var obj1 = {
    name: "小糊涂",
    age: 20,
    sleep: function () {
      console.log("睡觉");
    }
  }

  //改变了地址的指向
  var obj2 = obj1;
  console.log(obj2.name, obj2.age);
  obj2.sleep();
1
2
3
4
5
6
7
8
9
10
11
12

3.2 通过循环实现

  var obj1 = {
    name: "小糊涂",
    age: 20,
    sleep: function () {
      console.log("睡觉");
    }
  };

  var obj2 = {};
  for (var key in obj1) {
    obj2[key] = obj1[key];
  }
  console.log(obj2.name);
1
2
3
4
5
6
7
8
9
10
11
12
13