JavaScript-ES6面向对象与闭包

最新推荐文章于 2023-10-24 15:17:02 发布

唉.

最新推荐文章于 2023-10-24 15:17:02 发布

阅读量285

点赞数

分类专栏： JavaScript 文章标签： JavaScript-ES6面向对象与闭包

本文链接：https://blog.csdn.net/weixin_44240370/article/details/96921154

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

- 面向对象

面向对象

在这里插入图片描述

1、构造函数

首先模拟一个弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 弹窗
         */
        class Person{
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            show() {
                alert(this.name)
            }
        }

        let p = new Person('zpw', 18);
        p.show();
    </script>
</head>
<body>

</body>
</html>

2、继承、封装、多态

继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 弹窗
         */
        class Person{
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            show() {
                alert(this.name)
            }
        }

        let p = new Person('zpw', 18);
        p.show();

        class Worker extends Person{
            constructor(name, age, job) {
                super(name,age);
                this.job = job;
            }
            show(){
                alert("666");
            }
        }
        let o = new Worker('zpw',18,'daza');
        o.show();
    </script>
</head>
<body>

</body>
</html>

3、闭包

底层：栈
高层：将函数当做对象处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bibao</title>
    <script>
        /**
         * 闭包思想：
         * GC，垃圾回收思路
         * 每一个方法有一个i，虽然是局部变量，但是由于我们通过onclick操作
         * 会不断使用，所以不会被删除持续存在
         */
        window.onload=function(){
            var aBtn = document.getElementsByTagName('input');

            for (var i = 0; i < aBtn.length; i++) {
                (function (i) {
                    aBtn[i].onclick = function () {
                        alert(i);
                    } ;
                })(i);
            }
        };
    </script>
</head>
<body>
    <input type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
</body>
</html>

闭包实用性：闭包可以对局部变量进行保存，本质是将方法封装为一个对象。

4、ES6的模块化

使用类似babel的工具webpack将js脚本进行一定的编译，然后就可以就可以令浏览器识别和支持了
实例：
（1）创建一个mod.js文件，模拟它的导入，导入到另一个index.js文件内，再由html进行可视化
在这里插入图片描述

很普通的一个程序，运行之后发现没有响应，可以判断出浏览器的确不支持ES6的模块化。
下面介绍一个打包的js的工具，Webpack

<1>、Webpack

安装Webpack

1、安装npm
http://nodejs.cn/download/
下载10.*版本的安装包进行安装，安装之后添加系统变量到PATH内
2、安装Webpack

<2>、基本操作

创建一个webpack.config.js作为打包js的配置文件设定

const path=require('path');

/**
 * webpack能做的不仅仅是打包，更加适用于项目管理
 * 按照nodejs的规定，必须在相对路径加上./
 * @type {{output: {path: void | Promise<void> | Promise<any>, filename: string}, entry: string}}
 */
module.exports={
    mode: 'production',//生产模式，另外的还有开发模式
    entry: './index.js', //打包的入口
    output: {
        path: path.resolve(_dirname,'build'),
        //dirname是一个魔术变量，代表当前目录，然后填入第二级变量路径，换句话说绝对路径和相对路径都给了
        filename: 'bundle.js'
    }
};

然后来到目录下使用webpack
webpack编译：
1.entry是入口地址
2.output是输出地址
3.path：绝对路径
4.filename：文件名
5.mode:模式
6.所有当前目录之前加上./

<3>、export和import

export：
export let a = xx；定义一个变量但是可以更改
export const a =xx;定义一个变量无法修改

export(xxx,xxx,xxx)用于集体输出

export function xxx(){}

export class xxx(){}
export default xx;

import

import * as mod from “./xxx”;

import {a,b,c} from “./xxx”;

import xxx from ‘./mod’;引入默认成员

import "./xxx"引入默认的模块代码，不引入内部成员

异步引入

let promise = import("./mod2")像广告之类的不着急加载的东西为了不占用主服务器的内存所以异步引入

假定mod2.js这样引入一个qq变量为abc
在这里插入图片描述
然后在index.js内进行import异步导入

唉.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-ES6面向对象与闭包

文章目录面向对象1、构造函数2、继承、封装、多态继承3、闭包4、ES6的模块化<1>、Webpack安装Webpack<2>、基本操作<3>、import和export面向对象1、构造函数首先模拟一个弹窗<!DOCTYPE html><html lang="en"><head> <meta char...
复制链接

扫一扫

专栏目录