js中的继承方式

刺骨的言语ヽ痛彻心扉 2024-04-18 08:32 73阅读 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 条评论，73人围观）

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

相关阅读

相关 js中的继承方式

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

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

相关 JS继承的几种方式

1.原型继承核心：将父类的实例作为子类的原型(并不是把父类中的属性和方法克隆一份一模一样的给子类，而是让子类父类之间增加了原型链接) 特点：父类中私有的和公有的都继

叁歲伎倆/ 2023年06月16日 10:52/ 0 赞/ 24 阅读

相关 js继承的6种方式

想要继承，就必须要提供个父类（继承谁，提供继承的属性）　　![format_png][]　　　　一、原型链继承　　　　 ![format_png 1][]

喜欢ヅ旅行/ 2023年02月10日 05:23/ 0 赞/ 22 阅读

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

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

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

相关 JS 继承的四种方式

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

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

相关 js 四种继承方式

继承说到继承，最容易想到的是ES6的extends，当然如果只回答这个肯定不合格，我们要从函数和原型链的角度上实现继承，下面我们一步步地、递进地实现一个合格的继承实现

怼烎@/ 2022年09月07日 12:22/ 0 赞/ 255 阅读

相关 js常用的继承方式

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

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

相关 JS中继承方式总结

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

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

相关 js实现继承的方式

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

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

相关 js中的几种继承方式

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

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