一，函数
函数基础，参考https://blog.csdn.net/a_horse/article/details/84341897
1,默认参数
- 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数
-
function fn(name,age=17){ console.log(name+","+age); } fn("Amy",18); // Amy,18 fn("Amy",""); // Amy, fn("Amy"); // Amy,17
-
- 使用函数默认参数时，不允许有同名参数
-
// 不报错 function fn(name,name){ console.log(name); } // 报错 //SyntaxError: Duplicate parameter name not allowed in this context function fn(name,name,age=17){ console.log(name+","+age); }
-
- null 值被认为是有效的值传递
-
function fn(name,age=17){ console.log(name+","+age); } fn("Amy",null); // Amy,null
-
- 还未初始化赋值的参数值无法作为其他参数的默认值
-
function f(x,y=x){ console.log(x,y); } f(1); // 1 1 function f(x=y){ console.log(x); } f(); // ReferenceError: y is not defined
-
2,不定参数
- 由...加上一个具名参数标识符组成
- 参数为一个数组，可以通过数组的方式来获取
-
function f(...values){ console.log(values); console.log(values[0]); console.log(values.length); } f(1,2); f(1,2,3,4); 打印： [ 1, 2 ] 1 2 [ 1, 2, 3, 4 ] 1 4
3,箭头函数
- 基本用法
-
//1,单参数，可以省略参数的（） var f = a => v; //等价于 var f = function(a){ return a; } //2,函数单条语句，可以省略{},但默认有返回值，只是省略了return var f = (a,b) => a+b; f(6,2); //8 //3,不省略{}，需要自己写return var f = (a,b) =>{ return a + b; }; console.log(f(6,2)); //8
-
- 返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
-
// 报错 var f = (id,name) => {id: id, name: name}; f(6,2); // SyntaxError: Unexpected token : // 不报错 var f = (id,name) => ({id: id, name: name}); f(6,2); // {id: 6, name: 2}
-
- 与普通函数的区别
- 箭头函数里面没有 this 对象，此时的 this 是外层的 this 对象，即 Window
- 不可以作为构造函数，也就是不能使用 new 命令，否则会报错
- 当我们需要维护一个 this 上下文的时候，就可以使用箭头函数
-
//一般函数 var Person = { 'age': 18, 'sayHello': function () { var self = this; setTimeout(function () { console.log(self.age); }); } }; Person.sayHello(); //箭头函数 var Person1 = { 'age': 20, 'sayHello': function () { setTimeout(()=>{ console.log(this.age); }); } }; Person1.sayHello(); 打印： 18 18
-
- 普通函数作为类的对象时，this为当前对象；箭头函数作为类的对象是，this为全局
-
var Person = { 'age': 18, 'sayHello': ()=>{ console.log(this.age); } }; var age = 20; Person.sayHello(); // 20 // 此时 this 指向的是全局对象 var Person1 = { 'age': 18, 'sayHello': function () { console.log(this.age); } }; var age = 20; Person1.sayHello(); // 18 // 此时的 this 指向 Person1 对象
-
- 需要动态this的时候，不能够用箭头函数
-
var button = document.getElementById('userClick'); button.addEventListener('click', () => { this.classList.toggle('on'); }); button 的监听函数是箭头函数，所以监听函数里面的 this 指向的是定义的时候外层的 this 对象，即 Window，导致无法操作到被点击的按钮对象。
-
二，Class类
类基础：参考https://blog.csdn.net/a_horse/article/details/84396369
- class类的注意点
- 本质是function
- 一般写法：匿名类和命名类
-
// 匿名类 let Example = class { constructor(a) { this.a = a; } } // 命名类 let Example = class Example { constructor(a) { this.a = a; } }
-
- 不可重复声明
- 类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。
- 类中方法不需要 function 关键字。
- 方法间不能加分号：class Example {}
- class类的属性：4大属性
-
class Person { constructor(name) { this.name = name; } }; Person.hands = 2; Person.prototype.foot = 5; var person = new Person('gaga'); //1,实例属性 console.log(person.name); //2,静态属性 console.log(Person.hands); //3,原型属性 console.log(Person.prototype.foot); //4,name属性（自带，返回class类的名称） console.log(Person.name); 结果： gaga 2 5 Person
-
- class类的方法：4大方法
-
class Example{ //1，constructor方法 constructor(){ console.log('我是constructor方法'); //2，实例方法 this.methodOne =(a, b)=> { console.log('我是实例方法'); } }; //3，静态方法 static methodTwo(a, b) { console.log('我是静态方法'); }; //4，原型方法 methodThree(a, b) { console.log('我是原型方法'); }; } let exam = new Example(); exam.methodOne(1,2); Example.methodTwo(1,2); exam.methodThree(1,2); 结果： 我是constructor方法 我是实例方法 我是静态方法 我是原型方法
-
- class类的getter / setter方法
- 作用：做一些拦截操作，在赋值之前或者赋值之后做某些操作
- ES5使用Object的通用方法：
-
var user ={ name:"狂奔的蜗牛" } ; var count = 12; Object.defineProperty(user,"age",{ get:function(){ console.log('b的getter'); return count; }, set:function(newVal){ console.log('b的setter'); count=newVal; } }); console.log(user.age); user.age=145; console.log(user.age);//145 结果： b的getter 12 b的setter b的getter 145 145
-
- ES6使用get，set来访问：对象初始化就先执行setter方法
-
class Example1{ constructor(a, b) { this.a = a; this.b = b; } get a(){ console.log('a的getter'); return this._a; } set a(a){ console.log('a的setter'); this._a = a; } } let exam1 = new Example1(1,2); // 只输出 setter , 不会调用 getter 方法 console.log(exam1.a); // a可以直接访问 console.log(exam1._a); // _a可以直接访问 结果： a的setter a的getter 1 1
-
- class类的继承
- 使用extend
- 父类构造函数,只能出现在子类的构造函数
- 子类 constructor 方法中必须有 super ，且必须出现在 this 之前
-
// 父类 class Father1 { constructor(a,c){ this.a = a; this.c = c; } } // 子类 class Child1 extends Father1 { constructor(b){ super(); this.b = b; } } let test1 = new Child1(); test1.a = 2; test1.b = 5; test1.c = 7; console.log(test1.a); console.log(test1.b); console.log(test1.c); 结果： 2 5 7
-
- 调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类
-
//父类 class Father { test0(){ return 0; } static test1(){ return 1; } } //子类 class Child extends Father { constructor(){ super(); // 调用父类普通方法 console.log(super.test0()); // 0 } static test3(){ // 调用父类静态方法 return super.test1() + 2; } } var child = new Child; console.log(child.test0()); console.log(Child.test3()); 结果： 0 0 3
-
三，模块
- 1，导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等
- 2，每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
- 3，每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取
-
/*-----导出的js：export [test.js]-----*/ let myName = "Tom"; let myAge = 20; let myfn = function(){ return "My name is" + myName + "! I'm '" + myAge + "years old." } let myClass = class myClass { static a = "yeah!"; } export { myName, myAge, myfn, myClass } /*-----导出的js：import [xxx.js]-----*/ import { myName, myAge, myfn, myClass } from "./test.js"; console.log(myfn());// My name is Tom! I'm 20 years old. console.log(myAge);// 20 console.log(myName);// Tom console.log(myClass.a );// yeah!
-
- 4，as的用法
- 1，导入的变量名，须和导出的接口名称相同
- 2，使用 as 重新定义导出的接口名称，隐藏模块内部的变量
- 3，导出的地方使用as
-
/*-----导出的js：export [test.js]-----*/ let myName = "Tom"; export { myName as exportName } /*-----导入的js：import [xxx.js]-----*/ import { exportName } from "./test.js"; console.log(exportName);// Tom
-
- 4，导入的地方使用as
-
/*-----导出的js1：export [test1.js]-----*/ let myName = "Tom"; export { myName } /*-----导出的js2export [test2.js]-----*/ let myName = "Jerry"; export { myName } /*-----两个js相同导入import [xxx.js]-----*/ import { myName as name1 } from "./test1.js"; import { myName as name2 } from "./test2.js"; console.log(name1);// Tom console.log(name2);// Jerry
-
- 4，导入import
- 1，不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值
- 2，多次import只执行一次
- 3，不能使用表达式和变量导入：如import { "f" + "oo" } from "methods";
-
import {a} from "./xxx.js" a = {}; // error import {a} from "./xxx.js" a.foo = "hello"; // a = { foo : 'hello' }
- 5，导出export
- 1，在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
- 2，export default 中的 default 是对应的导出接口变量。
- 3，通过 export 方式导出，在导入时要加{ }，export default 则不需要。
- 4，export default 向外暴露的成员，可以使用任意变量来接收
-
var a = "My name is Tom!"; export default a; // 仅有一个 export default var c = "error"; // error，default 已经是对应的导出变量，不能跟着变量声明语句 import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收
- 6，复合使用
- export 与 import 可以在同一模块使用
- 可以将导出接口改名，包括 default。
- 复合使用 export 与 import ，也可以导出全部，当前模块导出的接口会覆盖继承导出的
-
export { foo, bar } from "methods"; // 约等于下面两段语句，不过上面导入导出方式该模块没有导入 foo 与 bar import { foo, bar } from "methods"; export { foo, bar }; /* ------- 特点 1 --------*/ // 普通改名 export { foo as bar } from "methods"; // 将 foo 转导成 default export { foo as default } from "methods"; // 将 default 转导成 foo export { default as foo } from "methods"; /* ------- 特点 2 --------*/ export * from "methods";