ES6学习——面向对象和模块化

最新推荐文章于 2023-10-16 14:51:48 发布

一顾明月

最新推荐文章于 2023-10-16 14:51:48 发布

阅读量457

点赞数

文章标签： javascript html es6

本文链接：https://blog.csdn.net/weixin_48653292/article/details/120677824

版权

1.面向对象

是ES5的语法糖内部机制一样但是更简单了

1.构造函数

    ES5的构造函数 
function Animal(name,age){
 this.name = name;
 this.age = age;
   }
 let animal = new Animal('terry',12);

ES6的类
            class Animal{
                constructor(name,age){
                    this.name=name;
                    this.age=age;
                }
            }
            let animal = new Animal('terry',12)

            语法：
            class 为声明类的关键字，animal为类名首字母大写，采用驼峰式命名
            大括号称为类体，类体中可以包含【构造函数，成员属性，成员变量，成员方法，静态属性，静态方法，静态代码块（node16支持）】

2.实例

实例是通过构造函数创建的对象
plain object 纯对象

创造一个纯对象的方法

方法1.{}

方法2.newObject）

3.原型方法

                class Animal{
                    name;//放在成员自身中
                    sayName(){};//放在原型中
                }

4.构造函数方法-静态方法

class Animal{
sayAge(){

}
static foo(){//静态方法，通过类名调用

}
}

5.继承

                原型链继承：子构造函数的原型指向父构造函数的一个实例
                借用构造函数：function Dog(){
                    Animal.call(this,age,name)name,age,gender;
                    this.gender = gender
                }
                Dog.prototype = new Animal();
                Dog.prototype.constructor=Dog;

2.模块化

任何一个JS文件或一个目录都可以认为是一个模块，如果目录作为一个模块，那么，目录中应该出现package.json

1. package.json

是模块的清单⽂件，记录了当前模块的基本信息、依赖信息等

2. CommonJS模块化

社区提供的非官方
                1.模块的暴露
                模块内部的变量其他模块是无法访问的，如果想要其他模块进行访问，需要进行接口的暴露
                module.exports
                module 是一个对象，每个模块都有这个对象，exports属性用于将当前目录信息传递到其他模块，其默认值是一个空对象
                module.exports.xxx
                或者
                module.exports={}

                2.模块引用
                    require(模块)
                    1.当模块为自定义模块的时候，参数为文件路径
                    require('./a.js')
                    2.当模块为内置模块的时候，参数为模块名称
                    require('http')
                    3.当模块为第三方模块的时候，参数为模块名称，但是需要先进行模块的安装
                    $cnpm installaxios --save
                    require('axios')
                    模块引入的本质就是获取被引入模块中的module.exports属性
                3.单例模式只加载一次
                    1. 所有代码都运⾏在模块作⽤域，不会污染全局作⽤域。
                    2. 模块可以多次加载，但是只会在第⼀次加载时运⾏⼀次，然后运⾏结果就被缓存了，以后
                    再加载，就直接读取缓存结果。要想让模块再次运⾏，必须清除缓存。
                    3. 模块加载的顺序，按照其在代码中出现的顺序。

3.ES6 模块化

ES6模块化是官方提供的
如果想要nodejs 支持es6 模块化，nodejs要升级到14以上，在package.json添加一个配置项 type:'module'
模块暴露：
                export +声明
                多次使用，使用哪个变量暴露，就要使用哪个变量获取
                export default +
                仅可使用一次，可以使用任意变量名获取
                一个模块中，可以即使用export 又使用export default

export命令规定的是对外的接⼝，必须与模块内部的变量建⽴⼀⼀对应关系，也就是说外部
接⼝需要⽤这个接⼝名来引⽤。
var firstName = 'Michael';
var lastName = 'vicky';
export { firstName, lastName }; //列表导出
export { firstName as first, lastName as last}; //重命名导出
export var a = 3; //导出单个属性
export function multiply(x, y) { return x * y; }; //导出单个属性
//默认导出，一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 ex
export default {}
export default function foo(){}
var a = 1;
export a; //报错，因为没有提供对外的接口。应该export var a = 1; 或

模块导入
import aa from './a.js'

import * as person from './person.js' //导入整个模块内容
import {firstName,lastName} from './person.js' //导入多个接口
import {firstName as name} from './person.js' //重命名
import '/modules/my-module.js'; //运行整个模块而不导入任何值
import myDefault from './my-module.js'; // 导入使用export default导出的模块