js中的继承方式

刺骨的言语ヽ痛彻心扉 2024-04-18 08:32 11阅读 0赞

### 目录： ###

*   *   *  一、前言
         *  二、继承的几种方式
         *   *   *  1.借用构造函数继承
                 *  2.组合继承
                 *  3.拷贝继承
                 *   *  3.1 通过改变地址指向实现
                     *  3.2 通过循环实现

### 一、前言 ###

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

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

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>

##### 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>

##### 3.拷贝继承 #####

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

###### 3.1 通过改变地址指向实现 ######

var obj1 = {
        name: "小糊涂",
        age: 20,
        sleep: function () {
          console.log("睡觉");
        }
      }
    
      //改变了地址的指向
      var obj2 = obj1;
      console.log(obj2.name, obj2.age);
      obj2.sleep();

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

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 js中的继承

想要继承，就必须要提供个父类（继承谁，提供继承的属性）父类 function People(name,age) \{给构造函数添加了参数 ...

妖狐艹你老母/ 2024年04月19日 13:01/ 0 赞/ 7 阅读

相关 js中的继承方式

目录： * * * 一、前言 * 二、继承的几种方式 * * * 1.借用构造函数继承 ...

刺骨的言语ヽ痛彻心扉/ 2024年04月18日 08:32/ 0 赞/ 12 阅读

相关 JS中的多种继承方式（包含ES6）

为了让有JAVA基础的小伙伴更直观的看到区别简单描述一下JS中的继承、方法重载跟JAVA中的继承、方法重载区别 JS继承： > js中的继承有多种方式，大体上就是

短命女/ 2022年12月30日 01:28/ 0 赞/ 157 阅读

相关 JS 继承的四种方式

类三大特性 JS 本身是基于面向对象开发的编程语言。类：封装、继承、多态封装：类是一个函数，把实现一个功能的代码进行封装，以此实现 “低耦合高内聚” 多态

梦里梦外;/ 2022年12月26日 09:09/ 0 赞/ 113 阅读

相关 js中的继承

1、原型链继承子类的原型指向父类的实例，缺点：子类有多个实例，一个实例改变值是引用类型的属性的值会改变其他实例的相同属性的值；无法对父类进行传参

妖狐艹你老母/ 2022年09月16日 04:48/ 0 赞/ 112 阅读

相关 js常用的继承方式

1.原型链继承不考虑函数参数的情况下，我这样写 function Animal(){ this.family=['f

落日映苍穹つ/ 2022年06月16日 05:08/ 0 赞/ 112 阅读

相关 JS中的继承

继承：一个对象a有权去访问另一个对象b上的成员定义一个动物类（实现下面的继承） function Animal (name) { th

你的名字/ 2022年06月09日 10:51/ 0 赞/ 112 阅读

相关 JS中继承方式总结

说在前面：为了使代码更为简洁方便理解，本文中的代码均将“非核心实现”部分的代码移出。 -------------------- 一、原型链方式关于原型链，可点

╰+攻爆jí腚メ/ 2022年04月10日 04:57/ 0 赞/ 144 阅读

相关 js实现继承的方式

出于对作者的尊重和感谢，原文地址为 [http://javapolo.iteye.com/blog/1996871][http_javapolo.iteye.com_blog_

缺乏、安全感/ 2022年03月06日 11:04/ 0 赞/ 292 阅读

相关 js中的几种继承方式

定义父类： // 定义一个动物类 function Animal (name) { // 属性 this.name = name ||

素颜马尾好姑娘i/ 2021年09月18日 02:48/ 0 赞/ 339 阅读