1、箭头函数语法，常用场景
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>箭头函数语法</title> </head> <body> <script> // 1. 无参数 let f1 = function () { console.log("f1()"); }; f1(); // 箭头函数,没有参数,圆括号不能省 f1 = () => console.log("->f1()"); f1(); // IIFE:立即函数 // (() => console.log("->f1()"))(); console.log("---------"); // 2. 单个参数 let f2 = function (item) { console.log(`f2(${item})`); }; f2("item"); // 箭头函数 f2 = (item) => console.log(`->f2(${item})`); f2("item"); console.log("---------"); // 3. 多个参数 let f3 = function (...items) { console.log("f3()", items); }; f3(1, "a", 3, 4); // 箭头函数,多条语句时一定要加大括号{} f3 = (...items) => { console.log(this); console.log("->f3()", items); }; f3(5, 6, "b", 8); </script> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>箭头函数的一个小案例</title> </head> <body> <script> let user = { // 属性 name: "小刘", // 方法 getName: function () { // 解决了this指向问题 setTimeout(() => { console.log(this); console.log("My name is ", this.name); }, 1000); }, }; user.getName(); // 箭头函数主是要替代之前的函数表达式 // 箭头函数没有自己的this,支持词法作用域/块级作用域 </script> </body></html>
2、es6中class原型与原型链属性
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>es6中的class类</title> </head> <body> <script> // 原生js中没有类, 通过"构造函数"模拟类 function Person(name) { // 属性 this.name = name; } // 公共方法放在函数的原型对象上 Person.prototype.sayName = function () { return this.name; }; let person = new Person("小李"); let person1 = new Person("小刘"); console.log(person); console.log(person1); // es6方法 class PersonClass { // 构造方法 constructor(name) { this.name = name; } // 原型方法 sayName() { return this.name; } } person = new PersonClass("小王"); console.log(person.sayName()); // 函数, 任何一个函数都有下面二个 function fn(a, b) {} console.dir(fn); // prototype: 原型属性: 当函数是构造函数时,才有用 // __proto__: 原型链属性, 因为函数也是对象 console.log(fn instanceof Object); // 对象: 任何对象都有一个__proto__ console.log({}); console.log({}.toString()); // __proto__: 原型链属性 // 构造函数的原型属性 prototype,上面是当前构造函数的所有实例所共享的属性和方法 function A() { } console.dir(A); let a = new A(); console.log(a); // 1. 函数有二个重要的属性 // 原型属性: prototype, 做为构造函数的时候才会用到,当该属性的指针指向新对象的__proto__ // 原型链属性: __proto__, 因为任何一个对象都有这个属性,指向自己的公共方法,函数也是对象,当然也有这个属性 </script> </body></html>
- 总结：
- 箭头函数解决了
this当前变量指向问题 - 任何一个函数都有两个属性：
prototype、__proto__
