ES5构造函数实现继承和ES6中class的类继承

最新推荐文章于 2023-08-05 17:33:26 发布
最新推荐文章于 2023-08-05 17:33:26 发布
阅读量232 收藏
点赞数
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899452/article/details/124235045
版权

1.ES5构造函数实现继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象继承</title>
</head>
<body>
    <script>
        //手机
        function Phone(brand,price){
            this.brand=brand;
            this.price=price;
        }

        Phone.prototype.call = function(){
            console.log("我可以打电话");
        }
        //继承
        function SmartPhone(brand,prise,color,size){
            Phone.call(this,brand,prise);
            this.color=color;
            this.size=size;
        }
        //设置子集构建函数原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor=SmartPhone;

        //声明子类方法
        SmartPhone.prototype.photo=function(){
            console.log("我可以拍照");
        }

        SmartPhone.prototype.playGame=function(){
            console.log("我可以玩游戏");
        }

        const chuizi = new SmartPhone('锤子',1999,'黑色','5.5inch');
        console.log(chuizi);


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

2.ES6中class的类继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类继承</title>
</head>
<body>
    <script>
        class Phone{
            //构造方法
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            //父类的成员属性
            call(){
                console.log("我可以打电话");
            }
        }

        class SmartPhone extends Phone{
            //构造方法
            constructor(brand,price,color,size){
                super(brand,price);
                this.color=color;
                this.size=size;
            }
            //子类中独有的方法
            photo(){
                console.log("拍照");
            }
            playGame(){
                console.log("玩游戏");
            }
        }

        const xiaomi =new SmartPhone('小米',8888,'黑色','55inch');
        console.log(xiaomi);
    </script>
    
</body>
</html>
太累，耍一天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
继承行为在 ES5 与 ES6 中的区别详解
11-29
1. ES5使用构造函数和`prototype`对象模拟类和继承，而ES6引入了`class`和`extends`关键字，提供了更接近传统面向对象语言的语法。 2. ES5中子类必须通过`call`或`apply`调用父类构造函数，而在ES6中，通过`super`...
ES6 javascript中Class类继承用法实例详解
11-27
本文实例讲述了ES6 javascript中Class类继承用法。分享给大家供大家参考，具体如下： 1. 基本用法 Class 之间可以通过extends关键字实现继承， 这比 ES5 的通过修改原型链实现继承， 要清晰和方便很多。 class ...
es6 class继承用es5实现
weixin_34062329的博客
06-29 656
es5实现普通的继承 // 类的调用检测 检测实例是不是new出来的 function _classCallCheck(instance, constructor) { if (!(instance instanceof constructor)) { throw new Error('Class constructor Child cannot be invoked without new') ...
JS-继承的实现方式
weixin_46254175的博客
03-04 121
文章目录原型继承call继承寄生组合继承es6中class 原型继承 通过prototype把子类的原型绑到父类的实例上，子类就可以调用父类的公有属性和方法、私有的属性和方法。但是这种方式实现继承，无论父类中公有的属性和方法还是私有的属性和方法，都会变成子类公有的属性和方法，这样子类就可以重写父类的属性和方法，也有影响父类的其他实例。 function Parent(x){ this.x = x...
es5 / es6 使用class实现继承
weixin_40545119的博客
11-09 559
class User { constructor(username, password) { this.username = username this.password = password } login() { console.log('登录方法'); } } class Admin extends User { deletePe.
js继承
weixin_45670270的博客
09-23 142
js继承 1.原型链继承 将构造函数的原型设置为另一个构造函数的实例对象，这样就可以继承这个实例对象的所有属性和方法，然后就可以根据原型链继续往上寻找属性和方法。 //父类 function Father() { this.color = ['red', 'green', 'blue']; //设置属性 } //子类 function Son() { } Son.prototype = new Father(); //创建
es5的继承实现
weixin_33892359的博客
03-04 678
es6里可以直接用class实现继承,奈何es5没有,只能用其他方法实现继承了. 原型链实现 function Super(){ this.num=[1,2,3] } Super.prototype.show=function(){ console.log('show') } function Child(){} Child.prototype=new Super(); var c1=n...
es5 类与es6中class的区别小结
01-18
在es5中主要是通过构造函数方式和原型方式来定义一个类，在es6中我们可以通过class来定义类，今天整理一下它们的区别。 关于es5中定义类的方式，可以看这一篇Js的‘类’，我们这里主要聊es5类和es6中class类的区别...
JS面向对象编程——ES6 中class的继承用法详解
10-15
在ES5中，我们通常使用原型链来实现继承，通过`Object.create()`或修改`prototype`来达到目的。而在ES6中，`class`关键字提供了更加直观的继承方式。例如： ```javascript class Father { } class Son extends ...
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
11-27
- 在ES5中，我们需要手动定义一个构造函数来实现相同的功能： ```javascript function Person(name, age) { this.name = name; this.age = age; } ``` 2. **类的方法**： - 类中的方法（如`toString`）被...
es5实现继承 --- 组合继承
盖盖
04-12 394
在“前端之巅”公众号上看到的，地址：前端之巅 function Person(name) { this.name = name; this.gender = ["男", "女"]; } Person.prototype.sayHi = function() { console.log("Hi, This is ", t...
ES6中的class与继承
feixiang的博客
11-24 899
ES6中的class与继承ES5中的类ES6中的类ES5中的继承 （组合继承:原型链继承 + 借用构造函数)原型链继承借用构造函数继承组合式继承ES6中的继承class继承 ES5中的类 ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成 实例： ES6中的类 ES6引入了class（类）这个概念，通过class关键字可以定义类该关键字的出现使得javascript在对象写法上更加清晰，更像是一种面向对象的语言。 实例： 注意项： 1.在类中声明方法的时候，千万不要给该方
继承（构造函数和ES6的class类）
ShuaideryiP的博客
11-01 357
一、构造函数原型继承 <script> // 专门创建一个公共的构造函数，放公共的特征 function Person() { this.head = 1; this.legs = 2; this.eyes = 2; this.say = function() { console.log('say方法'); } this.eat = function() { console.log(
【JavaScript_2】js(ES5)中的六种继承方式
ryling_的博客
03-13 1203
先说一下ES5和ES6中继承的区别吧，ES5中主要就是利用原型、原型链、构造函数来搞，ES6中是利用class类继承。
在ES5和ES6中实现继承的方法
最新发布
前端小白的博客
08-05 554
通过extends关键字来实现继承，子类继承了父类的属性和方法。构造函数继承通过在子类构造函数中调用父类构造函数来实现继承，可以继承父类的属性。组合继承是将原型链继承和构造函数继承结合起来使用的方式，既继承了父类的属性和方法，又不共享父类实例的属性和方法。原型链继承是通过将子类的原型对象指向父类的实例来实现继承。Object.setPrototypeOf()方法可以将一个对象的原型指向另一个对象，从而实现对象的继承。)可以将一个对象的属性和方法复制到另一个对象上，从而实现对象的继承。
7种方法实现ES5中的继承
shao_xuan_的博客
11-17 5572
ES5中如何实现继承
使用ES5实现ES6的Class
前端开发博客
11-06 1664
关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步作者：happy137https://juejin.im/post/6844903886034042893ES5的寄生组合...
es5创建对象和es6的Class
zhm0303的博客
04-16 1722
es5创建对象的方式  有工厂模式，构造函数模式，原型模式和  组合使用构造函数模式+原型模式最常使用的模式是 组合使用 构造函数模式+原型模式，这样的好处是，每个实例可以保持独特的实例属性，也可以共有原型方法function Person(name,age){ this.name=name; this.age=age; } Person.prototype.sayName=functi...
ES5和ES6分别是如何实现继承的
weixin_44761091的博客
03-14 923
javascript的继承主要是依托其原型与原型链的概念来实现的。 嗯…先来补习一下有关原型与原型链吧。 一、名词解释 function FOO(){}; const f = new FOO(); 构造函数：用来初始化新对象的函数叫做构造函数。如示例中的FOO函数就是构造函数 实例对象：通过 new关键字创建出来的对象。如示例中的f就是实例对象 原型对象及protoType：构造函数有一个protoType属性，它指向实例对象的原型。常使用原型对象来实现继承 constructor：原型对象具有cons
ES5继承和ES6继承的方式和优缺点
05-19
ES5继承方式是通过原型链实现的，使用`Object.create()`方法创建...总的来说，ES5继承方式适用于简单的继承场景，ES6继承方式适用于复杂的继承场景，比如需要实现多层继承、需要修改父类方法或者需要调用父类构造函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值