前端小白的学习之路(ES6 三)

最新推荐文章于 2024-11-12 11:47:35 发布

吃清心的椰羊

最新推荐文章于 2024-11-12 11:47:35 发布

阅读量1.2k

点赞数 19

文章标签：学习 es6 前端

本文链接：https://blog.csdn.net/weixin_245249828/article/details/136953748

版权

提示：类：class, 模块化:modules(基本概念)

一、类class

在 ECMAScript 6 (ES6) 中引入了类（class）的概念，它提供了一种更加简洁和面向对象的语法来定义对象和构造函数。类是一种模板，用于创建具有相同属性和方法的对象。其本质就是面向对象。

1.声明类

下面的例子中，Animal 是一个类，它有一个构造函数 constructor 和一个方法 eatfood。构造函数用于初始化对象的属性，而 speak 方法用于输出动物的名称。

一般把属性写在custructor中，把方法直接写在class中。

使用 class 关键字创建类，类的方法之间不需要使用逗号分隔。可以使用 new 关键字来实例化一个类，并调用类中定义的方法。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>

<body>


    <script>

        // 声明类
        class Animal {
            // 构造函数（固定的）
            constructor(n) {
                // 添加属性
                this.name = n;
            }
            // 类内部编写的自定义方法
            eatFood() {
                console.log(this.name + "在吃东西！")
            }
        }

        // 创建实例
        const cat  =  new Animal("猫");
        console.log(cat);//
        new Animal("猫").eatFood();
        new Animal("狗").eatFood();
        new Animal("羊").eatFood();
        new Animal("兔子").eatFood();


    </script>
</body>

</html>

2.类的继承

ES6 类还支持继承，可以通过 extends 关键字来实现类的继承。super 关键字用于调用父类的构造函数。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>
<body>


    <script>
        // 面向对象是一种写代码思想

        // 类  
            // 父类： 系统  System (版本信息,尺寸，显示版本)

            // 子类： 应用  App (名称，显示版本，显示名称)

            // 子类： 页面  Page(时间，显示版本，显示名称)


        // 代码：
        // 父类
        class System {
            constructor(author){
                this.version = "v1.0.0";
                this.author = author;
            }
            showVersion(){
                console.log("当前系统版本:"+this.version);
            }
        }

        // 子类App继承父类System
        // 利用 extends 继承父类的成员
        class App extends  System {
            // 构造函数
            constructor(author){
                // 超类方法
                super(author);//调用父类的构造函数
                // 添加当前类的属性
                this.name = "QQ";
            }
            // 显示名称
            showName(){
                console.log("应用名称:"+this.name);
            }
        }

        // 子类Page继承App
        class Page  extends App {
            constructor(author){
                super(author)
                this.time = "2024-03-22 18:00:00"
            }
        }


        // 创建System实例
        const system = new  System("zhangsan");
        console.log(system);//System {version: 'v1.0.0', author: 'zhangsan'}

        // 创建App的实例
        const app = new App("zhangsan");
        // app.showVersion();// 当前系统版本:v1.0.0
        // app.showName();//应用名称:QQ
        console.log(app);// App {version: 'v1.0.0', author: 'zhangsan', name: 'QQ'}


        // 创建Page的实例
        const page = new Page("zhangsan");
        // page.showVersion();
        // page.showName();
        console.log(page);// Page {version: 'v1.0.0', author: undefined, name: 'QQ', time: '2024-03-22 18:00:00'}

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

3.类的静态成员

类的静态成员是指与类本身相关联而不是与类的实例相关联的属性和方法。静态成员在类的实例化过程中不会被继承，而是直接通过类本身来访问。通过static设置。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>

<body>


    <script>

        // 静态成员不是给类实例使用的,而是直接给类使用
        class Animal {
            // 静态属性
            static name = "狮子动物";
            // 静态方法
            static showName() {
                console.log("这是" + Animal.name);
            }
        }

        // 创建实例
        const a1 = new Animal()
        console.log(a1);
        console.log(a1.name);//undefined

        // 由类直接引用或使用的属性和方法，叫做静态成员
        console.dir(Animal)
        console.dir(Animal.name)
        Animal.showName()


       

    </script>
</body>

</html>

4.私有属性

ES6 中引入了私有字段（private fields）的概念，可以使用 # 符号来定义私有属性。私有字段只能在类的内部访问，外部无法访问或修改。这种方式提供了真正意义上的类私有属性。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>

<body>


    <script>


        // 私有属性这个说法是这样的
        // 只能在当前类的内部使用的属性
        class App {
            // 声明私有属性
            #color = "红色";
            showColor() {
                console.log("这是~~~" + this.#color);
            }
        }
        const app = new App();
        console.log(app);
        app.showColor();


        // console.log(app.color);// undefined
        // console.log(app.#color);// 报错
        class Page extends App {
            constructor() {
                super();
            }
            getColor(){
                // console.log("我想得到颜色"+this.#color);// 报错
            }
        }
        const page = new Page();
        // page.showColor();
        // page.getColor();

    </script>
</body>

</html>

二、模块化(基本)

ES6 模块化是 ECMAScript 6 标准中引入的一种模块化系统，它提供了一种简洁且可靠的方式来组织 JavaScript 代码，并支持在不同文件之间共享和重用代码。

在 ES6 模块化中，一个文件就是一个模块，可以通过 export 和 import 关键字来导出和导入模块中的内容。

注意：export 和 import 这俩命令，不能直接在script中使用，往往是在webpack构建的项目工程中使用，目前，可以把script标签的type属性设置为module ，就可以使用export 和 import。

1.定义组件与引入组件

通过export定义组件

// math.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

通过import引入组件

// main.js
<script type="module">     
    import { add, subtract } from './math.js';
    console.log(add(5, 3)); // 输出 8
    console.log(subtract(5, 3)); // 输出 2

<script>

2.书写方式

1) 按需导出导入

模块功能分开书写，通过大括号导入需要的模块功能

//搜索模块

//search.js

export const search1 = ()=> { } 
export const search2 = ()=> { } 
export const search3 = ()=> { }

//项目中导入

import { search1 , search2 } from "./modules/search.js"

2) 全部导出导入

把全部模块功能写在一个对象中，直接引入这个对象，通过.来调用需要的模块功能

//banner.js

export default { init (){ } }

//项目中导入

import Banner from "./modules/banner.js"

3) 设置模块的别名

//导出：

// 定义对象 
const comp = {     name: "我是组件" }
// 导出时，设置对象的别名 
export { comp as 自定义名称 }; 
export { comp as aaa };

//导入：

<script type="module">     
    // 按需导入 ，使用自定义名称     
    import { aaa } from './modules/demo.js';     
    console.log(aaa);//{name: '我是组件'} 
</script>