ES6新特性总结函数类模块化
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6新特性总结函数类模块化相关的知识，希望对你有一定的参考价值。
ES6新特性总结（4）函数、类、模块化
1 函数
1.1 函数形参的默认值
在很多情况下，需要在使用函数的时候给定默认参数，在ES5标准中一般会这样写：
function fun(name, age) //设置一个函数，有2个参数
//如果name的类型不为undefined，那name还是name，否则为张三
name = typeof name !== "undefined" ? name : "张三";
//如果age的类型不为undefined，那age还是age，否则为20
age = typeof age !== "undefined" ? age : 20;
//输出name，age
console.log(name, age);
fun(); //张三 20
fun("李四"); //李四 20
fun("王五", 3); //王五 3
1.2 函数形参不定参数
在很多情况下，使用函数传参的时候，形参的数量是不固定的，这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取，此时会把所有参数放在arguments中。
function fun()
console.log(arguments);
console.log(arguments[0]); //第一个参数
console.log(arguments[1]); //第二个参数
console.log(arguments[2]); //第三个参数
fun("张三", 20, "178cm");
输出结果为：
[Arguments] ‘0’: ‘张三’, ‘1’: 20, ‘2’: ‘178cm’
张三
20
178cm
1.3 箭头函数
箭头语法最大的特点是有箭头“=>”号，当然箭头语法有很多变式写法。
1、没有参数，用括号代替
let fun = () => "张三";
2、一个参数，括号可以省略
let fun = arg => "李四";
3、多个参数
let fun = (arg1, arg2) => arg1 + arg2;
console.log(fun(1, 3));
4、利用箭头语法里隐式返还的时候需要注意对象的情况，需要注意如下错误情况：
let fun = () =>
name: "张三",
age: 20
这个代码初步感觉是返还一个对象，但是这里的大括号和函数里的大括号在含义上有冲突，系统会认为大括号是函数里的括号，而不是对象里的括号，导致报错，正确形式为：
let fun = () => (
name: "张三",
age: 20
)
console.log(fun()); // name: '张三', age: 20
5、箭头函数里没有this绑定，如下代码，this指向对象本身。
let obj =
id: 2,
fun: function ()
console.log(this.id);
obj.fun(); //2
上面代码可以打印出id为2，this指向了obj，所以this.id可以取得obj.id。如果改成箭头语法会发现，函数中this指向改变了，代码如下：
let obj =
id: 2,
fun: () =>
console.log(this.id);
obj.fun(); //undefined
这里发现this.id获取不到值，原因是箭头函数没有this绑定，箭头函数中的this会指向最近的上层this，所以这里this的指向是window，所以最终取不到this.id。
6、使用箭头语法的时候没有隐藏参数arguments的绑定，代码如下：
let fun = (arg1, arg2) =>
console.log(arguments);
return arg1 + arg2;
fun();
2 类（class）
2.1 类的概述
在ES5标准中通过构造函数来模拟类的功能，一般会定义一个构造函数，把一类功能做封装，通过new运算符来调用。
function Person(name)
this.name = name;
this.age = 20;
Person.prototype.fun = function ()
console.log("fun...");
let person = new Person("张三");
console.log(person.name, person.age); //张三 20
person.fun(); //fun...
在ES6标准中提供class关键字来定义类，在写法上更简洁、语义化更强。如下：
class Person
constructor(name)
this.name = name;
this.age = 20;
fun()
console.log("fun...");
let person = new Person("张三");
console.log(person.name, person.age); //张三 20
person.fun(); //fun...
ES6支持通过getter、setter在原型上定义属性。创建getter的时候需要用关键字get；创建setter的时候需要用关键字set。例如：
class Person
constructor(name)
this.name = name;
get name()
return this._name;
set name(newName)
this._name = newName;
let p1 = new Person("张三");
console.log(p1.name); //利用get获取当前的name，输出：张三
p1.name = "李四"; //利用set修改当前的name
console.log(p1.name); //利用get获取修改后的name，输出：李四
2.2 静态成员
在ES5标准中的静态成员，可以通过如下方式实现：
function Person(name)
this.name = name;
this.age = 20;
Person.num = 10; //静态属性
Person.fun = function () //静态方法
console.log("fun...");
在ES6标准中提供static关键字类声明静态成员。
class Person
static num = 20; //静态属性
constructor(name)
this.name = name;
static fun() //静态方法
console.log("fun...");
console.log(Person.num); //20
Person.fun(); //fun
2.3 类的继承
在ES5标准中可以通过call、apply、bind来实现构造函数的继承，实现方式如下：
function Father(name)
this.name = name;
this.age = 50;
function Son(name)
Father.call(this, name);
Father.apply(this, [name]);
Father.bind(this)(name);
this.height = "178cm";
上述方式可以实现构造函数的继承，但是如果有方法在Father原型上实现，还需要考虑原型的继承，单纯的原型赋值继承还会涉及传址问题，所以实现起来比较繁琐。
ES6标准中类的继承：通过extends关键字实现。
class Father
constructor(name)
this.name = name;
fun()
console.log("fun...");
class Son extends Father
constructor()
super();
hobby()
console.log("喜欢打游戏");
let son = new Son();
son.fun();
在继承中需要调用super()方法继承父类的构造方法。super()在使用过程中需要注意以下两点：
A、在访问this之前一定要调用super()。
B、如果不调用super(),可以让子类构造函数返还一个对象
3 模块化
ES6的模块化分为导出（export）与导入（import）两个模块：
1、export的用法
在ES6中每一个模块即是一个文件，在文件中定义的变量、函数，对象在外部是无法获取的。如果希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（导出）。
（1）导出一个变量
①先新建test.js文件，在文件中写入以下代码：
export let myName = "刘备";
②再创建index.js文件，在该文件中以import的形式将这个变量进行引入：
import myName from "./test.js";
console.log(myName); //输出：刘备
（2）导出多个变量，可以将这些变量包装成对象进行模块化输出
①先新建test.js文件，在文件中写入以下代码：
let myName = "橘猫吃不胖"
let myAge = 90;
let myfun = function ()
return `我是：$myName，我的年龄：$myAge`;
export
myName,
myAge,
myfun
②在index.js文件中，以import的形式将这个变量进行引入：
import myName, myAge, myfun from "./test.js";
console.log(myName); //橘猫吃不胖
console.log(myAge); //90
console.log(myfun()); //我是：橘猫吃不胖，我的年龄：90
（3）导出时重命名变量：通过as来进行操作
①在test.js文件中写入以下代码：
let myName = "橘猫吃不胖"
let myAge = 90;
let myfun = function ()
return `我是：$myName，我的年龄：$myAge`;
export
myName as name,
myAge as age,
myfun as fn
②在index.js文件中输入以下代码：
import name, age, fn from "./test.js";
console.log(name); //橘猫吃不胖
console.log(age); //90
console.log(fn()); //我是：橘猫吃不胖，我的年龄：90
（4）导入整个模块：import * as 名字 from 文件
在index.js中输入以下代码：
import * as info from "./test.js";
console.log(info.name); //橘猫吃不胖
console.log(info.age); //90
console.log(info.fn()); //我是：橘猫吃不胖，我的年龄：90
2、默认导出（export default）
（1）一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。
①在test.js文件中写入以下代码：
export default function ()
return "默认导出一个方法";
②在index.js文件中写入以下代码：
import myFun from "./test.js" //注意这里默认导出不需要用
console.log(myFun()); //默认导出一个方法
（2）可以将所有需要导出的变量放入一个对象中，然后通过export default进行导出
①在test.js文件中写入以下代码：
export default
myFn()
return "默认导出一个方法";
,
myName: "橘猫吃不胖"
②在index.js文件中写入以下代码：
import obj from "./test.js";
console.log(obj.myFn()); //默认导出一个方法
console.log(obj.myName); //橘猫吃不胖
（3）混合导出
①在test.js文件中写入以下代码：
export default function ()
return "默认导出一个方法";
export let myName = "橘猫吃不胖";
②在index.js文件中写入以下代码：
import myFn, myName from "./test.js";
console.log(myFn()); //默认导出一个方法
console.log(myName); //橘猫吃不胖
3、重命名export和import
如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，可以这样做：
在test1.js文件中代码如下：
export let myName = "我来自test1.js";
在test2.js文件中代码如下：
export let myName = "我来自test2.js";
在index.js文件中代码如下：
import myName as name1 from "./test1.js";
import myName as name2 from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js
以上是关于ES6新特性总结函数类模块化的主要内容，如果未能解决你的问题，请参考以下文章