es5继承 es6继承

最新推荐文章于 2021-11-18 22:06:24 发布
最新推荐文章于 2021-11-18 22:06:24 发布
阅读量134 收藏
点赞数
分类专栏： 每日一点 文章标签： es6 javascript vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29721837/article/details/108114556
版权 
<!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、父类新增原型方法/原型属性，子类都能访问到
         * 3、简单，易于实现
         * 缺点：
         * 1、创建子类的时候无法向父类构造函数传参
         * 2、无法实现多继承
         * 3、来自原型对象的所有属性被所有实例共享
        */
        // 原型链继承

        function Super(name){
            this.name = name;
        }
        Super.prototype.getName = function(){
            return this.name;
        }

        function Sub(){}
        Sub.prototype = new Super('李先生');
        let a = new Sub();
        console.log(a.getName())
        
        /**
         * 原型链继承
         * 优点：
         * 1、解决原型链继承中子类实例共享父类引用属性的问题
         * 2、创建子类实例时，可以向父类传递参数
         * 3、可以实现多继承（call多个父类对象）
         * 缺点：
         * 1、实例并不是父类的实例，只是子类的实例
         * 2、只能继承父类的实例属性和方法，不能继承原型属性/方法
         * 3、无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
        */
        // 构造函数继承 apply和call

        function Super(name){
            this.name = name;
            // this.getName = function(){
            //     return this.name;
            // }
        }
        Super.prototype.getName = function(){
            return this.name;
        }
        function Sub(){
            Super.apply(this, arguments);
        }

        let a = new Sub('李先生');
        console.log(a)
        console.log(a.getName()); // 报错

        /**
         * 实例继承
         * 优点：不限调用方式
         * 缺点：1、实例是父类的实例 不是子类的实例
         * 2、不支持多继承
        */
        function Sub(){
            var instance = new Super();
            instance.name = name || 'xx';
            return instance;
        }

        /**
         * 拷贝继承
         * 优点：支持多继承
         * 缺点：1、效率低，内存占用高因为要拷贝父类的属性
         * 2、无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）
        */
        function Sub(){
            var instance = new Super();
            for(let p in instance){
                Cat.prototype[p] = instance[p];
            }
        }

        /**
         * 组合继承
         * 优点：
         * 1、弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
         * 2、既是子类的实例，也是父类的实例
         * 3、不存在引用属性共享问题
         * 4、可传参
         * 5、函数可复用
         * 缺点：
         * 1、调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）
        */
        function Sub(){
            Super.apply(this, arguments);
            this.name = name;
        }

        Sub.prototype = new Super();
        /**
         * 组合寄生式继承
         * 通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点
        */
        function Sub(){
            Super.apply(this, arguments);
            this.name = name;
        }

        (function(){
            // 创建一个没有实例方法的类
            var instance = function(){};
            instance.prototype = Super.prototype;
            //将实例作为子类的原型
            Sub.prototype = new instance();
            Sub.prototype.constructor = Sub;
        })()

        /**
         * es6 class extends继承
         * es5中apply和call底层也是通过prototype来实现继承的
         * 区别：
         * 1、class 声明会提升，但不会初始化赋值
         * 2、class 声明内部会启用严格模式。
         * 3、class 的所有方法（包括静态方法和实例方法）都是不可枚举的。
         * 4、class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。
         * 5、必须使用 new 调用 class。
         * 6、class 内部无法重写类名。
         * 最主要的区别：
         * 1、ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）
         * 2、ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this
         * 3、.ES5的继承时通过原型或构造函数机制来实现。
         * 4、.ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。
         * 因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。
         * 
　　　　  * 
        */

        class Super {
            constructor(name){
                this.name = name;
            }
            getName(){
                return this.name;
            }
        }

        class Sub extends Super {
            constructor(name, age){
                super(name);
            }
        }

        let son = new Sub();



    </script>
</body>
</html>

 

eazdp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES5和ES6继承
yangyang的专栏
05-06 644
ES5常用七种继承方案和ES6的类继承，有八种继承方案。 ES5： 原型链继承、借用构造函数继承、组合继承、 原型式继承、寄生式继承、寄生组合式继承、 混入方式继承多个对象 ES6： 类继承extends 1.原型链继承 原型链继承就是SuperType的原型指向SuperType的实例，那么就可以继承SuperType原型链上方法。 继承的本质就是复制，即重写原型对象，代之以一个新类型的实例。 ...
继承行为在 ES5 与 ES6 中的区别详解
11-29
在ES5和ES6中，继承实现的方式有所不同，导致了在使用时的行为差异。本文将深入探讨这两种方式的区别。 首先，让我们回顾一下ES5的继承模式。在ES5中，没有内置的类或继承关键字，而是通过模拟类的概念来实现。常见...
ES5与ES6的继承
Joe_yuqiao的博客
10-10 343
ES5 的继承 ES5 的继承是通过构造函数和原型来实现的 1、利用call修改this指向来继承父构造函数的属性方法 // 1. 父构造函数 function Father(uname, age) { // 父构造函数内的this指向父构造函数的对象实例 this.uname = uname; this.age = age; } // 2 .子构造函数 function Son(uname, age, score) { /
es5继承与es6继承
转身
02-02 188
es5中的继承方式： 1. 原型链继承 缺点：1. 创建实例时无法像父类构造函数传递参数； 2. 因为指定了原型，所以不能实现多继承； 3. 父类构造函数上的属性被所有子类共用，给原型上的属性赋值会改变其他子类的属性值； // es5 const Parent = function (name, ag...
ES5与ES6继承.pdf
最新发布
02-26
#### 一、ES5继承机制解析 在ES5中，实现继承主要依赖于原型链（prototype chain）。这种继承机制的核心在于构造函数、原型对象以及实例对象之间的关系。 1. **构造函数**： - 在ES5中，通过构造函数创建对象是最...
React中ES5与ES6写法的区别总结
08-30
而在 ES6 里，我们通过定义一个继承自 React.Component 的 class 来定义一个组件类，像这样： ``` // ES6 class Photo extends React.Component { render() { return ( ); } } ``` 最后，让我们看看给组件定义...
ES5和ES6 实现继承方式
weixin_38382659的博客
06-17 825
在ES5 中：通过原型链实现继承的，常见的继承方式是组合继承和寄生组合继承； 在ES6中：通过Class来继承 组合继承：结合了构造函数和原型链继承 在子类构造函数中 调用父类构造函数，并通过 call 改变 this 的指向 ，继承了父类的属性 通过 new 一个父类的实例作为子类构造函数的原型prototype ，原型链方式来继承父类的方法 function Parent() { ...
JavaScript --- 继承总结
wzg0817的博客
05-18 165
ES5中的继承 一、 原型链继承 原型链继承的原理：直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承。 // 父类 function fat () { this.name = 'aqing' } // 父类上的原型方法 fat.prototype.getName = function() { return this.name } // 子类 function child () {} // 子类的原型对象方法指向
ES5、ES6中继承的实现
王龙楷
08-03 4149
继承在JavaScript中也是比较重要的概念。如果仔细讲解会需要比较多的篇幅，所以这里我就列举两种使用比较多，比较被推荐的继承写法。在JavaScript中，实现继承的最根本的思想肯定是原型链，不管怎样都离不开它，所以如果你对原型链理解非常好，那么继承对于你来说只是代码层面的事。 ES5中的两种非常经典的继承 第一种：组合继承 指的是将原型链和构造函数的技术组合到一起来实现继承。其...
【javascript】es5es6类的继承详细总结
不忘初心，坚定道路！
10-12 336
背景 以前也听过什么对象冒充继承，什么原型继承的，感觉还是太乱，特此总结一下。 代码 function Animal(){ this.name = 'yehuozhili' } Animal.prototype.say = function(){ console.log('say'); } function Tiger(){ Animal.call(this)//继承调...
ES5的继承
F-Prometheus的博客
04-29 512
原型链实现继承 基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，即让原型对象等于另一个类型的实例（即要继承的对象的实例） 原型链式继承 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = funct...
ES5实现继承
m0_61700036的博客
11-18 465
目录 ES5实现继承 1、原型链继承 2、 构造函数继承 3、组合式继承 4、寄生式组合继承 ES5实现继承 原型链的核心只需要记住三点： 每个对象都有__proto__属性，该属性指向其原型对象，在调用实例的方法和属性时，如果在实例对象 上找不到，就会往原型对象上找 构造函数的prototype属性也指向实例的原型对象 原型对象的constructor属性指向构造函数 1、原型链继承 原型链继承的原理很简单，直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往
JavaScript里ES5的继承
hfdxmz_3的博客
05-18 246
1 class Father{ 2 3 constructor(a){ 4 console.log(a); 5 } 6 play(){ 7 console.log("aaa"); 8 } 9 static run(){ 10 console.log...
ES5实现类的继承
Bermida的博客
05-16 828
假设有一个Animal类和一个Dog类，Dog要继承自Animal 在ES6中，我们可以通过extends关键字来实现继承 class Animal { sleep(){ console.log("睡觉"); } } class Dog extends Animal { // Dog会继承Animal原型链上的所有方法和属性 sound(){ console.log("汪汪"); } } const dog = new Dog(); dog
重温前端之es5的继承方式
imoo的笔记
08-31 154
原型链继承 核心：设定其原型指向Student.prototype = new Person(); 缺点：共享父类引用属性的值 构造函数继承 核心：在子类构造函数中使用Person.call(this) 缺点：只能继承构造函数的属性 组合继承 核心：在子类构造函数中使用Person.call(this)，设定其原型指向Student.prototype = new Person() 缺点：调用了两次构造函数 原型式继承 核心：封装函数容器 function content(obj) {
js继承的多种方式
qq_29910567的博客
10-09 126
《JavaScript高级程序设计》提到了6中继承方式： 1.原型链继承 2.借用构造函数（经典继承） 3.组合继承 4.原型链继承 5.寄生式继承 6.寄生组合式继承 原型链继承 // 原型链继承 function Person(){ this.name = 'weihao'; } Person.prototype.getName = function(){ console.log(this.name)
ES5、ES6的四种继承方法
L863683305的博客
01-27 1149
ES5、ES6的四种继承 众所周知，在ES6之前，前端是不存在类的语法糖，所以不能像其他语言一样，使用extends关键字就搞定继承关系，需要一些额外的方法来实现继承。 一. 原型链继承 function Parent(){ this.name = 'mortal' } Parent.prototype.getName = function(){ console.log(this....
ES5 和 ES6区别
03-29
4. 类和继承：ES6 引入了 class 和 extends 关键字，使得 JavaScript 可以像传统面向对象语言一样使用类和继承。 5. 解构赋值：ES6 引入了解构赋值，可以方便地从对象或数组中取出值赋给变量。 6. Promise：ES6 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值