JavaScript | Variable、Function、Module、Class (一)

函数

函数声明

function sayHello(){
    return "Hello JavaScript!!"
}

函数表达式

let sayHello = function() {
    return "Hello JavaScript!!"
}

函数、变量提升： 函数和变量都会被提升，且函数会被优先提升；提升的意思是只要有声明定义，那么先调用都可以。因为JS会把定义放到最前面去。

//变量提升
a = 1; b = 2;
console.log(a + " " + b); // 1 2
let a,b;
//函数提升
sayHello(); // Hello U!
function sayHello() {
    return 'Hello U!'
}

类: 定义类有两种方法,一种是声明类；一种是通过表达式来定义类

类声明（关键字为class）

class rectangle {
    constructor(width, height){
        this.width = width;
        this.height = height;
    }
}

​ 声明类的主要组成是class 关键字；类名；类体；构造函数

类表达式（类似于函数表达式，可以把匿名类或者有名类赋值给变量）

let rectangle = class {   //匿名类
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
}
console.log(rectangle.name) //'rectangle'

let rectangle = class rectangle2{ //非匿名类
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
}
console.log(rectangle.name) //'rectangle2'

类体包含项

constructor 构造函数类的基本组成，是每个类的必要组成，子类可以通过super() 关键字来调用父类的构造函数

class Animal {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

class Dog extend Animal {
    super();
}

let Dog1 = new Dog('heizi', 'one');
console.log(Dog1.name); //'heizi';

getter 类变量的动态执行

class Rectangle {
    constructor(width, height){
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.getArea();
    }
    
    getArea() {
       return this.width * this.height;
    }
}

const square = new Rectangle(100, 80);
console.log(square.Area); //'8000';

static variable and static function 静态变量和静态方法，不用实例化类可以直接访问的类变量和类方法，一般时工具函数。

class Rectangle{
    constructor(width, height){
        this.width = width;
        this.height = height;
    }
    
    static displayName = 'Rectangle';
    
    static getArea(){
        return this.width * this.height;
    }
}

const square1 = new Rectangle(40, 20);
console.log(square1.displayName); //undefined

const square2 = new Rectangle(60, 30);
console.log(square2.getArea(60,30)); //undefined

console.log(Rectangle.getArea(60,30)) //1800

模块 功能是按需要加载程序代码

export 变量和函数

export const name = 'module introduce';

export function draw() {}

export default

function sayHello() {
	return "Hello World!!"
}

export default sayHello;

import 变量和函数

import {name, draw} from './module.js';

import default

import sayHello from './module.js';
import {default as sayHello} from './module'; //实际上是

避免模块方法重名 as的应用

//三种方法，一种是在export时使用as,两种是在import时使用
// 第一种 export 时使用 as 重命名
function getArea() {
    return this.width * this.height;
}
export {getArea as getAreaMod} 
/**导入**/
import {getAreaMod} from './module.js'
// 第二种 import 时使用 as 重命名
import {getArea as getAreaMod} from './module.js';
// 第三种 import 时用module对象来区分
import * as module from './module.js';
module.getArea();  //调用

导出类

// square.js
class Square {
    constructor(width, height) {
		this.width = width;
         this.height = height;
    }
    
    draw() {
        ......
    }
}
export { Square }

//main.js
import {Square} from './square.js';
let square1 = new Square(30,20);
square1.draw();

合并模块

// shapes.js 在这个js中合并
export {Square} from './Square.js';
export {Triangle} from './Triangle.js';
export {Circle} from './Circle.js';

// main.js 引用
import {Square, Triangle, Circle} from './shapes.js';

动态加载模块

//main.js
button.addListener('click', () => {
    import('./shapes.js').then((mod) => {
        let square1 = new mod.Square(60, 30);
        square1.draw();
    })
})