查看更多精彩前端资源

---

class类

---

• 简述：
  
  
  • 提供了与传统面向对象语言相似的写法，减少其他程序员的学习门槛。
  • 在功能上相比es5基本没有什么区别。
    
    
• 特点：
  
  
  • 只能配合new关键字创建实例
  • 类名不会预解析
  • 类原型上的属性名可以使用表达式
  • 类原型上的属性默认是不可枚举的
    
    
  
  

语法

• 类的定义
  
  

[JavaScript] 纯文本查看 复制代码

class Person {

        // 以前的构造函数
        constructor(name, age, gender) {
                this.name = name;
                this.age = age;
                this.gender = gender;
        };

        // 以前原型上的方法
        say() {
                console.log(`${ this.name }今年${ this.age }岁了`);
        };

};

// 使用方式一样
let xiaoming = new Person('小明', 14, '男');
xiaoming.say();

• 静态方法
  

静态方法属于类自己,通过类名.方法名调用注意这里static关键字只能作用于方法,不能作用于属性

[JavaFX] 纯文本查看 复制代码

class Person {

        constructor() {
                Person.total++ ||  (Person.total = 1);
        };

        // 统计总人口,
        static getTotal() {
                return Person.total;
        };

};

let p1 = new Person;
let p2 = new Person;
console.log(Person.getTotal()); // 2

• 继承特性1 - 实例成员继承
  

通过extends关键字实现继承如果子类有构造器,必须添加super()调用父类构造器继承后子类实例便可使用父类实例的属性与方法

[JavaScript] 纯文本查看 复制代码

class Animal {

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

        eat() {
                console.log('都得吃啊！');
        };

};

class Person extends Animal {

        constructor(name, age, gender) {
                super(name, age, gender);
        };

        say() {
                console.log(`${ this.name }今年${ this.age }岁了`);
        };

};
let xiaoming = new Person('小明', 14, '男');
xiaoming.eat();
xiaoming.say();

• 继承特性2 - 静态成员继承
  

[JavaScript] 纯文本查看 复制代码

class Animal {

        static test() {
                console.log('来自父类的静态方法');
        };

};
class Person extends Animal {};
Person.test();

本质

• 类本质上还是一个函数
  
  

[JavaScript] 纯文本查看 复制代码

class Person {};
typeof Person; // function

• 类中的实例方法都定义在了原型中
  

[JavaScript] 纯文本查看 复制代码

class Person {
        eat() {
                console.log('吃吃吃');
        };
};
Person.prototype;

• 类中的静态方法都定义在了自身
  

[JavaScript] 纯文本查看 复制代码

class Person {
        static getTotal() {
                console.log('70亿');
        };
};
Person;

• 继承原理
  

[JavaScript] 纯文本查看 复制代码

class Animal {
        eat() {
                console.log('都得吃啊！');
        }

        static sleep() {
                console.log('睡');
        }
};

class Dog extends Animal {}

// 实现原理
Dog.prototype 继承 Animal.prototype,即子类原型 ==> 父类原型
Dog 继承 Animal,即子类 ==> 父类

模块

---

• es6新增了模块规范, 可惜目前的主流浏览器都不支持, 但未来它会统一模块化开发
• es6里的模块就是一个独立的文件, 该文件内部的所有变量, 外部无法获取,也就是说有了模块概念后就不会再存在全局变量
• 如果你希望在一个模块里调用另一个模块间的东西,需要使用import与export导入导出语法
  
  

webpack安装

• 因为浏览器还不支持es6模块特性,这里我们需要借助webpack工具把es6模块打包为浏览器可执行脚本
• webpack是模块打包工具,可把各种模块编写的代码打包成浏览器可直接运行的代码
• 安装命令: npm install -g webpack
• 测试命令: webpack -v
• 打包命令: webpack 打包入口文件名 输出文件名
  
  

导出导入具名变量

• 下面的代码演示了导出具名变量的两种方式与导入具名变量的两种方式
  
  

演示1

• 单个分别导出, 导出那个就在那个前面添加export关键字
  
  

[JavaScript] 纯文本查看 复制代码

export let year = 2017;
let month = 10;
let day = 28;
export function getDate() {
        return `${year}_${month}_${day}`;
}

• 单个按需导入, 导入什么就用什么变量接收
  

[JavaScript] 纯文本查看 复制代码

import { year, getDate } from './a.js';
console.log(year);                 // 2017
console.log(getDate());         // 2017_10_28

演示2

• 批量整体导出, 导出那个就在对象里面添加那个
  
  

[JavaScript] 纯文本查看 复制代码

let year = 2017;
let month = 10;
let day = 28;
function getDate() {
        return `${year}_${month}_${day}`;
}
export { year, month, day, getDate };

• 批量整体导入, 导入时随便起个变量名接收
  

[JavaScript] 纯文本查看 复制代码

import * as a from './a.js';
console.log(a.year);                 // 2017
console.log(a.getDate());         // 2017_10_28

导出导入默认值export

• 导出时必须使用default关键字来修饰, 且一个模块只能导出一个默认值
  
  

[JavaScript] 纯文本查看 复制代码

const cacheData = {};
export default function(key, val) {
        if(val) {
                cacheData[key] = val;
                return cacheData;
        }else  {
                return cacheData[key];
        }
};

import

• 导入时随便起个变量名接收
  
  

[JavaScript] 纯文本查看 复制代码

import cache from './cache.js';
cache('a', 10);
cache('a');      // 10