本文详细总结了JavaScript面试中的常见问题，包括数据类型（原始类型、对象类型）、ES6新特性（let、const、箭头函数、Promise）、任务调度（宏任务与微任务）以及js单线程原因、setTimeout和setInterval区别。此外，还探讨了函数、原型、继承、异步处理和作用域等方面的知识，是准备JavaScript面试的宝贵资料。
本文集成多篇博客以及权威书籍加上自己的理解汇总，以下是借鉴的博客网址：
https://blog.csdn.net/qq_33277654/article/details/122924692
https://blog.csdn.net/cc18868876837/article/details/81211729
https://blog.csdn.net/hualvm/article/details/84395850
https://blog.csdn.net/nicexibeidage/article/details/78144138
后盾人网站：https://doc.houdunren.com
《js红宝书》
文章目录
- 1. js数据类型有哪些？
- 2.es6新特性都有什么？
- 3.js的任务调度流程？什么是宏任务微任务？
- 4.js为什么是单线程的？
- 5.setTimeout和setInterval区别？计时器用哪个？
- 6.箭头函数和普通函数的区别？箭头函数可以当做构造函数 new 吗？
- 7.js立即执行函数作用？
- 8.什么是原型？什么是原型链？
- 9.js常用的继承方式有哪些？每个继承方式的优缺点？
- 10.async await是做什么的？
- 11.什么是变量提升，什么是函数提升，它们的优先级？
- 12.let，var，const区别，TDZ暂时性死区是什么？
- 13.什么是闭包？闭包的作用？闭包的应用？闭包会造成什么问题？
- 14.谈谈事件循环？
- 15.
1. js数据类型有哪些？
6+1 USONB
6种简单数据类型（原始类型）：undefined、null、boolean、number、string、symbol。
*基本数据类型是存储在栈中，栈内存是自动分配内存的，赋值时传值。
1种复杂数据类型：Object对象（细分有Object、Array、Function、Date、RegExp）。
*复杂数据类型时存储在堆中，堆内存是动态分配的，不会自动释放，赋值时传址。
1）typeof操作符
需要注意的是typeof是一个操作符而不是函数，因此不需要参数。
调用typeof null时返回的是“object”，这是因为特殊值null被认为是一个对空对象的引用。
严格来讲函数在js里被认为是对象，而不是数据类型，但函数有自己的特性，因此需要通过typeof来区分函数和其他对象。
2）Undefined类型
该类型只有一个值就是特殊值undefined。当使用var或let声明了变量但没有初始化时，就相当于给变量赋予了undefined值（const在声明后必须赋值否则报错）。
增加undefined这个特殊值的目的就是为了正式明确空对象指针null和未初始化变量的区别。
当输出未初始化变量和未声明变量时，会出现下述情况：输出未初始化变量a的值为undefined，要输出未声明变量b则会报错。
let a;
// let b;
console.log(a);
console.log(b);
对于未声明的变量，只能执行一个有用的操作，就是对它调用typeof。未初始化的变量a的类型是undefined，而对未声明的变量b调用结果还是undefined。
let a;
// let b;
console.log(typeof a);
console.log(typeof b);
3）Null类型
该类型也同样只有一个特殊值null，null表示一个空对象指针，因此typeof null会返回object。
undefined值是由null值派生而来的，表面上两者相等，用等于操作符（==）比较时始终返回true，但要注意这个操作符会为了比较而转换它的操作数。
console.log(null == undefined);
但两者用途完全不一样。永远不用显式地将变量值设为undefined，但null不是这样，如果变量要保存对象而当时有没有哪个对象可以保存，就可以用null来填充。
4）Boolean类型
有两个字面量值：true和false。这两个布尔值不同于数值，true不等于1，false不等于0。
类型转换：Boolean()
| 数据类型 | 转换为true的值 | 转换为false的值 |
|---|---|---|
| String | 非空字符串 | “” |
| Number | 非零数值 | 0、NaN |
| Object | 任意对象 | null |
5）Number类型
(1)浮点值
定义浮点值必须包含小数点，且小数点后面必须至少有一个数字。虽然小数点前面不是必须有整数，但是推荐加上。比如：
let a = 1.1;
let b = 0.1;
let c = .1; //不推荐
存储浮点值使用的内存空间是存储整数值的两倍，所以js会想方设法把浮点值转为整数。小数点后面没有数字或者小数点后的数字是0，那么就会被转换为整数。比如：
let a = 10.; //小数点后面没有数，被当为整数
let b = 1.0; //小数点后面是0，被当为整数
对于过大或者过小的数值，浮点值可以用科学计数法来表示。js中科学计数法格式要求是一个数值后跟一个大写或小写的字母e，再加上一个要乘的10的多少次幂。比如：
let num = 3.15e7; //3.15乘10的7次幂=31500000
console.log(num);
浮点值精确的最高可达17位小数，但远不如整数精确。例如0.1+0.2得到的不是0.3，由于这种微小的舍入错误，导致很难测试特定的浮点值。之所以存在这种舍入错误是因为使用了IEEE 754数值，其他使用相同格式的语言也有这个问题。
(2)值的范围
js可以表示的最小数值保存在Number.MIN_VALUE中，最大数值保存在Number.MAX_VALUE中。如果计算得到的数值超出了js可表示范围，那么这个数值会被自动转换为一个特殊的Infinity值。正Infinity或者负Infinity值将不能再进一步用于任何计算，要确定一个值是否为有限大，可以使用isFinite()函数。如下：
let max = Number.MAX_VALUE;
let min = Number.MIN_VALUE;
console.log(max); //1.7976931348623157e+308
console.log(min); //5e-324
let result = max + max;
console.log(isFinite(result));//false
(3)NaN
Not a Number，用于表示本来要返回数值的操作失败了。
在js里，0、+0、-0相除会返回NaN。
console.log(0 / 0); //NaN
console.log(0 / -0); //NaN
console.log(0 / +0); //NaN
如果分子是非0值，分母是有符号0或无符号0，则会返回Infinity或-Infinity。
console.log(5 / -0); //-Infinity
console.log(5 / +0); //Infinity
NaN有几个特殊属性：
1.任何涉及NaN的操作始终返回NaN，在连续多步计算时可能是个问题。
2.NaN不等于包括NaN在内的任何值。
console.log(NaN / 10); //NaN
console.log(NaN == NaN); //false
为此js提供了isNaN()函数。该函数接收一个参数，可以是任意数据类型，然后判断这个参数是否“不是数值”。该函数会尝试把传入的值转换为数值。
console.log(isNaN(NaN)); //true
console.log(isNaN(10)); //false，10是数值
console.log(isNaN("10")); //false，可以转换为数值10
console.log(isNaN("blue")); //true，不可以转换为数值
console.log(isNaN(true)); //false，可以转换为数值1
(4)类型转换为数值
Number() pareseInt() parseFloat()
Number()可以用于任何数据类型，后两个函数主要用于将字符串转换为数值。
Number()：
console.log(Number(true)); //1
console.log(Number(3)); //3
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(Number("011")); //11
console.log(Number("Hello World")); //NaN
parseInt()：
更专注于字符串是否包含数值模式，字符串最前面的空格会被忽略，从第一个非空格字符开始转换。如果第一个字符不是数值字符、加号或减号，parseInt()立刻返回NaN，依次检测至字符串末尾或非数值字符。（意味着空字符串会返回NaN）
console.log(parseInt("")); //NaN
console.log(parseInt("1234blue")); //1234
console.log(parseInt("22.5")); //22
console.log(parseInt("70")); //70
parseFloat()：
跟parseInt()类似。parseFloat()始终忽略字符串开头的0，如果字符串表示整数（没有小数点或者小数点后面只有一个0），则返回整数。
console.log(parseFloat("1234blue")); //1234
console.log(parseFloat("22.5")); //22.5
console.log(parseFloat("22.5.49")); //22.5
console.log(parseFloat("0987.6")); //987.6
console.log(parseFloat("3.15e7")); //31500000
6）String类型
（1）转换为字符串
toString() String() +""
toString()：
几乎所有值都有的toString方法，唯一的用途就是返回当前值的字符串等价物。字符串本身也有toString()方法，但只是简单地返回自身的一个副本。null和undefined值没有toString()方法。
String()：
如果不确定值是不是null或undefined，可以使用String()转型函数。
（2）模板字面量
es6新增特性，模板字面量保留换行字符，可以跨行定义字符串。
let a = 'first line\nsecond line';
let b = `first line
second line`;
console.log(a);
//first line
//second line
console.log(b);
//first line
//second line
使用${}实现字符串插值
（3）模板字面量标签函数
模板字面量通过定义标签函数来自定义插值行为。
对于有n个插值的模板字面量，传递给标签函数表达式参数个数始终是n，而传给标签函数第一个参数所包含的字符串个数始终是n+1.（通过${}划分）
let a = 6;
let b = 9;
function simpleTag(strings, ...expressions) {
console.log(strings);
for (const exp of expressions) {
console.log(exp);
}
return 'foobar';
}
let untaggedResult = `${a}+${b}=${a + b}`;
let taggedResult = simpleTag`${a}+${b}=${a + b}`;
//['', '+', '=', '']
//6
//9
//15
console.log(untaggedResult);//6+9=15
console.log(taggedResult);//foobar
7）Symbol类型
8）Object类型
js中对象通过new创建。
每个Object都有如下属性和方法：
constructor:用于创建当前对象的函数。
hasOwnProperty(propertyName):用于判断当前实例（不是原型）上是否存在给定的属性。
isPrototypeOf(object):用于判断当前对象是否为另一个对象的原型。
propertyIsEnumerable(propertyName):用于判断给定属性是否可以使用for-in语句枚举。
toString():返回对象的字符串表示。
valueOf():返回对象对应的字符串、数值或布尔值表示。
2.es6新特性都有什么？
1）let、const声明变量
let声明变量特点：
- 不允许重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
什么是作用域链：就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
const声明常量特点：
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块级作用域
2）变量解构赋值
- 数组解构赋值
const F4 = ["大哥","二哥","三哥","四哥"];
let [a,b,c,d] = F4; // 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"
console.log(a + b + c + d); // 大哥二哥三哥四哥
- 对象解构赋值
const F3 = { name : "大哥",
age : 22,
sex : "男",
xiaopin : function(){
console.log("我会演小品！");
}
}
let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥22男
xiaopin(); // 此方法可以正常调用
3）模板字面量
- 字符串保留换行符
- 可以使用${xxx}形式引用变量
4）对象的简化写法
允许在大括号里直接写入变量和函数作为对象的属性和方法。
4. 完整写法
5. 简化写法（当对象属性名和变量名相同时）
6. 声明方法的简化
5）箭头函数
特性：
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
- 箭头函数的this是静态的，不能通过apply、call、bind更改指向，箭头函数本身没有this，只能继承，始终指向函数声明时所在作用域下的this的值，this指向父级函数的this指向。
- 箭头函数不能作为构造函数实例化
- 不能使用arguments
（1）定时器
传统函数的问题：定时器setTimeout()和setInterval()的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的，调用的代码运行在与所在函数完全分离的执行环境上。
let ad = document.getElementById('ad');
ad.addEventListener('click', function () {
setTimeout(function () {
console.log(this); //window
this.style.background = 'pink';
}, 2000);
});
使用箭头函数可以解决：因为箭头函数的this指向的是父级函数指向的this，也就是div元素。
let ad = document.getElementById('ad');
ad.addEventListener('click', function () {
setTimeout(() => {
console.log(this); //div元素
this.style.background = 'pink';
}, 2000);
});
（2）事件处理函数
事件处理函数使用箭头函数的时候，this指向的是父级函数指向的this，也就是window
let ad = document.getElementById('ad');
ad.addEventListener('click', () => {
console.log(this); //window
});
（3）对象方法函数
func1：是普通函数，因此this指向当前对象obj
func2：是箭头函数，this指向父级函数的this指向，因此是window
func4：是箭头函数，this指向父级函数func3的this指向，是obj
const obj = {
name: '张三',
age: 18,
sex: '男',
fun1: function () {
console.log(this)
},
fun2: () => {
console.log(this)
},
fun3: function () {
const fun4 = () => {
console.log(this);
}
fun4();
}
};
obj.fun1(); //obj
obj.fun2(); //window
obj.fun3(); //obj
6）函数参数的默认值
es6允许给函数参数赋值初始值
- 形参初始值：具有默认值的参数，一般位置要靠后（潜规则）
- 与解构赋值结合
7）rest参数（…args）
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
ES5获取实参使用arguments参数，而且获得的是Object类型。
注意：
- rest参数获得的是一个数组
- rest参数必须放在最后
// ES6的rest参数...args，rest参数必须放在最后面
function data(...args){
console.log(args); // fliter some every map
}
data("大哥","二哥","三哥","四哥");
8）扩展运算符（…）
…扩展运算符能将 “数组” 转换为 “逗号分隔的参数序列”，好比rest参数的逆运算，对数组进行解包。
两者的区别：
- rest参数是定义在声明函数的形参中，是将参数转化为数组
- 扩展运算符是定义在调用函数的实参中，是将数组转化为参数
//声明一个数组 ...
const tfboys = ['易烊千玺', '王源', '王俊凯'];
// 声明一个函数
function chunwan() {console.log(arguments);}
chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')
具体应用：
（1）数组的合并
const kuaizi = ['王太利','肖央']; const fenghuang = ['曾毅','玲花'];
// es5传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);
（2）数组的克隆
如果有引用类型，则是浅拷贝。
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);
（3）将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // arguments
9）Symbol类型
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。
类似于身份证，参数代表姓名，姓名可以重复，但是身份证号不可以。
特点：
- Symbol的值是唯一的，用来解决命名冲突的问题
// 没有参数的情况
let name1 = Symbol();
let name2 = Symbol();
name1 === name2 // false
name1 === name2 // false
// 有参数的情况
let name1 = Symbol('flag');
let name2 = Symbol('flag');
name1 === name2 // false
name1 === name2 // false
- Symbol值不能与其他数据进行运算
//不能与其他数据进行运算
//let result = s + 100;
//let result = s > 100;
//let result = s + s;
//报错
- Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所以键名
（1）Symbol的方法
Symbol.for()
用于将描述相同的Symbol变量指向同一个Symbol值，方便通过描述区分不同的Symbol。
Symbol.for("foo"); // 创建一个 symbol 并放入 symbol 注册表中，键为 "foo"
Symbol.for("foo"); // 从 symbol 注册表中读取键为"foo"的 symbol
Symbol.for("bar") === Symbol.for("bar"); // true，证明了上面说的
Symbol("bar") === Symbol("bar"); // false，Symbol() 函数每次都会返回新的一个 symbol
var sym = Symbol.for("mario");
sym.toString();
// "Symbol(mario)"，mario 既是该 symbol 在 symbol 注册表中的键名，又是该 symbol 自身的描述字符串
Symbol()和Symbol.for()的不同点：
- Symbol()创建的symbol不放入全局注册表中，每次都是新建，即使描述值相同也会新建。
- Symbol.for()创建的symbol会放入一个全局symbol注册表中。每次创建一个symbol会先检查给定的key是否已经在注册表中，如果在则直接返回上次存储的那个，否则会再新建一个。
（2）用Symbol向对象中添加方法
要向对象里添加方法，但是怕已经存在同名方法，因此使用Symbol
let game = {
name: '俄罗斯方块',
up: function () { },
down: function () { }
};
//要向game对象里添加方法，但是怕已经存在同名方法，因此使用Symbol
//法一：
let method = {
up: Symbol(),
down: Symbol()
};
game[method.up] = function () {
console("new up");
};
game[method.down] = function () {
console("new down");
};
console.log(game);
//{name: '俄罗斯方块', up: ƒ, down: ƒ, Symbol(): ƒ, Symbol(): ƒ}
// down: ƒ ()
// name: "俄罗斯方块"
// up: ƒ ()
// Symbol(): ƒ ()
// Symbol(): ƒ ()
//法二：
let newgame = {
name: "狼人杀",
[Symbol("up")]: function () { },
[Symbol("down")]: function () { }
}
console.log(newgame);
//{name: '狼人杀', Symbol(up): ƒ, Symbol(down): ƒ}
// name: "狼人杀"
// Symbol(down): ƒ ()
// Symbol(up): ƒ ()
（3）Symbol的内置值
除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。
Symbol内置值的使用，都是作为某个对象类型的属性去使用，用来控制对象的表现。
| 内置Symbol的值 | 调用时机 |
|---|---|
| Symbol.hasInstance | 当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法 |
| Symbol.isConcatSpreadable | 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()时，是否可以展开。 |
| Symbol.species | 创建衍生对象时，会使用该属性 |
| Symbol.match | 当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。 |
| Symbol.replace | 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。 |
| Symbol.search | 当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。 |
| Symbol.split | 当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。 |
| Symbol.iterator | 对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器 |
| Symbol.toPrimitive | 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。 |
| Symbol. toStringTag | 在该对象上面调用 toString 方法时，返回该方法的返回值。 |
| Symbol. unscopables | 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。 |
Symbol.hasInstance
class Person {
static [Symbol.hasInstance](param) {
console.log(param);
console.log("我被用来检测类型了");
return false;
}
}
let o = { name: 'Alison' };
console.log(o instanceof Person);
//Object name: "Alison"
//我被用来检测类型了
//false
Symbol.isConcatSpreadable
const arr = [1, 2, 3];
const arr2 = [4, 5, 6];
// 合并数组：false数组不可展开，true可展开
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));
//[1, 2, 3, Array(3)]
10）迭代器iterator接口
**迭代器可以用来自定义遍历对象。**它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费。
原生具备 iterator 接口的数据(可用 for of 遍历)：
- Array；
- Arguments；
- Set；
- Map；
- String；
- TypedArray；
- NodeList；
工作原理：
- 创建一个指针对象，指向当前数据结构的起始位置；
- 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
- 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
- 每调用 next 方法返回一个包含 value 和 done 属性的对象；
// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
// 使用 for...of 遍历数组
for (let v of xiyou) {
console.log(v);
}
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());//{value: '唐僧', done: false}
console.log(iterator.next());//{value: '孙悟空', done: false}
console.log(iterator.next());//{value: '猪八戒', done: false}
console.log(iterator.next());//{value: '沙僧', done: false}
console.log(iterator.next());//{value: undefined, done: true}
//重新初始化对象，指针也会重新回到最前面
let iterator1 = xiyou[Symbol.iterator]();
console.log(iterator1.next());//{value: '唐僧', done: false}
迭代器自定义遍历对象：
// 声明一个对象
const banji = {
name: "终极一班",
stus: ['xiaoming', 'xiaoning', 'xiaotian', 'knight'],
[Symbol.iterator]() {
// 索引变量
let index = 0;
// 保存this
let _this = this;
return {
next: function () {
if (index < _this.stus.length) {
const result = { value: _this.stus[index], done: false };
// 下标自增
index++;
// 返回结果
return result;
} else {
return { value: undefined, done: true };
}
}
};
}
}
// 遍历这个对象
for (let v of banji) {
console.log(v);
}
//xiaoming xiaoning xiaotian knight
11）Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，Promise 将异步操作队列化，按照期望的顺序执行，返回符合预期的结果，可以通过链式调用多个 Promise 达到我们的目的。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果（通常是一个异步操作的结果）。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
Promise特点：
- Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
- 一旦状态改变，就不会再变，任何时候都可以得到这个结果。
（1）基本用法
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve函数和reject函数。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
（2）then
一个promise 需要提供一个then方法访问promise 结果，then 用于定义当 promise 状态发生改变时的处理，即promise处理异步操作，then 用于结果。
promise 就像 kfc 中的厨房，then 就是我们用户，如果餐做好了即 fulfilled ，做不了拒绝即rejected 状态。那么 then 就要对不同状态处理。
- then 方法必须返回 promise，用户返回或系统自动返回
- 第一个函数在resolved 状态时执行，即执行resolve时执行then第一个函数处理成功状态
- 第二个函数在rejected状态时执行，即执行reject 时执行第二个函数处理失败状态，该函数是可选的
- 两个函数都接收 promise 传出的值做为参数
- 如果 then 返回 promise ，下一个then 会在当前promise 状态改变后执行
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("操作成功");
}, 2000);
});
const p2 = new Promise((resolve, reject) => {
resolve(p1);
}).then(
msg => {
console.log(msg);
},
error => {
console.log(error);
}
);
如果只关心成功则不需要传递 then 的第二个参数，如果只关心失败时状态，then 的第一个参数传递 null。
const promise = new Promise((resolve, reject) => {
reject("is error");
});
promise.then(null, error => {
console.log(`失败:${error}`);
});
promise 传向then的传递值，如果then没有可处理函数，会一直向后传递。
let p1 = new Promise((resolve, reject) => {
reject("rejected");
})
.then()
.then(
null,
f => console.log(f)
);
Promise解决过程也可以处理其他类型，如果该类型有then方法，程序会把他封装成promise进行处理。
let p1 = new Promise((resolve, reject) => {
resolve("fulfilled");
}).then(
value => {
return class {
static then(resolve, reject) {
resolve("这是一个静态方法");
}
};
},
reason => { }
).then(value => {
console.log(value);
})
链式调用：每一个then都是对前一个返回的Promise的处理。每次的 then 都是一个全新的 promise，默认 then 返回的 promise 状态是 fulfilled。如果 then 返回promise 时，后面的then 就是对返回的 promise 的处理，需要等待该 promise 变更状态后执行。
（3）catch
catch用于失败状态的处理函数，等同于 then(null,reject){}
- 建议使用catch处理错误
- 将catch放在最后面用于统一处理前面发生的错误
错误是冒泡的操作的，下面没有任何一个then 定义第二个函数，将一直冒泡到 catch 处理错误。
new Promise((resolve, reject) => {
reject(new Error("请求失败"));
})
.then(msg => {})
.then(msg => {})
.catch(error => {
console.log(error);
});
catch 也可以捕获对 then 抛出的错误处理。
new Promise((resolve, reject) => {
resolve();
})
.then(msg => {
throw new Error("这是then 抛出的错误");
})
.catch(() => {
console.log("33");
});
catch 也可以捕获其他错误，下面在 then 中使用了未定义的变量，将会把错误抛出到 catch。
new Promise((resolve, reject) => {
resolve("success");
})
.then(msg => {
console.log(a);
})
.catch(reason => {
console.log(reason);
});
但像下面的在异步中 throw 将不会触发 catch，而使用系统错误处理。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
throw new Error("fail");
}, 2000);
}).catch(msg => {
console.log(msg + "后盾人");
});
（4）finally
无论状态是resolve 或 reject 都会执行此动作，finally 与状态无关。
const promise = new Promise((resolve, reject) => {
reject("hdcms");
})
.then(msg => {
console.log("resolve");
})
.catch(msg => {
console.log("reject");
})
.finally(() => {
console.log("resolve/reject状态都会执行");
});
（5）resolve
有时需要将现有对象转为 Promise 对象，使用 promise.resolve() 方法可以快速的返回一个Promise对象。（等价于new Promise(resolve => resolve())）
promise.resolve() 方法的参数分四种情况：
- 参数是一个Promise实例 ：将不做任何修改、原封不动地返回这个实例。
- 参数是一个thenable对象 ：会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。
- 参数不是具有then方法的对象或者不是对象 ：返回一个新的 Promise 对象，状态为resolved。
- 不带任何参数：直接返回一个resolved状态的 Promise 对象。所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。
Promise.resolve("后盾人").then(value => {
console.log(value); //后盾人
});
（6）reject
和 Promise.resolve 类似，reject 生成一个失败的promise。
new Promise(resolve => {
resolve("后盾人");
})
.then(v => {
if (v != "houdunren.com") return Promise.reject(new Error("fail"));
})
.catch(error => {
console.log(error);
});
（7）all
Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。使用Promise.all 方法可以同时执行多个并行异步操作，比如页面加载时同时获取课程列表与推荐课程。
- 适用于一次发送多个异步操作
- 方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例
const p = Promise.all([p1, p2, p3]);只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
const hdcms = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第一个Promise");
}, 1000);
});
const houdunren = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第二个异步");
}, 1000);
});
const hd = Promise.all([hdcms, houdunren])
.then(results => {
console.log(results);
})
.catch(msg => {
console.log(msg);
});
// ['第一个Promise', '第二个异步']
注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]
上面代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。
（8）allSettled
有时候，我们希望等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。Promise.all()方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。为了解决这个问题，引入了Promise.allSettled()方法，用来确定一组异步操作是否都结束了（不管成功或失败）。
Promise.allSettled()方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。
const p1 = new Promise((resolve, reject) => {
resolve("resolved");
});
const p2 = new Promise((resolve, reject) => {
reject("rejected");
});
Promise.allSettled([p1, p2])
.then(msg => {
console.log(msg);
})
//(2) [{…}, {…}]
// 0: {status: 'fulfilled', value: 'resolved'}
// 1: {status: 'rejected', reason: 'rejected'}
// length: 2
（9）race
使用Promise.race() 处理容错异步，和race单词一样哪个Promise快用哪个，哪个先返回用哪个。
- 以最快的promise为准
- 如果最快返加的状态为rejected 那整个promise为rejected执行catch
- 如果参数不是promise，内部将自动转为promise
const hdcms = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第一个Promise");
}, 2000);
});
const houdunren = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第二个异步");
}, 1000);
});
Promise.race([hdcms, houdunren])
.then(results => {
console.log(results);
})
.catch(msg => {
console.log(msg);
});
//第二个异步
12）Set&WeakSet
ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。
特点：
- 值是唯一的
- 严格类型检测，"1"不等于1
- 遍历顺序是添加的顺序
Set的属性和方法：
size返回集合的元素个数；add增加一个新元素，返回当前集合；delete删除元素，返回 boolean 值；has检测集合中是否包含某个元素，返回 boolean 值；clear清空集合，返回 undefined；
基本用法：
let set = new Set([2, 3, 4]);
set.add(1);
set.add(1);
set.add('1');
console.log(set);
（1）数组去重
使用展开运算符
let arr = [1, 1, 2, 3, 4, 4, 5, 6];
//使用展开运算符
let result = [...new Set(arr)];
console.log(result);//[1, 2, 3, 4, 5, 6]
（2）交集
let set1 = new Set([1, 3, 5, 5, 7, 9]);
let set2 = new Set([1, 1, 2, 4, 5, 6, 7]);
let newSet = new Set([...set1].filter(item => set2.has(item)));
console.log(newSet);//Set(3) {1, 5, 7}
（3）并集
let set1 = new Set([1, 3, 5, 5, 7, 9]);
let set2 = new Set([1, 1, 2, 4, 5, 6, 7]);
let union = new Set([...set1, ...set2]);
console.log(union); //Set{1,3,5,7,9,2,4,6}
（4）差集
交集的取反。
需要注意是谁和谁求差集，比如集合1和集合2求差集，就是1里面有的，2里面没的。
let set1 = new Set([1, 3, 5, 5, 7, 9]);
let set2 = new Set([1, 1, 2, 4, 5, 6, 7]);
let newSet = new Set([...set1].filter(item => !set2.has(item)));
console.log(newSet);//Set(2) {3, 9}
WeakSet特性：
- WeakSet结构同样不会存储重复的值，它的成员必须只能是对象类型的值。
- 垃圾回收不考虑WeakSet，即被WeakSet引用时引用计数器不加一，所以对象不被引用时不管WeakSet是否在使用都将删除
- 因为WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行forEach( )遍历等操作
- 也是因为弱引用，WeakSet 结构没有keys( )，values( )，entries( )等方法和size属性
- 因为是弱引用所以当外部引用删除时，希望自动删除数据时使用 WeakMap
13）Map&WeakMap
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和 『for…of…』进行遍历。具有极快的查找速度。
Map 的属性和方法：
size返回 Map 的元素个数set增加一个新元素，返回当前 Map，支持链式操作get返回键名对象的键值has检测 Map 中是否包含某个元素，返回 boolean 值clear清空集合，返回 undefined
操作类似于set
// 创建一个空 map
let m = new Map();
// 创建一个非空 map
let m2 = new Map([['name', 'Alison'], ['slogon', '狗狗']]);
// 1. size 返回 Map 的元素个数；
console.log(m2.size);
// 2. set 增加一个新元素，返回当前 Map；
m.set("皇帝", "大哥");
m.set("丞相", "二哥");
console.log(m);
// 3. get 返回键名对象的键值；
console.log(m.get("皇帝"));
// 4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
console.log(m.has("皇帝"));
// 5. clear 清空集合，返回 undefined；
m.clear();
console.log(m);
WeakMap特性：
- 键名必须是对象
- WeaMap对键名是弱引用的，键值是正常引用
- 垃圾回收不考虑WeaMap的键名，不会改变引用计数器，键在其他地方不被引用时即删除
- 因为WeakMap 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行forEach( )遍历等操作
- 也是因为弱引用，WeaMap 结构没有keys( )，values( )，entries( )等方法和 size 属性
- 当键的外部引用删除时，希望自动删除数据时使用 WeakMap
14）class类
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：
class声明类；constructor定义构造函数初始化；extends继承父类；super调用父级构造方法；static定义静态方法和属性；- 父类方法可以重写；
（1）声明类
ES5：
function Phone(brand, price) {
this.brand = brand;
this.price = price;
}
// 添加方法
Phone.prototype.call = function () {
console.log("我可以打电话");
}
// 实例化对象
let HuaWei = new Phone('华为', 5999);
HuaWei.call();//我可以打电话
console.log(HuaWei);//Phone {brand: '华为', price: 5999}
ES6：
class Phone {
// 构造函数，名字是固定的
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
// 党法必须使用该方式写，不能使用call:function(){}
call() {
console.log("我可以打电话");
}
}
let HuaWei = new Phone('华为', 5999);
HuaWei.call();//我可以打电话
console.log(HuaWei);//Phone {brand: '华为', price: 5999}
（2）类静态成员
类也是一个对象，他也有他自己的静态属性，即不会与实例对象公用的属性。
ES5：
function Phone() { }
// 类对象Phone的静态成员
Phone.nickname = "手机";
Phone.change = function () {
console.log("改变世界");
}
let nokia = new Phone();
console.log(nokia.name);//undefined
nokia.change();//Uncaught TypeError: nokia.change is not a function
console.log(Phone.nickname);//手机
Phone.change();//改变世界
// 实例对象的属性
Phone.prototype.color = "黑色";
console.log(nokia.color);//黑色
ES6：
class Phone {
static nickname = "手机";
static change() {
console.log("改变世界");
}
}
let nokia = new Phone();
console.log(nokia.nickname);//undefined
nokia.change();//Uncaught TypeError: nokia.change is not a function
（3）类的继承
ES5：构造函数实现继承
// 父类：手机
function Phone(brand, price) {
this.brand = brand;
this.price = price;
}
Phone.prototype.call = function () {
console.log("打电话");
}
// 子类：智能手机
function SmartPhone(brand, price, color, size) {
Phone.call(this, brand, price);
this.color = color;
this.size = size;
}
// 设置子类构造函数的原型
SmartPhone.prototype = new Phone;
// 声明子类的方法
SmartPhone.prototype.photo = function () {
console.log("拍照");
}
SmartPhone.prototype.play = function () {
console.log("玩游戏");
}
const HuaWei = new SmartPhone("华为", 5999, "银色", "5.5inch");
HuaWei.call();//打电话
HuaWei.photo();//拍照
HuaWei.play();//玩游戏
ES6：类继承
class Phone {
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
call() {
console.log("我可以打电话");
}
}
class SmartPhone extends Phone {
// 构造函数
constructor(brand, price, color, size) {
super(brand, price); //调用父类构造函数
this.color = color;
this.size = size;
}
photo() {
console.log("我可以拍照");
}
game() {
console.log("我可以玩游戏");
}
}
const xiaomi = new SmartPhone("小米", 1999, "黑色", "5.15inch");
console.log(xiaomi);//SmartPhone {brand: '小米', price: 1999, color: '黑色', size: '5.15inch'}
xiaomi.call();//我可以打电话
xiaomi.photo();//我可以拍照
xiaomi.game();//我可以玩游戏
（4）子类对父类方法重写
class Phone {
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
call() {
console.log("我可以打电话");
}
}
class SmartPhone extends Phone {
// 构造函数
constructor(brand, price, color, size) {
super(brand, price); //调用父类构造函数
this.color = color;
this.size = size;
}
photo() {
console.log("我可以拍照");
}
game() {
console.log("我可以玩游戏");
}
call() {
console.log("子类的打电话");
}
}
const xiaomi = new SmartPhone("小米", 1999, "黑色", "5.15inch");
console.log(xiaomi);//SmartPhone {brand: '小米', price: 1999, color: '黑色', size: '5.15inch'}
xiaomi.call();//子类的打电话
xiaomi.photo();//我可以拍照
xiaomi.game();//我可以玩游戏
（5）getter和setter
class Phone {
get price() {
console.log("价格属性被读取");
return 5999;
}
set price(value) {
console.log("价格属性被修改");
}
}
let p = new Phone();
console.log(p.price);//价格属性被读取 //5999
p.price = 6000;//价格属性被修改
3.js的任务调度流程？什么是宏任务微任务？
JavaScript 语言的一大特点就是单线程，也就是说同一个时间只能处理一个任务。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，（事件循环）Event Loop的方案应用而生。
JavaScript 处理任务是在等待任务、执行任务 、休眠等待新任务中不断循环中，也称这种机制为事件循环。
js中有两个异步任务队列：宏任务队列和微任务队列
- 主线程中的同步任务执行完后，才执行异步任务队列中的任务
- 有新任务到来时会将其放入队列，采取先进先执行的策略执行队列中的任务
- 执行优先级：同步任务>微任务队列>宏任务队列
注意点：
- 实例化Promise时执行的代码是同步任务
- 宏任务：setTimout，setInterval，Dom事件，AJAX。其中的计时是计时器模块从程序运行就开始执行计时，到时间再将任务依次放入宏任务队列。
- 微任务：Promise.then()，async/await
1）原理分析
setTimeout(() => {
console.log("定时器");
new Promise(resolve => {
console.log("settimeout Promise");
resolve();
}).then(() => {
console.log("settimeout then");
});
}, 0);
new Promise(resolve => {//同步
console.log("Promise");
resolve();
}).then(() => {//微任务
console.log("then");
});
console.log("后盾人");
//Promise 后盾人 then 定时器 settimeout Promise settimeout then
- 0秒后将setTimeout中的任务加入宏任务队列
- 执行实例化Promise中的同步代码，输出"Promise"
- 改变状态后，将then()方法中的人物加入微任务队列
- 执行同步代码"后盾人"
- 同步代码执行完毕后，去微任务队列询问，执行输出"then"
- 微任务队列执行完毕后，询问宏任务队列，执行代码
- 执行其中同步任务"定时器"，以及实例化Promise的同步代码"settimeout Promise"
- 改变状态后将then()方法中的任务加入微任务队列
- 同步任务执行完毕后，询问微任务队列，并执行输出"settimeout then"
2）脚本加载
引擎在执行同步任务时不会进行DOM渲染，建议将script 放在 BODY 结束标签前，这样会先渲染DOM后再执行任务，页面就不会白页。
<body>
<h1>houdunren.com</h1>
<script src="hd.js"></script>
</body>
3）定时器
定时器计时从程序运行开始，到时放入宏任务队列中，等待同步任务执行后才能执行。HTML标准规定最小时间不能低于4毫秒，有些异步操作如DOM操作最低是16毫秒，总之把时间设置大些对性能更好。
4.js为什么是单线程的？
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
5.setTimeout和setInterval区别？计时器用哪个？
都是window下的方法
1）setTimeout()
在指定的毫秒数后调用函数或计算表达式，仅执行一次，一般用于延迟执行某方法或功能。
setTimeOut在执行其所要调用的方法时除了计算参数时间(时间间隔)还要等待方法执行时间。
setTimeout(function[, delay, arg1, arg2, ...]);
function sayHi(phrase, who) {
alert(phrase + ', ' + who);
}
setTimeout(sayHi, 1000, "Hi", "Alison");//参数是函数名
setTimeout('sayHi("Hi","Alison")', 1000);//参数是函数名
销毁方法：clearTimeout(id); 创建定时器时会返回一个id
2）setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式,方法会不停的调用函数,直到clearInterval()被调用或者窗口被关闭，用于刷新表单。
setInterval在执行其所要调用的方法时严格按照参数时间(时间间隔)执行，不会等待方法执行时间，如果执行方法的时间超过了参数时间(时间间隔)，则setInverval将取消下次执行，进行下下次的方法调用。
function sayHi(phrase, who) {
alert(phrase + ', ' + who);
}
setInterval(sayHi, 2000, "Hi", "Alison");//参数是函数名
setInterval('sayHi("Hi","Alison")', 2000);//参数是函数名
销毁方法：clearInterval(id); 创建定时器时会返回一个id
3）用setTimeout，不用setInterval
由于setInterval的执行时间不会等待方法执行时间，因此当方法执行时间大于设定时间时，会产生“丢帧”现象，从而导致不同定时器的代码执行间隔比预期小。
6.箭头函数和普通函数的区别？箭头函数可以当做构造函数 new 吗？
箭头函数是普通函数的简写，但是它不具备很多普通函数的特性。
- this指向问题：作为回调函数使用时不同（具体可见3.5）
- 获取参数：箭头函数没有arguments对象，不能使用arguments，如果要获取参数的话可以使用rest运算符。
- 构造函数：普通函数可以作为构造函数来用，用new去新建对象实例。箭头函数不可以。
- prototype：箭头函数没有prototype原型，普通函数有。
- return：如果箭头函数仅有一个表达式，那么该表达式的结果会被隐式返回。而普通函数用return去返回一个函数的结果，若无return语句，或者return后面无表达式，则返回undefined。
7.js立即执行函数作用？
使用立即执行函数可以模拟块级作用域，即在一个函数表达式内部声明变量，然后立即调用这个函数。这样位于函数体作用域的变量就像是在块级作用域中一样。ECMAScript 5尚未支持块级作用域，使用立即执行函数模拟块级作用域是相当普遍的。
- 将设置函数中的变量包裹在局部作用域中，不会泄露成全局变量。
- 只执行一次的设置函数
(function () {
for (var i = 0; i < count; i++) {
console.log(i);
}
})();
console.log(i); // 抛出错误：外部访问不到立即执行函数作用域中的变量i
传递参数：
(function (who) {
console.log("I miss you, " + who)
})("kangkang")
(function (global) {
console.log(global)
})(this)
通常全局变量被作为一个参数传递给立即执行参数，这样它在函数内部不使用window也可以被访问到。但不应该给立即执行函数传递太多的参数。
8.什么是原型？什么是原型链？
这部分我是看了一位大佬的文章之后敲敲代码豁然开朗的。此处附上链接：https://blog.csdn.net/cc18868876837/article/details/81211729
提到原型，初学的时候经常会被__proto__和prototype搞得十分混乱。__proto__一般被称为隐式原型，prototype一般被称为显式原型。
牢记：
- __proto__和constructor属性是对象独有的
- prototype属性是函数独有的
此处附上大佬画的图：
函数创建的对象.__proto__ ===该函数.prototype 该函数.prototype.constructor===该函数本身
1）__proto__隐式原型
__proto__属性是由一个对象指向一个对象，也就是指向他们的原型对象。
作用：就是当访问一个对象属性，该对象内部并不存在这个属性，他就会通过__proto__攀升原型链，找他的原型对象是否有该属性，直到原型链顶端null，然后报错。
通过__proto__属性向上攀升找原型对象直到null这样的一条链，就是我们所谓的原型链。我们平时调用的字符串方法、数组方法、对象方法、函数方法等都是靠__proto__继承而来的。
2）prototype显式原型
prototype属性是由一个函数指向一个对象，也就是这个函数所创建的实例的原型对象（也可以理解为函数看作为对象）。因此f1.__proto__ === Foo.prototype
作用：包含所有实例化对象的公共属性和方法。
任何函数在创建的时候都会默认创建该函数的prototype对象。
3）constructor属性
consturctor属性是由一个对象指向一个函数，也就是指向这个对象的构造函数，其中Function对象比较特殊，他的构造函数就是他自己这个Function()方法，因此constructor属性的终点就是Function这个函数。
constructor这个属性来讲，只有prototype对象才有。其他对象都是通过__proto__继承prototype对象而得来的属性。
下面是敲代码验证：
function Foo() { };
let f1 = new Foo();
console.log(f1.__proto__);//是对象，是实例化对象f1指向f1的原型对象
console.log(Foo.prototype); //是对象，是Foo()这个函数指向Foo.prototype对象（类似于把Foo()函数看作是Foo对象，因为js里函数也是对象）
//函数创建的对象.__proto__===该函数.prototype
console.log(f1.__proto__ === Foo.prototype);//f1原型对象就是Foo.prototype这个函数对象
console.log(f1.constructor);//是函数，是由实例化对象f1指向该对象的构造函数Foo(),f1对象本身没有constructor属性，只有prototype对象才有，但是f1.__proto__===Foo.prototype，因此f1原型链上有constructor方法
console.log(Foo.prototype.constructor);//是函数，是由Foo.prototype对象指向该对象构造函数Foo()
console.log(f1.constructor === Foo);
//该函数.prototype.constructor===该函数本身
console.log(Foo.prototype.constructor === Foo);
9.js常用的继承方式有哪些？每个继承方式的优缺点？
原型继承、组合继承、寄生组合继承、es6新特性extends
1）原型继承
Object.create(作为新对象原型的对象[,给新对象定义额外属性的对象])
本质上是对传入的对象执行了一次浅拷贝（仅仅复制对象的引用）
优点：不需要单独创建构造函数，在对象间共享信息。
缺点：子类实例共享了父类构造函数的引用属性。
只有第一个参数：
let person = {
name: "Alison",
friends: ["Ruby", "Andy"]
};
let anotherPerson = Object.create(person);
anotherPerson.name = "Yooo";
anotherPerson.friends.push("Robo");
let yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.name);//Alison
console.log(person.friends);//['Ruby', 'Andy', 'Robo', 'Barbie']引用类型值共享
添加第二个参数：
let person = {
name: "Alison",
friends: ["Ruby", "Andy"]
};
let anotherPerson = Object.create(person, {
name: {
value: "Greg"
}
});
console.log(anotherPerson.name);//Greg
2）组合继承
思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。
优点：既可以把方法定义在原型上实现重用，又可以让每个实例有自己的属性。
缺点：效率问题：父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用。
function SuperType(name) {
this.name = name;
this.colors = ["red", "green", "blue"];
}
SuperType.prototype.sayName = function () {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this, name); //继承属性，第二次调用
this.age = age;
}
SubType.prototype = new SuperType(); //继承方法，第一次调用
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
console.log(this.age);
};
let instance1 = new SubType("Yooo", 29);
instance1.colors.push("black");
console.log(instance1.colors);//['red', 'green', 'blue', 'black']
instance1.sayName();//Yooo
instance1.sayAge();//29
3）寄生组合继承
基本思路是不通过调用父类构造函数给子类原型赋值new SuperType()，而是取得父类原型的一个副本Object.create(SuperType.prototype)。说到底就是使用寄生式继承来继承父类原型，然后将返回的新对象赋值给子类原型。
优点：效率高，只调用了一次
function SuperType(name) {
this.name = name;
this.colors = ["red", "green", "blue"];
}
SuperType.prototype.sayName = function () {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
console.log(this.age);
};
let instance1 = new SubType("Yooo", 29);
instance1.colors.push("black");
console.log(instance1.colors);//['red', 'green', 'blue', 'black']
instance1.sayName();//Yooo
instance1.sayAge();//29
4）extends
寄生组合继承的语法糖。子类只要继承父类，可以不写 constructor ，一旦写了，则在 constructor 中的第一句话必须是super。
class Son extends Father { // Son.prototype.__proto__ = Father.prototype
constructor(y) {
super(200) // super(200) => Father.call(this,200)
this.y = y
}
}
10.async await是做什么的？
async/await 是promise 的语法糖，可以让编写 promise 更清晰易懂。async/await 本质还是promise，使用更清晰的写法来替换 promise.then/catch 的方式。
1）async&await
async：在函数前加上async，函数将返回promise，我们就可以像使用标准Promise一样使用了。
await：await 用于替代 then 使编码更优雅，必须放在 async 定义的函数中使用，一般await后面是外部其它的promise对象。
async function hd(message) {
return new Promise(resolve => {
setTimeout(() => {
resolve(message);
}, 2000);
});
}
async function run() {
let h1 = await hd("Yooo");
console.log(h1);
let h2 = await hd("Alison");
console.log(h2);
}
run();
2）类中使用
和 promise 一样，await 也可以操作thenables 对象
class User {
constructor(name) {
this.name = name;
}
then(resolve, reject) {
let user = ajax(`http://localhost:8888/php/user.php?name=${this.name}`);
resolve(user);
}
}
async function get() {
let user = await new User("Yooo");
console.log(user);
}
get();
类方法也可以通过 async 与 await 来操作promise
class User {
constructor() {}
async get(name) {
let user = await ajax(
`http://localhost:8888/php/user.php?name=${name}`
);
user.name += "-Yooo.com";
return user;
}
}
new User().get("Yooo").then(resolve => {
console.log(resolve);
});
3）错误处理
async 内部发生的错误，会将promise对象变为rejected 状态，所以可以使用catch 来处理。
async function hd() {
console.log(houdunren);
}
hd().catch(error => {
throw new Error(error);
});
如果promise 被拒绝将抛出异常，可以使用 try…catch 处理错误。
async function get(name) {
try {
let user = await ajax(
`http://localhost:8888/php/user.php?name=${name}`
);
console.log(user);
} catch (error) {
alert("用户不存在");
}
}
get("向军老师");
多个 await 时当前面的出现失败，后面的将不可以执行。
4）并发执行
有时需要多个await 同时执行，有以下几种方法处理。
使用 Promise.all() 处理多个promise并行执行。
async function hd() {
await Promise.all([p1(), p2()]);
}
hd();
让promise先执行后再使用await处理结果
async function hd() {
let h1 = p1();
let h2 = p2();
await h1;
await h2;
}
hd();
11.什么是变量提升，什么是函数提升，它们的优先级？
js预编译的时候会出现变量函数提升。
函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖。
1）变量提升
ES6之前，函数没有块级作用域（一对{}即一个块级作用域），只有全局作用域和函数作用域。变量提升是指将变量声明提升到它所在的作用域的最开始部分。
console.log(foo); // undefined
var foo = '小花猫';
console.log(foo) // 小花猫
相当于
var foo;
console.log(foo);
foo = '小花猫';
console.log(foo);
2）函数提升
函数创建有两种方式：
1、函数声明形式；function foo(){}
2、函数字面量形式（即函数表达式）。var foo = function(){}
（还有一种是方式：函数构造法：var a = new Fun()，技术角度来讲也是一个字面量形式。）
【而只有函数声明形式才有函数提升】
console.log(bar); // f bar() { console.log(123) }
bar(); // 123
var bar = 456;
function bar() {
console.log(123);
}
console.log(bar); // 456
bar = 789;
console.log(bar); // 789
bar(); // bar is not a function
相当于
// 函数提升，函数提升优先级高于变量提升
var bar = function () {
console.log(123)
};
// 变量提升，变量提升不会覆盖（同名）函数提升，只有变量再次赋值时，才会被覆盖
var bar;
console.log(bar); // f bar() { console.log(123) }
bar(); //123
// 变量赋值，覆盖同名函数字面量
bar = 456;
console.log(bar); //456
// 再次赋值
bar = 789
console.log(bar); //789
bar(); // bar is not a function,因为被同名变量覆盖了
12.let，var，const区别，TDZ暂时性死区是什么？
- var
- var声明的变量会进行变量提升，而let、const不会
- var可以重复声明
- let
- let声明的变量有块级作用域，只在局部起作用，防止变量污染
- let不可重复声明
- const
- 与let相同
- 不可被改变，如果声明的是对象，是可以修改对象内部的值的
console.log(a);
let a = 1;
//报错：在初始化之前无法访问“a”
在作用域中let、const关键字声明的变量会先被创建出来，但是因为此时没有进行词法绑定（就是对声明语句进行求值运算），所以无法被访问，访问就会抛出错误。所以在变量在作用域中被创建到变量可以被访问这段时间，就称为TDZ暂时性死区。
13.什么是闭包？闭包的作用？闭包的应用？闭包会造成什么问题？
闭包指子函数可以访问外部作用域变量的函数特性。js中所有函数都是闭包，闭包一般在子函数本身作用域以外执行，即延伸作用域。
//使用闭包返回数组区间元素
let arr = [3, 2, 4, 1, 5, 6];
function between(a, b) {
return function(v) {
return v >= a && v <= b;
};
}
console.log(arr.filter(between(3, 5)));
作用：
- 避免命名冲突
- 可以使用函数内部的变量，使变量不会被垃圾回收机制回收
应用：
- 设计模式中的单例模式
- for循环中的保留i的操作
- 防抖和节流
- 函数柯里化
问题：
- 内存泄漏
闭包特性中上级作用域会为函数保存数据，从而造成的如下所示的内存泄漏问题。
<body>
<div desc="houdunren">在线学习</div>
<div desc="hdcms">开源产品</div>
</body>
<script>
let divs = document.querySelectorAll("div");
divs.forEach(function(item) {
item.addEventListener("click", function() {
console.log(item.getAttribute("desc"));
});
});
</script>
上面item会多次创建，占用内存，最终导致内存泄漏。
通过清除每次循环中item解决内存泄漏问题。
let divs = document.querySelectorAll("div");
divs.forEach(function(item) {
let desc = item.getAttribute("desc");
item.addEventListener("click", function() {
console.log(desc);
});
item = null;
});
- this指向
this 总是指向调用该函数的对象（除箭头函数外），即函数在搜索this时只会搜索到当前活动对象。下面是函数因为是在全局环境下调用的，所以this指向window，这不是我们想要的。
let hd = {
user: "后盾人",
get: function() {
return function() {
return this.user;
};
}
};
console.log(hd.get()()); //undefined
使用箭头函数解决这个问题
let hd = {
user: "后盾人",
get: function() {
return () => this.user;
}
};
console.log(hd.get()()); //后盾人
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
