ES6的面向对象编程以及ES6中的类和对象

这篇具有很好参考价值的文章主要介绍了ES6的面向对象编程以及ES6中的类和对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、面向对象

1、面向对象

(1)是一种开发思想,并不是具体的一种技术

(2)一切事物均为对象,在项目中主要是对象的分工协作

2、对象的特征

(1)对象是属性和行为的结合体

(2)属性:体现对象的静态特征、

(3)行为:体现对象的动态特征(具体体现为函数/方法)

3、面向对象的三大特征

(1)封装性:对象时属性和行为的封装体

(2)继承性:在基类(父类)中已经定义的属性或行为,子类可以继承使用

(3)多态性:同一个信息传递给不同的对象呈现的效果也是不同的

二、ES6中的类和对象

1、类:在ES6中引入类的概念,使用class关键字进行定义

class 类名{

        属性

        方法

}

2、ES6中类和对象的关系

(1)类是对象的抽象:类抽取了对象的公共部分

(2)对象是类的实例化:对象是类的具体实例

3、ES6中类的构造函数

使用constructor作为类的构造函数,用于初始化对象。在定义类的时候若没有显式的定义constructor,js会自动生成一个无参的构造函数(constructor(){}) 

 class Student{
    constructor(id,name,age,sex){   //constructor用来初始化对象的属性
        this.id = id,
        this.name = name,
        this.age = age,
        this.sex = sex
    }
    show(){
       console.log(`学号:${this.id} 姓名:${this.name} 年龄:${this.age} 性别:${this.sex}`);
    }
}
let stu1 = new Student('001','小王',20,'男');
console.log(stu1);
stu1.show();

 ES6的面向对象编程以及ES6中的类和对象,JavaScript,es6,前端,ecmascript,javascript,开发语言

 注:通过类创建对象,new 类名([参数])

(1)创建对象时不能显式调用constructor,在new 类名()创建对象时,默认调用了constructor

(2)在定义类时若没有写constructor,则js会自动生成无参的constructor

三、ES6中类的继承

1、基类:被继承的类,也可称为父类或超类

2、子类:由基类派生的类,又称为派生类

3、继承的用法:通过extends关键字实现

class 父类名{

        构造方法

        普通方法

}

class 子类名 extends 父类名{

        构造方法

        普通方法

}

4、super关键字:代表是父类,在类的继承过程中访问父类的构造函数、普通函数

class Father{
    constructor(name,sex){
        this.name= name,
        this.sex = sex
    }
    display(){
        console.log(`姓名:${this.name} 性别:${this.sex}`);
    }
}

class Son extends Father{
    constructor(name,sex,address,phone){
        super(name,sex),
        this.address = address,
        this.phone = phone
    }
    show(){
        console.log(`姓名:${this.name} 性别:${this.sex} 地址:${this.address} 电话:${this.phone}`);
    }
}

let son1 = new Son('小黑','男','西安','13198302930')
son1.show();

ES6的面向对象编程以及ES6中的类和对象,JavaScript,es6,前端,ecmascript,javascript,开发语言

5、子类的普通方法与父类的普通方法同名时,子类方法覆盖父类的方法

类中的普通方法又称为实例方法或成员方法

        class Animal{
            eat(food){
                console.log(`${food}`);
            }
            sleep(){
                console.log('在睡觉');
            }
        }
        class Rabbit extends Animal{
            eat(){
                super.eat('兔子吃草')
            }
        }
        class Tiger extends Animal{
            eat(){
                super.eat('老虎吃肉')
            }
        }
        let rabbit = new Rabbit()
        rabbit.eat();
        rabbit.sleep();
        let tiger = new Tiger();
        tiger.eat();
        tiger.sleep();

ES6的面向对象编程以及ES6中的类和对象,JavaScript,es6,前端,ecmascript,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-705853.html

到了这里,关于ES6的面向对象编程以及ES6中的类和对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【ES6】JavaScript中的Symbol

    Symbol是JavaScript中的一种特殊的、不可变的、不可枚举的数据类型。它通常用于表示一个唯一的标识符,可以作为对象的属性键,确保对象的属性键的唯一性和不可变性。 Symbol.for()是Symbol的一个方法,它用于创建一个已经注册的Symbol对象。当使用Symbol.for()创建Symbol对象时,会

    2024年02月10日
    浏览(45)
  • ES6中的Class关键字和super()方法,使用详细(class类和super()方法)

    简介:在ES6中,我们可以使用class来定义类,并通过 extends 实现类的继承,然后在子类中,我们可以使用 super() 来调用父类的构造函数;今天来分享下class的使用详细。 1、 首先,使用class,定义一个父类; 2、 然后再定义一个子类, 通过ex

    2024年02月12日
    浏览(47)
  • 15 JavaScript ES6中的箭头函数

    15 JavaScript ES6中的箭头函数 什么是箭头函数 ES6中允许使用=来定义函数。箭头函数相当于匿名函数,并简化了函数定义。 基本语法 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=来定义函数,省去function。 函数的参数放在=前面的括号中,函数体跟在=后的

    2024年02月12日
    浏览(48)
  • 【ES6】 JavaScript 中的Object.assign

    Object.assign() 是 JavaScript 中的一个方法,它用于复制源对象的所有可枚举属性到目标对象。该方法会返回目标对象。 这是其基本用法: 在这个例子中,source 对象的所有可枚举属性都被复制到了 target 对象。 需要注意的是,Object.assign() 是浅复制(shallow copy),意味着如果源对

    2024年02月10日
    浏览(52)
  • JavaScript Es6_2笔记 (深入对象 + 内置构造函数 + 包装类型)+包含实例方法

    了解面向对象编程的基础概念及构造函数的作用,体会 JavaScript 一切皆对象的语言特征,掌握常见的对象属性和方法的使用。 了解面向对象编程中的一般概念 能够基于构造函数创建对象 理解 JavaScript 中一切皆对象的语言特征 理解引用对象类型值存储的的

    2024年02月12日
    浏览(47)
  • 【ES6】JavaScript 中的数组方法reduce

    reduce() 是一个 JavaScript 中的数组方法,它会对数组的每个元素执行一个提供的 reducer 函数,将其减少到一个单一的值。 这是 reduce() 的基本用法: 这里: callback 是一个用于每个数组元素的函数,接受四个参数: accumulator:累加器累加回调的返回值。它是上一次调用回调时返回

    2024年02月10日
    浏览(33)
  • 【JavaScript】探索ES6中的数组API:简洁高效的操作方式

    ES6 ( ECMAScript 2015 )是 JavaScript 语言的一个重要版本,为编写更加简洁、便捷和可读性更高的代码提供了很多新的特性和 API。想了解ES6所有新增API,可以跳转至我的另一篇博客:JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性 其中 数组相关的 API 也在 ES6 中得到了大大的增强,

    2024年02月09日
    浏览(50)
  • Scala的类和对象

    Scala 的类与 Java 的类具有非常多的相似性,示例如下:

    2024年02月05日
    浏览(44)
  • ES5 的构造函数和 ES6 的类有什么区别

    在JavaScript中,类和构造函数都被用来创建对象,接下来会从以下几点说说两者的区别: 构造函数使用函数来定义 类使用class来定义 ES6 的 class 可以看作是一个语法糖,这种写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 比如这是一个构造函数生成实

    2024年02月11日
    浏览(41)
  • 那些你不知道的类和对象的知识

    🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 🍉本篇简介::深入理解构造函数,介绍友元函数,内部类等等 金句分享: ✨努力不一定是为了钱,还有骨子里的自信与淡定✨ 前面,我们已经学习过

    2024年02月13日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包