几种继承方式

最新推荐文章于 2022-07-23 11:06:47 发布
最新推荐文章于 2022-07-23 11:06:47 发布
阅读量134 收藏
点赞数
分类专栏： js 继承 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108738729
版权
js 同时被 2 个专栏收录
76 篇文章 2 订阅
订阅专栏
继承
3 篇文章 0 订阅
订阅专栏

几种继承方式

1.构造函数继承和原型继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 面向对象: 构造函数、原型、实例。 
        // 面向对象中还有一个很重要的概念：继承。
        // 继承在JS代码中,指的是类与类之间的关系.

        // 人类 
        // function People(name, age, sex) {
        //     this.name = name;
        //     this.age = age;
        //     this.sex = sex;
        // }
        // People.prototype.sayHello = function() {
        //     console.log("大家好,我是" + this.name + ",我今年" + this.age + "岁, 我是" + this.sex + "的")
        // }
        // var p = new People("小红", 13, '女');


        // // // 小孩类
        // function Child(name, age, sex, height, weight) {
        //     //构造函数式继承
        //     People.call(this, name, age, sex);
        //     this.height = height;
        //     this.weight = weight;
        // }
        // // Child想要复用People的方法 那么就需要能够访问到People的原型 
        // // 方式1 直接把Child的原型更改为People的原型
        // //原型继承
        // Child.prototype = People.prototype;
        // // 补回constructor属性
        // Child.prototype.constructor = Child;
        // // 添加新的方法
        // Child.prototype.jump = function() {
        //     console.log('jump~~~~')
        // }
        // var c = new Child("小明", 12, "男", 150, 100);

        // c.sayHello();
        // c.jump();
        // p.jump();
        // 结论: 方式1  给子类添加方法之后 影响到了父类

        // 分析: 因为方式1 是将子类的原型与父类的原型设置为同一个地址 所以添加的时候会给该地址添加属性和方法 那么就会影响到父类的实例 那么有没有这样的一个对象同时符合: 1 是一个对象 2 能够访问父类的方法 3 改变的时候不会影响父类  结果发现:父类的实例符合这三个条件




        // 方式2
        function People(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        People.prototype.sayHello = function() {
            console.log("大家好,我是" + this.name + ",我今年" + this.age + "岁, 我是" + this.sex + "的")
        }
        var p = new People("小红", 13, '女');


        // 小孩类
        function Child(name, age, sex, height, weight) {
            People.call(this, name, age, sex);
            this.height = height;
            this.weight = weight;
        }

        Child.prototype = new People(); //采用这种继承方式  可以实现继承 但是child实例中里面有多余的属性
        // 补回 constructor
        Child.prototype.constructor = Child;
        // 添加新方法 
        Child.prototype.jump = function() {
            console.log(" U jump I jump");
        }

        var c1 = new Child("小明", 12, "男", 150, 100);
        c1.sayHello();
        c1.jump();
        p.sayHello();
    </script>
</body>

</html>

2.1使用object.create();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 寄生式继承
        function People(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        People.prototype.sayHello = function() {
            console.log("大家好,我是" + this.name + ",我今年" + this.age + "岁, 我是" + this.sex + "的")
        }



        // 小孩类
        function Child(name, age, sex, height, weight) {
            People.call(this, name, age, sex);
            this.height = height;
            this.weight = weight;
        }
        Child.prototype = Object.create(People.prototype);

        var c = new Child("小明", 12, "男", 150, 100);
        c.sayHello();
        //这么写也不会多出多余的属性
        // Object.create 作用是根据一个对象作为原型 生成一个实例
    </script>
</body>

</html>

2.寄生式继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 构造函数执行的四步: 
        // 1 开辟一个新的空间
        // 2 与函数中的this绑定
        // 3 执行函数的代码
        // 4 返回this

        // 寄生式继承
        function People(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        People.prototype.sayHello = function() {
            console.log("大家好,我是" + this.name + ",我今年" + this.age + "岁, 我是" + this.sex + "的")
        }

        // 小孩类
        function Child(name, age, sex, height, weight) {
            People.call(this, name, age, sex);
            this.height = height;
            this.weight = weight;
        }

        // 实现继承
        function extend(father, child, methods) {
            // 定义一个空构造函数
            function F() {};
            // 将该构造函数的原型指向父类的原型
            F.prototype = father.prototype;
            // 将子类的原型指向这个空构造函数的实例 注：该实例没有自身属性 但是可以调用父类的方法
            child.prototype = new F();
            // 补回
            child.prototype.constructor = child;
            // 给子类添加新的属于子类自己的方法
            for (var i in methods) {
                child.prototype[i] = methods[i];
            }
        }


        extend(People, Child, {
            jump: function() {
                console.log("u jump i jump")
            }
        })

        var c1 = new Child("小明", 13, "男", 160, 200);
        var p = new People("小红", 13, '女');
        c1.sayHello();
        c1.jump();
        p.sayHello();
    </script>
</body>

</html>

3.ES6继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 构造函数执行的四步: 
        // 1 开辟一个新的空间
        // 2 与函数中的this绑定
        // 3 执行函数的代码
        // 4 返回this
        class People {
            constructor(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            sayHello() {
                console.log("大家好,我是" + this.name + ",我今年" + this.age + "岁, 我是" + this.sex + "的")
            }
        }

        class Child extends People {
            constructor(name, age, sex, height, weight) {
                // super必须写在第一条
                super(name, age, sex);
                this.height = height;
                this.weight = weight;
            }
            jump() {
                console.log("u jump i jump")
            }
        }



        var c1 = new Child("小明", 13, "男", 160, 200);
        var p = new People("小红", 13, '女');
        c1.sayHello();
        c1.jump();
        p.sayHello();
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
必须掌握的几种常见的继承方式
深谷逸风的博客
08-23 1310
写在前面 嗯，继承对于新手来说，总是会弄得焦头烂额，继承就像你的对象，你在等待你的对象，心里怕他不来，但是又怕他乱来，总是让你手足无措，希望本篇文章能让你掌握主动权，不再等待0.0 父类函数约定 // 先约定好一个超类，即我们要去继承的父类 // 虽然没有强行规定，但是默认约定构造函数名采用大驼峰命名规则 function Super (firstName) ...
函数的继承
weixin_38905666的博客
09-23 562
构造函数继承： 1，任何一个new出来的实例上都有了被new构造函数的方法，可以视为最基础的继承； 2.bind/call／apply继承(改变this指向继承，也叫构造函数继承)； 原型继承： 1.原型对象继承（prototype）：子.Prototype=父.prototype； 2.原型链继承：Child.prototype = new Parent();(child的prototype指向...
js两种定义函数、继承方式及区别
weixin_30527323的博客
08-20 116
一：js两种定义函数的方式及区别 1：函数声明： function sayA() { alert("i am A"); } 2：函数表达式： var sayB = function() { alert("i am B"); } 区别：code 前者会在代码执行之前提前加载到作用域中，后者则是在代码执行到那一行的时候才会有定义 二：js两种...
函数继承的方法举例 — 参考JavaScript（3版）
莉莉的博客
06-10 582
目录标题1.原型链标题2.借用构造函数标题3.组合式继承标题4.原型式继承标题5.几声式继承 标题1.原型链 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function () { return this.property; }; function SubType() { this.subproperty = false; } //inherit from
Javascript编程中几种继承方式比较分析
10-23
主要介绍了Javascript编程中几种继承方式比较分析,较为详细的分析了JavaScript继承的原理并对比分析了几种继承方式的实现技巧,需要的朋友可以参考下
Javascript中的几种继承方式对比分析
10-22
本文将探讨JavaScript中的几种继承方式，通过对比分析，帮助开发者理解它们的特点和适用场景。 首先，JavaScript虽然不是一种严格的面向对象语言，但其具备面向对象的特性，如对象、封装、继承和多态。随着Web开发...
Javascript中的几种继承方式对比分析_.docx
10-09
Javascript中的几种继承方式对比分析_.docx
继承的方式
gercke的博客
08-10 95
继承方式 一、原型链式 1. 基本思想：利用原型链实现继承 2. 实现 <script> Plane.prototype.fly = function() { console.log('fly'); } function Plane(name){ this.name = name||'普通飞机'; this.color = ...
JS - 六种继承方式
kelly0721的博客
05-06 288
JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
继承方式（6种）
忘川
09-11 378
JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 JS继承的实现方式 既然要实现继承，那么首先我们得有一个父类，代码如下： // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(...
继承的几种方法
qq_47433370的博客
07-23 1428
继承的六种方法
浅谈js中函数的继承方式
chi1130的博客
07-09 3826
～～ 回首往昔， 更近一步 ～～ 招式 1. ES5 构造函数继承 function Parent() { this.name = 'parent'; this.colors = ['black', 'yellow', 'red'] } function Child() { Parent.call(this); this.type = 'child'; } var q1 = ne...
继承的六种方式
ll_0801xyz的博客
10-18 4138
原型链继承 构造函数继承 组合继承 原型继承 寄生继承 寄生组合式继承
继承有几种方式，分别是什么？想要实现继承可以使用什么方法？
weixin_34303897的博客
01-09 3187
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 继承有几种方式，分别是什么？想要实现继承可以使用什么方法？ 】 【修真院xx（职业）小课堂】课题名称 开场语： 大家好，我是IT修真院XX分院第X期的...
函数继承
qq_34758991的博客
03-28 716
寄生组合继承
C++三种继承方式总结
yue_jijun的博客
07-18 6406
1.public,protected,private标号的访问范围。 public：可以被该类的函数，友元函数，子类函数访问，也可以由该类的对象访问。 protected:  可以被该类的函数，友元函数，子类函数访问，但不能被该类的对象访问。 private:  可以被该类的函数，友元函数访问，但不能被子类函数和该函数对象访问。 2.三种继承方法继承后子类属性的变化。 父类中的priva...
javascript有几种继承方式
最新发布
04-29
在JavaScript中，有以下几种继承方式： 1. 原型链继承：利用原型链实现继承。缺点是子类不能向父类构造函数传递参数。 2. 构造函数继承：在子类的构造函数中调用父类构造函数，并使用call或apply方法将父类的属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值