ES6完整版知识点总结三（已完结）

百年孤独html
134 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情。

整理ES6完整知识点，持续更新中......

函数拓展

1.函数参数的默认值

function demo(a=1,b=3){}

2. rest参数

 ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数

注意：rest参数必须放在函数形参的最后一位。 // Rest parameter must be last formal parameter

3.严格模式

    ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。一般把严格模式加在全局。

4.name属性

       函数的name属性，返回该函数的函数名
        function demo(){}
        demo.name // demo

5. 箭头函数

ES6 允许使用“箭头”（=>）定义函数

        语法：
            let demo = () => (123||{a:1},[1,2,3])
            let demo = () => {console.log('没有返回值的箭头函数')}
            let demo = a => a;
            let demo = (a,b) => { return a+b};

使用注意点：

  • (1)函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。箭头函数内部不自动产生this,而是使用定义箭头函数时所在位置的外层作用域中的this。
  • (2)不可以当作构造函数
  • (3)不能用作 Generator 函数
  • (4)不可以使用arguments对象,使用rest参数替代

class类

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

    - 语法：
        class Person{
            构造方法:默认实例化时会自动调用，做初始化
            constructor(name,age,sex){
                this.name = name;
                this.age =age;
                this.sex = sex;
            }
            say(){}
        }
    - 使用
        let obj = new Person('wei',25,'女');
  • 在class中定义的方法,是放在构造函数的原型上的
  • 类的内部所有定义的方法，都是不可枚举的
  • 一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加
  • 实例化class时，必须有new关键字，否则报错
  • 取值函数（getter）和存值函数（setter）
  • this指向问题
        1. ES6 模块中，this返回的是当前模块
        2. 单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined
        3. 如果类中的一个函数不管是通过实例化对象调用还是作为纯函数调用，我都想让函数中的this指向当前类的实例(当前模块)，处理方案有2种
            1. 在constructor方法中绑定this
                this.say = this.say.bind(this)
            2. 使用箭头函数
                say =()=>{}
  • 静态方法
       在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
          class Person{
            static all(){

            }
        }
        - 使用：
            Person.all()
        - 如果静态方法包含this关键字，这个this指的是类
  • 继承
        - Class 可以通过extends关键字实现继承
        - 语法： class A extends B{}
        - super
            子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象
            super() : 调用父类的constructor()

es6 module 模块化

ES6 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

  • export 导出命令
        export var num = 12;
        export {num}
        <!-- 重命名导出的模块 可以使用as关键字重命名-->
        export { num as num2}
  • import 导入命令 import {name} from './xx.js';

注意：name必须是xx.js中export导出的数据

import * as obj from './xx.js';( 把xx.js中所有export导出的数据取出来，然后放到obj对象上)

  • export default 导出命令

默认导出,一个js中只能出现一次: export default xx: 导出一个名称为default的模块

import 导入 export default模块语法： import A from './xx.js'

  • 使用webpack

安装：

npm i -S webpack webpack-cli webpack-dev-server

npm i -g webpack webpack-cli webpack-dev-server

 1.创建一个配置文件：webpack.config.js
 2.运行webpack命令,在code文件夹下运行 webpack ,然后按回车键
 3.在dist文件夹下创建一个index.html，在这个HTML中添加 <script src="build.js"></script>
 4.在运行一条命令：webpack-dev-server
 5.在浏览器中打开 http://localhost:XXXX/
avatar
文章
阅读
粉丝