一、JS闭包
- 概念:如果一个内部函数引用了外部函数createCounter的变量count,并且这个内部函数回作为外部函数的返回值,就会形成闭包。其中变量 counter 就会常驻在内存中,形成“闭包内存泄漏”。
-
function createCounter() { let count = 0; // 在JS中,所有函数都能访问它们上一层的作用域 return function() { count++; return count; }; }
- 作用:尽管闭包导致了内存泄露问题,但却可以打破函数作用域的限制,使外部函数createCounter和内部函数都能使用变量count(这里解释一下,因为我们知道count在内部函数的外面声明,它的作用域仅在内部函数外面生效,即内部函数是不能访问到它的,但闭包打破了这种限制),这种做法的好处就是实现了方法或属性的私有化,暴露出公共的修改count的方法(想修改count只能通过闭包函数)。后续闭包引申出柯里化、bind等概念。
-
// 执行上面闭包代码 const counter = createCounter(); console.log(counter()); // 输出: 1 console.log(counter()); // 输出: 2 console.log(counter()); // 输出: 3
二、JS 异步Promise
- 概念:Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务,可以替代传统的解决方案--回调函数和事件。当需要多次顺序执行异步操作的时候,例如,如果想通过异步方法先后检测用户名和密码,需要先异步检测用户名,然后再异步检测密码的情况下就很适合 Promise。
-
new Promise(function (resolve, reject) { console.log(“第一个输出”); resolve(“第一个then的参数”); }).then(function (value) { console.log(value); return “第二个then的参数”; }).then(function (value) { console.log(value); throw "An error"; }).catch(function (err) { console.log(err); }); // 输出 第一个输出 第一个then的参数 第二个then的参数 An error
- 详细介绍:ES6提供了Promise对象,其构造函数接受一个函数作为参数,该函数是同步的并且会立即执行(起始函数),它包含两个参数resolve和reject,分别表示promise成功和失败的状态。成功,则执行resolve函数并传递成功的结果,并执行then(promise成功的回调函数,then的参数可以是resolve提供的,也可以是上一个then的return提供的)。失败则执行reject,并执行catch(用于处理 Promise 失败状态的回调函数)。
- 注意:resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列,并且不能使起始函数停止(要用return停止)。
三、JS继承
- 概念:类继承使用 extends 关键字,在构造方法中调用 super() 方法后就可以访问父类的属性和方法,底层机制仍然基于原型继承。实现继承有两个⽅⾯要考虑,一个是原型属性和⽅法的继承,另一个是构造器的继承。
- 几种继承方式:
- 原型链继承:
-
// 父类 function Animal(name) { this.name = name; } // 父类原型上定义了eat方法 Animal.prototype.eat = function() { console.log(this.name + " is eating."); }; // 子类 // 使用 call 方法调用父类构造函数,设置 this 指向子类实例 function Cat(name, breed) { Animal.call(this, name); this.breed = breed; } // 建立原型链,让 Cat 继承 Animal Cat.prototype = Object.create(Animal.prototype); Cat.prototype.constructor = Cat; //确保继承链上的构造函数正确。 // 子类原型上定义了bark方法 Cat.prototype.bark = function() { console.log(this.name + " is barking."); }; var cat = new Cat("mini", "beef"); cat.eat(); // 调用从 Animal 继承的方法 cat.bark(); // 调用 Cat 的方法
- ES6 类继承
-
// 父类 通过 class声明类 通过constructor定义属性 class Animal { constructor(name) { this.name = name; } eat() { console.log(this.name + " is eating."); } } // 子类 通过extends继承父类,super调用父类的构造方法 class Cat extends Animal { constructor(name, breed) { super(name); this.breed = breed; } bark() { console.log(this.name + " is barking."); } } const cat = new Cat("mini", "beef"); cat.eat(); cat.bark();
- getter、setter、static
-
class Animal { constructor(name) { this.bigname = name; } get s_name() { return this.bigname; } set s_name(x) { this.bigname = x; } // 静态方法,不能在对象上调用,只能在类中调用 static hello() { return "Hello!!"; } } // 实例化后 cat为对象类型 let cat = new Animal("mini"); // set方法 document.getElementById("demo").innerHTML = cat.bigname; // 可以在类中调用 'hello()' 方法 document.getElementById("demo").innerHTML = Animal.hello(); // 不能通过实例化后的对象调用静态方法,例如下面是错的 // document.getElementById("demo").innerHTML = cat.hello();
四、JS的apply call bind 三种方法的异同
- 相同:
- 都是JS中的用于调用函数的方法;
- 都用来动态改变 this 指向,且不会改变原先函数的this指向。
- 不同点:
- 传参方式不同。apply(thisTarget, arr) 接收两个参数,第一个参数thisTarget是函数体内this对象的指向,第二个参数 arr 是一个数组或类数组,它把这个数组里面的元素作为参数传递给被调用的函数;call(thisTarget, 参数1,参数2,参数3...);bind(thisTarget, 参数1,参数2,参数3...) 与call一样。
- 执行方式不同。apply和 call 会立即调用函数,它们会立即执行目标函数,并且传入指定的参数;bind 会延迟调用函数,它会创建一个新函数,并将目标函数与指定的 this 值和参数绑定在一起,但不会立即执行目标函数,而是返回一个新函数。这个新函数可以在以后的某个时间点被调用。
- 修改this指向的有效性。apply和call仅临时生效一次,即调用的这一次;而 bind 可以只需要执行返回的函数,就可以多次执行。
- 返回值不同。apply和call方法接受的返回值是被调用函数的返回值,bind接受的返回值是一个新函数。
- 实例:
-
// 定义一个对象 const person = { name: 'Alice' }; // 定义一个目标函数 function greet(greeting, punctuation) { console.log(`${greeting}, ${this.name}${punctuation}`); } // 使用 apply 方法调用函数,并传递参数数组作为参数,同时修改 this 指向为 person 对象 greet.apply(person, ['Hello', '!']); // 输出:Hello, Alice! // 使用 call 方法调用函数,并依次传递参数列表作为参数,同时修改 this 指向为 person 对象 greet.call(person, 'Hi', '!'); // 输出:Hi, Alice! // 使用 bind 方法绑定函数,并指定 this 值为 person 对象,同时传递参数 const greetNew = greet.bind(person, 'Hey', '!'); // 调用新函数 greetNew (); // 输出:Hey, Alice!