Web前端系列之ES6核心编程完全解析

天涯幺妹

于 2024-07-27 18:28:16 发布

阅读量449

点赞数 10

分类专栏：毕业设计与项目实战 web前端技术项目实战文章标签：前端 ui javascript sublime text 前端框架 es6 vue.js

本文链接：https://blog.csdn.net/sinat_30844883/article/details/140738930

版权

毕业设计与项目实战同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

web前端技术

14 篇文章 0 订阅

订阅专栏

项目实战

4 篇文章 0 订阅

订阅专栏

内容导读

ES6中的类

ES6模块化编程

实战练习

一、ES6中的类(class）

ES6提供了更接近面向对象（javascript本质上是基于对象的语言）语言的写法，引入了class类这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

1.1 类的基本语法

//定义类
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Point，对应ES6的Point类的构造方法。

Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。

另外，方法之间不需要逗号分隔，加了会报错。

注意：生成类的实例对象的写法，要使用new命令。如果忘记加上new，像ES5函数那样调用Class，将会报错。

// 报错
let point = Point(2,3);
// 正确
let point = new Point(2,3);

1.2 constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

constructor() {}

注意：constructor方法默认返回实例对象（即this）

扩展：constructor方法默认返回实例对象（即this），但也可以指定返回另外一个对象。

class Point {
    constructor(x, y) {
        return new Date();
        //return Object.create(null);
    }
}
let p = new Point();   //返回为Date对象
console.log(p);

Constructor与普通构造函数的区别： 类的构造函数，不使用new是没法调用的，会报错。

这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
let p = Point(); //TypeError: Class constructor Point cannot be invoked without 'new'

1.3 this与class(原型)

class：类，是对象的模板（或者叫：原型）

this：当前对象，与java中的概念是相同的，但是，由于javascript语言自身的特点，关于class与this，还需要做进一步说明。

注意：在javascript中，在定义类完毕之后，还可以再添加属性和方法。

1.3.1 属性与方法添加到this上

class Point {
    constructor() { }
}
let p = new Point();
p.username = 'zhangsan';
console.log(p.username);   //zhangsan

上面代码中，Point类定义之后，给对象 p 又添加了一个username属性。这是完全可以的。

注意：此种方式，仅仅是给对象p添加一个属性，而不是给类添加一个属性。或者说此种方式，仅仅是给对象p的this添加一个属性，而不是给类添加一个属性。

class Point {
    constructor() { }
}
let p1 = new Point();
p1.username = 'zhangsan';
console.log(p1.username);   //zhangsan
let p2 = new Point();
console.log(p2.username);   //undefined

上面例子中，只给对象p1添加了username属性，但没有给类添加属性。所以，p2对象中并没有username属性。

1.3.2 属性与方法添加到类上

class Point {
    constructor() { }
}
Point.prototype.username = 'zhangsan';
let p1 = new Point();
console.log(p1.username);   //zhangsan
let p2 = new Point();
console.log(p2.username);   //zhangsan

上面代码中，使用 Point.prototype方式，给类添加属性。这样，类的所有对象（p1、p2）就都有username属性了。

在javascript中，每一个类都有一个prototype，它就是类的原型，类的所有实例共享一个原型。如果想访问这个原型，可以使用proto指针。

class Point {
 constructor() { }
}
let p = new Point();
console.log(p.__proto__);      //注意proto指针的写法
/**
 * 输出结果：
 * {constructor: ƒ}
 *  constructor: class Point  //这里证明：proto指针指向类的原型
 *  __proto__: Object
 */
class Point {
    constructor() { }
}
let p1 = new Point();
let p2 = new Point();
console.log(p1.__proto__===p2.__proto__); //这里证明：类的所有实例共享一个原型

实际上，由于ES5历史原因，程序员更喜欢称之为：属性与方法添加到原型上。

1.3.3 类的静态成员

class Point {
    constructor() { }
}
Point.username = 'zhangsan';
let p = new Point();
console.log(p.username);       //undefined
console.log(Point.username);   //zhangsan

上面代码中，直接使用 Point.username 方式给类添加一个属性，此种方式只是添加了一个静态属性，访问时，只能通过类名才能访问。

二、ES6中的模块化编程

2.1 为什么使用模块化

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>

上面是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中。

不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。

这种原始的加载方式暴露了一些显而易见的弊端：

（1）全局作用域下容易造成变量冲突

（2）文件只能按照javaScripe的书写顺序进行加载

（3）开发人员必须主观解决模块和代码库的依赖关系

（4）在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。

在 ES6 之后，ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

2.2 ES6模块化实现

模块功能主要由两个命令构成：export和import。

export命令用于规定模块的对外接口。

import命令用于输入其他模块提供的功能。

2.2.1 export 命令

export let firstName = 'Michael';
export let lastName = 'Jackson';
export let year = 1958;

上面代码中，使用export命令对外部输出了三个模块。

let firstName = 'Michael';
let lastName = 'Jackson';
let year = 1958;
export { 
    firstName as f,   //可以使用as关键字，重命名对外接口
    lastName, 
    year 
};

上面代码是export命令的另外一种写法。在export命令后面，使用大括号指定所要输出的一组变量。

它与前一种写法（直接放置在let语句前）是等价的，但是应该优先考虑使用这种写法。

因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

export function multiply(x, y) { 
   return x * y;
    };
export class Point { 
     constructor(x, y){
       this.x = x;        
       this.y = y;    }    
      toString() {        
         return this.x + ',' + this.y;    
        }
  };

export命令除了输出变量，还可以输出函数、类（class）。

2.2.2 import命令

1、使用export命令定义模块对外接口后，其他 JS 文件就可以通过import命令加载这个模块。

import { name, age, sex } from './module1.js';
console.log(name + '\t' + age + '\t' + sex);

上面代码的import命令，用于加载module1.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（ module1.js）对外接口的名称相同。

2、import命令可以使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

3、import命令具有提升效果，会提升到整个模块的头部，首先执行

foo();
import { foo } from './my_module.js';

上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

4、import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

// 报错
import { 'f' + 'oo' } from './my_module.js';
// 报错
let module = ‘./my_module.js';
import { foo } from module;
// 报错
if (x === 1) {
  import { foo } from './module1.js';
} else {
  import { foo } from './module2.js';
}

5、如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次

import './lodash.js';
import './lodash.js';

上面代码加载了两次lodash，但是只会执行一次。

6、import语句是 Singleton 单例模式

import { foo } from './my_module.js';
import { bar } from './my_module.js';
// 等同于
import { foo, bar } from './my_module.js';

上面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。

2.2.3 完整实例

注意：当使用本地file协议打开文件时，type="module" 会产生跨域请求，从而导致跨域失败。所以下面代码需要在服务器环境下运行。

1、profile.js文件

export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export function jia(x, y) {
    return x + y;
}
export function jian(x, y) {
    return x - y;
}
export class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return this.x + '\t' + this.y;
    }
}

2、app.js文件

import {firstName,lastName,year,jia,jian,Point} from './profile.js'
console.log(firstName + '\t' + lastName + '\t' + year);
console.log(jia(1,2));
console.log(jian(1,2));
let obj = new Point(1,2)
console.log(obj.toString());

3、index.html文件：

<script src="js/app.js" type="module"></script>

2.3 模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

// circle.js文件
export function area(radius) {
    return Math.PI * radius * radius;
}
export function circumference(radius) {
    return 2 * Math.PI * radius;
}
//main.js整体加载
import * as circle from './circle.js';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

2.4 export default 命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

1、案例解析

// export-default.js
export default function  () {
    console.log('foo');
}

// import-default.js
import customName from './export-default.js';
customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。

注意：

（1）一个js文件中，不能有两个export default命令。

（2）import命令后面，不使用大括号。因为只能写一个模块名。

2、export default命令用在非匿名函数前，也是可以的

// export-default.js
export default function foo() {
    console.log('foo');
}
// 或者写成
function foo() {
    console.log('foo');
}
export default foo;

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

3、网页中导入，注意一定要用type="module"

<script src="js/import-default.js" type="module"></script>

三、实战练习

1、ES6编程题
（1）建立名为exdemo.js的文件，在其中利用export关键字声明字符串型变量x、函数sum(x,y)实现求和功能、表示产品的default对象(具备pname和price两个属性)。
（2）在indemo.js文件里导入exdemo.js里的全部变量、函数和对象并运行。
（3）建立一个html文档，导入indemo.js并查看运行结果。
2、建立一个Person类，该类具备年龄age和姓名name两个属性，以及一个输出人员信息的方法toString()。声明两个人员对象并输出人员信息，尝试利用原型追加属性爱好hobby并赋值为“棋类”，重写toString()方法并输出两个对象的年龄、姓名和爱好信息。
3、ES6的module模块中，对下列语句的描述，错误的是( )
   A.export导出
   B.import导入
   C.export default默认导出
   D.import default默认导入
4、（选做题）构建并实现"超市订单管理系统管理平台"项目设计

更多内容请关注本站！

天涯幺妹

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Web前端系列之ES6核心编程完全解析

ES6提供了更接近面向对象（javascript本质上是基于对象的语言）语言的写法，引入了class类这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
复制链接

扫一扫

专栏目录