本文详细介绍了JavaScript中的函数特性，包括默认参数、不定参数和箭头函数，并分析了箭头函数的this绑定和arguments问题。接着，讨论了ES5与ES6中类(class)的概念，包括构造函数、getter/setter、静态成员和继承。最后，阐述了ES6的模块化机制，包括export和import的多种用法，以及默认导出和重命名导入的实践。
一、函数
1、函数形参的默认值：在很多情况下,需要在使用函数的时候给定默认参数,在ES5标准中一般会这样写：
function fun(name,age,cb){
name = typeof(name !== 'undefined')?name: '张三'
age = typeof(age !== 'undefined')?age: 20
cb = typeof(cb !== 'undefined')?cb:function(){}
console.log(name,age);
}
fun("李四",0) 2、函数形参不定参数：在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments中。例如：
function fun() {
console.log(arguments);
console.log(arguments[0]); //第一个参数
console.log(arguments[1]); //第二个参数
console.log(arguments[2]); //第三个参数
}
fun('张三',20,'178com')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());(5)箭头函数里没有this绑定,如下代码，this指向对象本身
let obj = {
id: 2,
fun: function() {
console.log(this.id); // 输出：2
}
}
obj.fun()上面代码可以打印出id为2,this指向了obj,所以this.id可以取得obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下：
let obj = {
id: 2,
fun: ()=>{
console.log(this.id); //输出：undefined
}
}
obj.fun()这里发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是window,所以最终取不到this.id
(6)使用箭头语法的时候没有隐藏参数arguments的绑定,代码如下：
let fun = (arg1,arg2) => {
console.log(arguments); // arguments is not defined
return arg1 + arg2
}
fun()二、类(class)
1、在ES5标准中通过构造函数来模拟类的功能,一般会定义一个构造函数,把一类功能做封装,通过new运算符来调用。
function Person(name) {
this.name = name;
this.age = 20;
}
Person.prototype.fun = function() {
console.log("fun...")
}2、在ES6标准中提供class关键字来定义类,在写法上更简洁、语义化更强。如下：
class Person {
constructor(name){
this.name = name;
this.age = 20;
}
fun() {
console.log("fn...")
}
}
let zhangsan = new Person("张三");
console.log("zhangsan.name");
zhangsan.fun()3、ES6支持通过getter、setter在原型上定义属性。创建getter的时候需要用关键字get;创建setter的时候需要用关键字set。例如：
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
get name(){
return this._name
}
set name(newName){
this._name = newName
}
get age(){
return 20;
}
set age(newValue){
this._age = newValue
}
}
let p = new Person('张三',20);
console.log(p.age);4、静态成员
(1)在ES5标准中的静态成员,可以通过如下方式实现：
function Person(name){
this.name = name;
this.age = 20;
}
Person.num = 10; //静态属性
Person.fun = function() { //静态方法
console.log("fun...")
}(2)在ES6标准中提供static关键字类声明静态成员：
class Person{
static num = 20; //静态属性
constructor(name){
this.name = name;
this.age = 20;
}
static fun() { //静态的成员方法
console.log("fun...")
}
}
let p = new Person('张三');
Person.fun();
console.log(Person.num);5、类的继承
(1)在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下：
function Father(name) {
this.name = name;
this.age = 20;
}
function Son(name) {
Father.call(this,name);
//Father.apply(this,[name]);
//Father.bind(this)(name);
this.height = "178com";
}上述方式可以实现构造函数的继承,但是如果有方法在Father原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较繁琐
(2)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(),可以让子类构造函数返还一个对象
三、模块化
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)导出多个变量：可以将这些变量包装成对象进行模块化输出
let myName="姜子牙";
let myAge=90;
let myfn=function(){
return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
myName,
myAge,
myfn
}
/******************************接收的代码为**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是姜子牙！今年90岁了
console.log(myAge);//90
console.log(myName);//姜子牙(3)导出时重命名变量：通过as来进行操作
let myName="姜子牙";
let myAge=90;
let myfn=function(){
return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
myName as name,
myAge as age,
myfn as fn
}
/******************************接收的代码为**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是姜子牙！今年90岁了
console.log(age);//90
console.log(name);//姜子牙(4)导入整个模块
import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
console.log(info.fn());//我是姜子牙！今年90岁了
console.log(info.age);//90
console.log(info.name);//姜子牙2、默认导出(export default)
(1)一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。
/******************************导出**********************/
export default function(){
return "默认导出一个方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法(2)可以将所有需要导出的变量放入一个对象中，然后通过export default进行导出
/******************************导出**********************/
export default {
myFn(){
return "默认导出一个方法"
},
myName:"姜子牙"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);(3)混合导出
/******************************导出**********************/
export default function(){
return "默认导出一个方法"
}
export var myName="姜子牙";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),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);
console.log(name2);
3979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
