Javascript

1、JS中的instanceof运算符

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

obj instanceof Object;//true 实例obj在不在Object构造函数中

eg：

请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。

function _instanceof(left,right) {
    // 补全代码
    return (left instanceof right )
    
}

2、排序

sort() 方法对数组的项目进行排序。

按升序对数组中的数字进行排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});

按降序对数组中的数字进行排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});

3、JS字符串大写和小写之间的转换

String 字符串大小写转换方法

var s = "JavaScript";
console.log(s.toUpperCase()); 

4、javascript如何删除指定数组元素

1. 使用delete关键字；

   var colors = ["red", "blue", "grey", "green"];
   delete colors[0];
   console.log(colors); // [undefined, "blue", "grey", "green"]
   

   使用delete删除元素之后数组长度不变，只是被删除元素被置为undefined了

2. 使用splice()操作方法；

   var colors = ["red", "blue", "grey"];
   var color = colors.splice(0, 1);
   console.log(color); // "red"
   console.log(colors); // ["blue", "grey"]

   在删除数组元素的时候，它可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。

3. 迭代方法，用循环迭代数组元素，发现符合要删除的项则删除；

   第一种用最常见的ForEach循环来对比元素找到之后将其删除。

   var colors = ["red", "blue", "grey"];
   colors.forEach(function(item, index, arr) {    if(item === "red") {
           arr.splice(index, 1);
       }
   })
   var colors = ["red", "blue", "grey"];
   colors = colors.filter(function(item) {    return item != "red"}); 
   console.log(colors); // ["blue", "grey"]

4. prototype原型方法，在Array的原型上添加方法来达到删除的目的。

5、数组方法

数组方法概括

用slice(0)复制一个数组

a.splice(index,0,item)：在数组a的第index位置插入item

最大值 ;Math.max.apply(Math,array)

6、对象

Number 对象

Number 对象是原始数值的包装对象，创建 Number 对象的语法格式如下：

var myNum = new Number(value);
var myNum = Number(value);

其中 value 为要创建的 Number 对象的数值，若 value 为一个非数字的值，则会尝试将其转换为数字，若转换失败则会返回 NaN。

eg:请补全JavaScript函数，要求将数字参数转换为对象的形式返回。

function _numbertoobject(number) {
    // 补全代码
    var myNum = new Number(number);
    return myNum
    
}

对象字符串

JavaScript String 对象用于处理字符串，其中提供了大量操作字符串的方法，以及一些属性。

创建 String 对象的语法格式如下：

var val = new String(value);
var val = String(value);

对象属性遍历：

• 使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问：

  var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象   
  var keys=[];//定义一个数组用来接受key   
  var values=[];//定义一个数组用来接受value   
    for(var key in obj){   
      keys.push(key);   
      values.push(obj[key]);//取得value     
      }   
  alert("keys is ："+keys+" and values is ："+values);  

• Object.keys(xx)/Object.values(xx)

  console.log(Object.keys(obj));
  console.log(Object.values(obj));
  //输出：["name", "career"]
  //输出：[ "Poly", "it"]

添加属性

//创建obj对象
 var obj = new Object();
 //为对象添加动态属性
 obj.userName = "admin";
 obj.passWord = "123456";
 //输出
 console.log(obj); 

删除对象属性

//创建obj动态对象
var obj = new Object();
//为对象添加动态属性
obj.userName = "admin";
obj.passWord = "123456";    
//移除属性
delete obj.passWord;
console.log(obj);

7、字符串

String 对象中的方法

下表中列举了 String 对象中提供的方法及其描述信息：

去除字符串左右两边的空格

let str = "   123   ";
str=str.trim(); // 123

8、js 时间与时间戳的转换

时间转时间戳：

javascript获得时间戳的方法有四种，都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳

var timetamp4 = Number(new Date()) 

时间戳转时间

function _date(number) {
  let date = new Date(number);
  let y = date.getFullYear();
  let m = date.getMonth()+1;
  let d = date.getDate();
  return (y + "-" + m + "-" + d);  
}

9、Arguments 对象

arguments 是一个对应于传递给函数的参数的类数组对象。

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

10、Document 对象

Document 对象属性和方法

HTML文档中可以使用以下属性和方法:

11、JS中阻止冒泡事件

冒泡事件：比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

<div class="box">
	<button class="btn">按钮</button>
</div>

<script type="text/javascript">
	$('.btn').click(function () {
		alert('按钮被点击了')
	});
	$('.box').click(function () {
		alert('box被点击了')
	})
</script>

当我们点击按钮后，因为按钮也属于.box元素，所以按钮的父元素.box也会触发点击事件

$('.btn').click(function (even) {
	even.stopPropagation();
	alert('按钮被点击了');
})

12、阻止默认事件

<a href="javascript:;">链接</a>

<a href="javascript:void(0);">链接</a>

<a href="" id="link">链接</a>

<script>
        document.getElementById("link").onclick = function (){
            console.log("666");
            return false;
        }
</script>

<a href="" id="link">链接</a>

<script>
    document.getElementById("link").onclick = function (e){
        console.log("666");
        e.preventDefault();
    }
</script>

13、window.location

Location 对象属性

Location 对象方法

14、原型与原型链

原型 prototype

原型是函数特有

<script>
     function fu(){

     }
     fu.prototype.name = 'kif'
     console.log(fu.prototype.name)
 </script>

挂载在原型上是为了继承(通过new)

继承后查找时就近，

判断属性时继承的还是后天添加的：hasOwnProperty

可以拿到p1的私有属性

这个方法既不是Persion也不是p1的，而是Persion继承自Object的

原型链：_proto_

对象，数组，函数等有原型链

预编译

function fn(a,c){
	console.log(a)
	var a =123;
	console.log(a)
	console.log(c)
	function a(){}
	if(false){
		var  d =678
	}
	console.log(d)
	console.log(b)
	var b =function(){}
	console.log(b)
	function c(){}
	console.log(c)
}
fn(2,3)

预编译步骤：

1. 创建AO对象

   AO：{
   
   }

2. 找形参和变量声明

   AO：{
   	a:undefind
   	c:undefind
   	d:undefind
   	bLundefind
   }

3. 实参与形参相统一

   AO：{
   	a:2
   	c:3
   	d:undefind
   	b:undefind
   }

4. 找函数申明（会覆盖变量）

   AO：{
   	a:function a(){}
   	c:function c(){}
   	d:undefind
   	b:undefind
   }

   注:var b =function(){}不是函数声明

5. 逐行执行

   function fn(a,c){
   	console.log(a)//function a(){}
   	var a =123;
   	console.log(a)//123
   	console.log(c)//function c(){}
   	function a(){}
   	if(false){
   		var  d =678
   	}
   	console.log(d)//undefind
   	console.log(b)//undefind
   	var b =function(){}
   	console.log(b)//function(){}
   	function c(){}
   	console.log(c)//function c(){}
   }
   fn(2,3)
   
   

   

15、this

函数直接调用

function get(a){
    console.log(a)
}
get('kif')

其中 get(‘kif’) 其实是get.call(window,’kif’ )

即：对象.方法.call(对象，参数)

对象方法

var Persion = {
    name: 'kif',
    getName: function (time) {
        console.log(this.name,time)
    }
}
Persion.getName(299)

同理：

Persion.getName(299)为：Persion.getName.call(Persion,299)

案例：

var name = 222
var a={
    name :111,
    say:function(){
        console.log(this.name)
    }
}
var fun = a.say
fun()//fun.call(window,)======>222
a.say()//a.say.call(a,)=======>111
var b ={
    name:333,
    say:function(fun){
        fun()//fun.call(window,)//222
    }
}
b.say(a.say)//
b.say=a.say
b.say()//b.say.call(b,)=======>333

箭头函数中this

var x =11
var p ={
    x:22,
    say:()=>{
        console.log(this.x)
    }
}
p.say()

箭头函数中this固定指向代码块外部

this指向（普通函数、箭头函数）

参考答案：

普通函数中的this

1. 谁调用了函数或者方法，那么这个函数或者对象中的this就指向谁

let getThis = function () {
    console.log(this);
}

let obj={
    name:"Jack",
    getThis:function(){
        console.log(this);
    }
}
//getThis()方法是由window在全局作用域中调用的，所以this指向调用该方法的对象，即window
getThis();//window
//此处的getThis()方法是obj这个对象调用的，所以this指向obj
obj.getThis();//obj

1. 匿名函数中的this：匿名函数的执行具有全局性，则匿名函数中的this指向是window，而不是调用该匿名函数的对象；

let obj = {
    getThis: function () {
        return function () {
            console.log(this);
        }
    }
}
obj.getThis()(); //window

上面代码中，getThi()方法是由obj调用，但是obj.getThis()返回的是一个匿名函数，而匿名函数中的this指向window，所以打印出window。 如果想在上述代码中使this指向调用该方法的对象，可以提前把this传值给另外一个变量(_this或者that)：

let obj = {
     getThis: function () {
     //提前保存this指向
         let _this=this
         return function () {
             console.log(_this);
         }
     }
 }
 obj.getThis()(); //obj

1. 箭头函数中的this
   1. 箭头函数中的this是在函数定义的时候就确定下来的，而不是在函数调用的时候确定的；
   2. 箭头函数中的this指向父级作用域的执行上下文；（技巧：因为javascript中除了全局作用域，其他作用域都是由函数创建出来的，所以如果想确定this的指向，则找到离箭头函数最近的function，与该function平级的执行上下文中的this即是箭头函数中的this）
   3. 箭头函数无法使用apply、call和bind方法改变this指向，因为其this值在函数定义的时候就被确定下来。

例1：首先，距离箭头函数最近的是getThis(){}，与该函数平级的执行上下文是obj中的执行上下文，箭头函数中的this就是下注释代码处的this，即obj。

let obj = {
    //此处的this即是箭头函数中的this
    getThis: function () {
        return  ()=> {
            console.log(this);
        }
    }
}
obj.getThis()(); //obj

例2：该段代码中存在两个箭头函数，this找不到对应的function(){}，所以一直往上找直到指向window。

复制代码

 //代码中有两个箭头函数，由于找不到对应的function，所以this会指向window对象。
let obj = {
     getThis: ()=> {
         return  ()=> {
             console.log(this);
         }
     }
 }
 obj.getThis()(); //window

16、闭包

形式：

方法里面返回一个方法

function a() {
        let a = 1;
        return function () {
          return a;
        };
      }

意义：

1. 延长变量生命周期
2. 创建私有环境

Vue中data也是一个闭包

data（）{
	return{
	
	}
}

会常驻内存，所以慎用

17、ES6

var let const

var:

1. 变量提升

   console.log(a)//undefined
   var a = 12

2. 变量覆盖

   var a =12
   var a =23
   console.log(a)//23

3. 没有块级作用域

   function fu(){
   	for(var i=0;i<3;i++){
   		console.log(i)
   	}
   	console.log(i)//3
   }

const:

1. const声明之后必须赋值

2. const定义数组，可以对数组修改

   const arr = ["sad", "666", "qewqe"];
   arr.push('5465')
   console.log(arr)

解构

let a=1;
let b =2;

不使用第三个变量互换值

[a,b]=[b,a]

去重

let arr=[1,2,3,4,5,2,3,4,2]
let ans = [...new Set(arr)]
console.log(ans)

promise

let p = new Promise((resolve, reject) => {
    console.log(1)
    resolve()
    console.log(2)
})
p.then(() => {
    console.log(3)
})
console.log(4)

• 构造函数同步执行 //1,2
• 异步函数异步执行 //4,3

18、xss

xss（cross-site-scripting）攻击指的是攻击者往 web 页面里插入恶意 html 标签或者 javascript 代码 ；
首先代码里对用户输入的地方和变量都需要仔细检查长度和对 “<> , ; . ”等字进行过滤；其次任何内容写到页面之前都必须加 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击 ；
攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器汇总，而不是用户原本以为的信任站点 ；

19、SEO

SEO： Search Engine Optimization, 搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。SEO是提高你网站排名的一个很有效的方法，这个完善和优化你网站的排名因素的方法就是能影响搜索引擎的排名的算法。 因此，SEO是网络营销策略 （online marketing Digital strategy）和数字营销策略 （Digital Marketing strategy）中很重要的一个环节。SEO使你的网站获取得更多的流量（traffic）同时也可以提高你在搜索引擎的排名。那就意味你可以获取得更多的订单，更多的利润。

20、数组去重

ES6：

let  arr = [12, 12, 3, 2, 23, 23, 4, 3, 2];

function unique(arr) {
  return Array.from(new Set(arr));
}
console.log(unique(arr));

let arr = [12, 12, 34, 21, 34, 21, 5, 2, 5];
function unique(arr) {
  return [...new Set(arr)];
}
console.log(unique(arr));

ES5：

let arr = [12, 12, 3, 4, 4, 3, 5, 23, 12, 3];
function unique(arr) {
  let Newarr = [];
  for (let i = 0; i < arr.length; i++) {
    if (Newarr.indexOf(arr[i]) == -1) {
      Newarr.push(arr[i]);
    }
  }
  return Newarr;
}
console.log(unique(arr));

21、数组和伪数组的区别

1. 定义

• 数组是一个特殊对象,与常规对象的区别：
  • 当由新元素添加到列表中时，自动更新length属性
  • 设置length属性，可以截断数组
  • 从Array.protoype中继承了方法
  • 属性为’Array’
• 类数组是一个拥有length属性，并且他属性为非负整数的普通对象，类数组不能直接调用数组方法。

1. 区别
   本质：类数组是简单对象，它的原型关系与数组不同。

// 原型关系和原始值转换
let arrayLike = {
    length: 10,
};
console.log(arrayLike instanceof Array); // false
console.log(arrayLike.__proto__.constructor === Array); // false
console.log(arrayLike.toString()); // [object Object]
console.log(arrayLike.valueOf()); // {length: 10}

let array = [];
console.log(array instanceof Array); // true
console.log(array.__proto__.constructor === Array); // true
console.log(array.toString()); // ''
console.log(array.valueOf()); // []

1. 类数组转换为数组

• 转换方法
  • 使用 Array.from()
  • 使用 Array.prototype.slice.call()
  • 使用 Array.prototype.forEach() 进行属性遍历并组成新的数组
• 转换须知
  • 转换后的数组长度由 length 属性决定。索引不连续时转换结果是连续的，会自动补位。
  • 代码示例

let al1 = {
    length: 4,
    0: 0,
    1: 1,
    3: 3,
    4: 4,
    5: 5,
};
console.log(Array.from(al1)) // [0, 1, undefined, 3]

• ②仅考虑 0或正整数 的索引

// 代码示例
let al2 = {
    length: 4,
    '-1': -1,
    '0': 0,
    a: 'a',
    1: 1
};
console.log(Array.from(al2)); // [0, 1, undefined, undefined]

• ③使用slice转换产生稀疏数组

// 代码示例
let al2 = {
    length: 4,
    '-1': -1,
    '0': 0,
    a: 'a',
    1: 1
};
console.log(Array.prototype.slice.call(al2)); //[0, 1, empty × 2]

1. 使用数组方法操作类数组注意地方

复制代码

let arrayLike2 = {
  2: 3,
  3: 4,
  length: 2,
  push: Array.prototype.push
}

// push 操作的是索引值为 length 的位置
arrayLike2.push(1);
console.log(arrayLike2); // {2: 1, 3: 4, length: 3, push: ƒ}
arrayLike2.push(2);
console.log(arrayLike2); // {2: 1, 3: 2, length: 4, push: ƒ}

22、手写一个发布订阅

// 发布订阅中心, on-订阅, off取消订阅, emit发布, 内部需要一个单独事件中心caches进行存储;
interface CacheProps {
  [key: string]: Array<((data?: unknown) => void)>;
}

class Observer {
  private caches: CacheProps = {}; // 事件中心
  on (eventName: string, fn: (data?: unknown) => void){ // eventName事件名-独一无二, fn订阅后执行的自定义行为
    this.caches[eventName] = this.caches[eventName] || [];
    this.caches[eventName].push(fn);
  }

  emit (eventName: string, data?: unknown) { // 发布 => 将订阅的事件进行统一执行
    if (this.caches[eventName]) {
      this.caches[eventName].forEach((fn: (data?: unknown) => void) => fn(data));
    }
  }

  off (eventName: string, fn?: (data?: unknown) => void) { // 取消订阅 => 若fn不传, 直接取消该事件所有订阅信息
    if (this.caches[eventName]) {
      const newCaches = fn ? this.caches[eventName].filter(e => e !== fn) : [];
      this.caches[eventName] = newCaches;
    }
  }

}

23、介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

参考答案：

Set

1. 成员不能重复；
2. 只有键值，没有键名，有点类似数组；
3. 可以遍历，方法有 add、delete、has

WeakSet

1. 成员都是对象（引用）；
2. 成员都是弱引用，随时可以消失（不计入垃圾回收机制）。可以用来保存 DOM 节点，不容易造成内存泄露；
3. 不能遍历，方法有 add、delete、has；

Map

1. 本质上是键值对的集合，类似集合；
2. 可以遍历，方法很多，可以跟各种数据格式转换；

WeakMap

1. 只接收对象为键名（null 除外），不接受其他类型的值作为键名；
2. 键名指向的对象，不计入垃圾回收机制；
3. 不能遍历，方法同 get、set、has、delete；

24、简单说说 js 中有哪几种内存泄露的情况

1. 意外的全局变量；
2. 闭包；
3. 未被清空的定时器；
4. 未被销毁的事件监听；
5. DOM 引用；

25、json和xml数据的区别

参考答案：

1. 数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。
2. 数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。
3. 数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互
4. 数据描述方面：json对数据的描述性比xml较差
5. xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

26、JavaScript有几种方法判断变量的类型?

参考答案：

1. 使用typeof检测当需要判断变量是否是number, string, boolean, function, undefined等类型时，可以使用typeof进行判断。
2. 使用instanceof检测instanceof运算符与typeof运算符相似，用于识别正在处理的对象的类型。与typeof方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。
3. 使用constructor检测constructor本来是原型对象上的属性，指向构造函数。但是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的。

27、Math

Math 对象方法

Math.max(...[14, 3, 77])  //ES6 的写法，等同于Math.max(14, 3, 77)

题目：

var min = Math.min();
var max = Math.max();
console.log(min < max);
// 写出执行结果，并解释原因

答案
false

解析

• 按常规的思路，这段代码应该输出 true，毕竟最小值小于最大值。但是却输出 false
• MDN 相关文档是这样解释的
  • Math.min 的参数是 0 个或者多个，如果多个参数很容易理解，返回参数中最小的。如果没有参数，则返回 Infinity，无穷大。
  • 而 Math.max 没有传递参数时返回的是-Infinity.所以输出 false

28、promise和 async await 区别

参考答案：

• 概念
  Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

  async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

• 两者的区别

  1. Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
  2. async await与Promise一样，是非阻塞的。
  3. async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

29、 defer和async区别

参考答案：

区别主要在于一个执行时间,defer会在文档解析完之后执行,并且多个defer会按照顺序执行,而async则是在js加载好之后就会执行,并且多个async,哪个加载好就执行哪个

解析：

在没有defer或者async的情况下：会立即执行脚本,所以通常建议把script放在body最后

<script src="script.js"></script>

async：有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
但是多个js文件的加载顺序不会按照书写顺序进行

<script async src="script.js"></script>

derer：有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成,并且多个defer会按照顺序进行加载。

<script defer src="script.js"></script>

30、同步和异步

参考答案：

同步

• 指在 主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。
• 也就是调用一旦开始，必须这个调用 返回结果(划重点——）才能继续往后执行。程序的执行顺序和任务排列顺序是一致的。

异步

• 异步任务是指不进入主线程，而进入 任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
• 每一个任务有一个或多个 回调函数。前一个任务结束后，不是执行后一个任务,而是执行回调函数，后一个任务则是不等前一个任务结束就执行。
• 程序的执行顺序和任务的排列顺序是不一致的，异步的。
• 我们常用的setTimeout和setInterval函数，Ajax都是异步操作。

31、 实现异步的方法

参考答案：

回调函数（Callback）、事件监听、发布订阅、Promise/A+、生成器Generators/ yield、async/await

1. JS 异步编程进化史：callback -> promise -> generator -> async + await

2. async/await 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。

3. async/await可以说是异步终极解决方案了。

   (1) async/await函数相对于Promise，优势体现在：

   • 处理 then 的调用链，能够更清晰准确的写出代码
   • 并且也能优雅地解决回调地狱问题。

   当然async/await函数也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低，代码没有依赖性的话，完全可以使用 Promise.all 的方式。

   (2) async/await函数对 Generator 函数的改进，体现在以下三点：

   • 内置执行器。 Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
   • 更广的适用性。 co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
   • 更好的语义。 async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。

4. async/await

   Async/Await简介

   使用async/await，你可以轻松地达成之前使用生成器和co函数所做到的工作,它有如下特点：

   1. async/await是基于Promise实现的，它不能用于普通的回调函数。

   2. async/await与Promise一样，是非阻塞的。

   3. async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

   一个函数如果加上 async ，那么该函数就会返回一个 Promise

   async function async1() {
     return "1"
   }
   console.log(async1()) // -> Promise {<resolved>: "1"}

   Generator函数依次调用三个文件那个例子用async/await写法，只需几句话便可实现

   let fs = require('fs')
   function read(file) {
     return new Promise(function(resolve, reject) {
       fs.readFile(file, 'utf8', function(err, data) {
         if (err) reject(err)
         resolve(data)
       })
     })
   }
   async function readResult(params) {
     try {
       let p1 = await read(params, 'utf8')//await后面跟的是一个Promise实例
       let p2 = await read(p1, 'utf8')
       let p3 = await read(p2, 'utf8')
       console.log('p1', p1)
       console.log('p2', p2)
       console.log('p3', p3)
       return p3
     } catch (error) {
       console.log(error)
     }
   }
   readResult('1.txt').then( // async函数返回的也是个promise
     data => {
       console.log(data)
     },
     err => console.log(err)
   )
   // p1 2.txt
   // p2 3.txt
   // p3 结束
   // 结束

5.2 Async/Await并发请求

如果请求两个文件，毫无关系，可以通过并发请求

let fs = require('fs')
function read(file) {
  return new Promise(function(resolve, reject) {
    fs.readFile(file, 'utf8', function(err, data) {
      if (err) reject(err)
      resolve(data)
    })
  })
}
function readAll() {
  read1()
  read2()//这个函数同步执行
}
async function read1() {
  let r = await read('1.txt','utf8')
  console.log(r)
}
async function read2() {
  let r = await read('2.txt','utf8')
  console.log(r)
}
readAll() // 2.txt 3.txt

32、 promise的介绍与使用

Promise 介绍：

ES6中的Promise 是异步编程的一种方案。从语法上讲，Promise 是一个对象，它可以获取异步操作的消息。

Promise对象, 可以将异步操作以同步的流程表达出来。使用 Promise 主要有以下好处：

• 可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。
• 语法非常简洁。Promise 对象提供了简洁的API，使得控制异步操作更加容易。

Promise 使用：

语法

var promise = new Promise((resolve, reject) => {/* executor函数 */
    // ... some code
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});
promise.then((value) => {
    //success
}, (error) => {
    //failure
})

1. 参数
   executor 函数在Promise构造函数执行时同步执行，被传递 resolve 和 reject 函数（executor函数在Promise构造函数返回新建对象前被调用）。
   executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled(完成)，或者将promise的状态改为rejected(失败)。
   如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。
2. 简单使用

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
    });
}

timeout(2000).then((value) => {
    console.log(value); //done
});

原型方法

Promise.prototype.then(onFulfilled, onRejected)

1. 语法
   p.then(onFulfilled, onRejected);
p.then((value) => {// fulfillment}, (reason) => {// rejection});

2. 含义
   为 Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

3. 链式操作
   then方法返回的是一个新的promise，因此可以采用链式写法，即then方法后面再调用另一个then方法。

   new Promise(resolve => {
       resolve(1);
   })
       .then(result => console.log(result)) //1
       .then(result => {
           console.log(result);              //undefined
           return 2;
       })
       .then(result => {
           console.log(result);             //2
           throw new Error("err");
       })
       .then((result) =>{
           console.log(result);            
       }, (err)=>{
           console.log(err);                //Error: err
           return 3;
       })
       .then((result) => {
           console.log(result);            //3
       })

   注意：①不管是then方法的onfulfilled函数参数执行还是onrejected（可选参数）函数参数执行，then方法返回的都是一个新的Promise对象，都可以继续采用链式写法调用另一个then方法。②Promise.prototype.catch()方法返回的也是一个Promise对象。then方法和catch方法可以链式操作。

4. 返回值
   then方法返回一个Promise，而它的行为与then中的被调用的回调函数(onfulfilled函数/onrejected函数)的返回值有关。
   (1) 如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

   new Promise((resolve, reject) => {
       reject();
   })
   .then( () => 99, () => 42 )
   .then( result => console.log(result)); // 42

   (2) 如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

   new Promise((resolve, reject) => {
       resolve();
   })
       .then( () => {throw new Error('err')}, () => {})
       .then( () => {}, (err) => {console.log(err)}); //Error: err

   (3) 如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

   new Promise((resolve, reject) => {
       resolve();
   })
       .then( () => {
           return new Promise(resolve => resolve('ok'));
       })
       .then( (result) => {console.log(result)}); //ok

   (4) 如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

   new Promise((resolve, reject) => {
       resolve();
   })
       .then( () => {
           return new Promise((resolve, reject) => {
              reject(new Error('err'));
           });
       })
       .then( () => {}, (err) => {console.log(err)}); //Error: err

   (5) 如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

   new Promise((resolve, reject) => {
       resolve();
   })
   .then(() => {
       return new Promise(resolve => {
           setTimeout(resolve, 2000, 'ok');
       });
   })
   .then( (result) => {console.log(result)}); //ok

   注意：这里是then方法中被调用回调函数的返回值与then方法返回的Promise对象状态之间的关系。

Promise.prototype.catch(onRejected)

1. 语法

   p.catch(onRejected);
   
   p.catch(function(reason) {
       // 拒绝
   });

2. 含义
   Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数，返回一个新的promise对象。

3. 用法

   const p = new Promise((resolve,reject) => {
       return reject(new Error('err')); //reject方法的作用，等同于抛出错误
       //throw new Error('err');
   });
   
   p.then(null, (err) => {
       console.log(err);  //Err: err
   });
   
   //--------等价写法---------
   p.catch(err => {
       console.log(err); //Err: err
   })

   注意：由于.catch方法是.then(null, rejection)的别名，故.then中的链式操作(3)、返回值(4)等语法在.catch中都适用。

4. 一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。

5. Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。 即：当前catch方法可以捕获上一个catch方法(包括上一个catch)到当前catch(不包括当前catch)方法之间所有的错误，如果没有错误，则当前catch方法不执行。

   new Promise(() => {
       throw new Error('err1');
   })
       .then(() => {console.log(1);})
       .then(() => {console.log(2);})
       .catch((err) => {
           console.log(err); //Err: err1
           throw  new Error('err2');
       })
       .catch((err) => {console.log(err);})//Err: err2

6. 一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。

   // bad
   new Promise()
       .then((data) => {/* success */ }, (err) => {/* error */ });
   
   // good
   new Promise()
       .then((data) => { /* success */ })
       .catch((err) => {/* error */ });

   上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法。

7. 与传统的try/catch代码块不同的是，即使没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误也不会中止外部脚本运行。

   new Promise((resolve) => {
       // 下面一行会报错，因为x没有声明
       resolve(x + 2);
   }).then(() => {
       console.log('ok');
   });
   setTimeout(() => {console.log('over')});
   //Uncaught (in promise) ReferenceError: x is not defined
   //over

8. 在异步函数中抛出的错误不会被catch捕获到

   new Promise((resolve, reject) => {
       setTimeout(() => {
           throw 'Uncaught Exception!';
       }, 1000);
   }).catch(() => {
       console.log('err'); //不会执行
   });
   
   new Promise((resolve, reject) => {
       setTimeout(() => {
           reject();
       }, 1000);
   }).catch(() => {
       console.log('err'); //err
   });

9. 在resolve()后面抛出的错误会被忽略

   new Promise((resolve, reject) => {
       resolve();
       throw 'Silenced Exception!';
   }).catch(function(e) {
       console.log(e); // 不会执行
   });

Promise.all(iterable)

1. 语法
   var p = Promise.all([p1, p2, p3]);

2. 含义
   Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）
   p的状态由p1、p2、p3决定，分成两种情况。
   (1) 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
   (2) 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

3. 用法

   const p1 = 'p1-ok';
   const p2 = Promise.resolve('p2-ok');
   const p3 = new Promise((resolve) => setTimeout(resolve, 3000, 'p3-ok'));
   const p4 = Promise.reject('p4-err');
   Promise.all([p1, p2, p3])
       .then((resolves) => {
         resolves.forEach(resolve => {
             console.log(resolve); //p1-ok   p2-ok  p3-ok
         });
       })
       .catch(() => {
         console.log('err');
       });
   
   Promise.all([p1, p2, p3, p4])
       .then(() => {
         console.log('ok');
       })
       .catch((err) => {
          console.log(err); //p4-err
       })

Promise.race(iterable)

1. 语法
   var p = Promise.race([p1, p2, p3]);

2. 含义
   Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
   Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。

3. 用法

   var p1 = new Promise(resolve => {setTimeout(resolve, 500, "one");});
   var p2 = new Promise(resolve => {setTimeout(resolve, 100, "two");});
   Promise.race([p1, p2])
       .then(value => {
           console.log(value); // "two"
       });
   
   var p3 = new Promise(resolve => {setTimeout(resolve, 100, "three");});
   var p4 = new Promise((resolve, reject) => {setTimeout(reject, 500, "four");});
   
   Promise.race([p3, p4])
       .then((value) => {
           console.log(value); // "three"
       })
       .catch(err => {
           // 未被调用  
       });
   
   var p5 = new Promise(resolve => {setTimeout(resolve, 500, "five");});
   var p6 = new Promise((resolve, reject) => {
             setTimeout(reject, 100, "six");
         });
   
   Promise.race([p5, p6])
       .then((value) => {
         // 未被调用             
       }).catch((reason) => {
           console.log(reason); // "six"
       });

Promise.resolve(value)

1. 语法

   Promise.resolve(value);
   Promise.resolve(promise);
   Promise.resolve(thenable);

   Promise.resolve等价于下面的写法。

   Promise.resolve(value) ;
   // 等价于
   new Promise(resolve => resolve(value));

2. 含义
   返回一个状态由给定value决定的Promise实例。

3. 用法
   (1) 如果该值是一个Promise对象，则直接返回该对象；

   const p = new Promise((resolve) => {resolve()});
   const p2 = Promise.resolve(p);
   console.log(p === p2); //true

   (2) 如果参数是thenable对象(即带有then方法的对象)，则返回的Promise对象的最终状态由then方法的执行决定；

   const thenable = {
       then(resolve, reject) {
           resolve(42);
       }
   };
   Promise.resolve(thenable)
       .then((value) => {
           console.log(value);  // 42
       });

   (3) 如果参数是不具有then方法的对象或基本数据类型，则返回的Promise对象的状态为fulfilled，并且将该参数传递给then方法。

   Promise.resolve('Hello')
       .then((s) => {
           console.log(s); //Hello
       });

   (4) 如果不带有任何参数，则返回的Promise对象的状态为fulfilled，并且将undefined作为参数传递给then方法。

   Promise.resolve()
       .then((s) => {
           console.log(s); //undefined
       });

4. 通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

5. 立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

   setTimeout(function () {
       console.log('three');
   }, 0);
   
   Promise.resolve().then( () => {
       console.log('two');
   });
   
   console.log('one');
   // one 
   // two
   // three

Promise.reject(reason)

1. 语法

   Promise.reject(reason);

   Promise.reject等价于下面的写法。

   var p = Promise.reject(reason);
   // 等同于
   var p = new Promise((resolve, reject) => reject(reason));

2. 含义
   返回一个状态为rejected的Promise对象，并将给定的失败信息传递给对应的处理方法。

注意：Promise.resolve(value)方法返回的Promise实例的状态由value决定，可能是fulfilled，也可能是rejected。Promise.reject(reason)方法返回的Promise实例的状态一定是rejected。

1. 用法

   Promise.reject("Testing static reject")
       .then((value) => {
           // 未被调用
       }).catch((reason) => {
           console.log(reason); // Testing static reject
       });
   
   Promise.reject(new Error("fail"))
       .then((value) => {
           // 未被调用
       }).catch((error) => {
           console.log(error); // Error: fail
       });

2. Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

   const thenable = {
       then(resolve) {
           resolve('ok');
       }
   };
   
   Promise.resolve(thenable)
       .then(e => {
           console.log(e === 'ok'); //true
       });
   
   Promise.reject(thenable)
       .catch(e => {
           console.log(e === thenable); // true
       });

与promise.all相反的是哪一个

参考答案：

Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

扩展：

语法

Promise.race(iterable);

参数

• iterable

  可迭代对象，类似Array

返回值

一个待定的 Promise]只要给定的迭代中的一个promise解决或拒绝，就采用第一个promise的值作为它的值， 从而异步地解析或拒绝（一旦堆栈为空）

33、promise实现文件读取

// const fs = require("fs");
import fs from "fs";
import path from "path";
const __dirname = path.resolve();
function readFile(file) {
  return new Promise((resolve, reject) => {
    fs.readFile(path.join(__dirname, file), (err, data) => {
      if (data) {
        resolve(data.toString());
      } else {
        reject(err);
      }
    });
  });
}

readFile("./JavaScript/promise/file/file1.txt")
  .then((data) => {
    console.log(data);
    return readFile("./JavaScript/promise/file/file1.txt");
  })
  .then((data) => {
    console.log(data);
  });

33、用js实现sleep，用promise

function SLeep_p(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

SLeep_p(2000).then(() => {
  console.log("kif");
});

34、js执行顺序的题目，涉及到settimeout、console、process.nextTick、promise.then

console.time('start');

setTimeout(function() {
  console.log(2);
}, 10);

setImmediate(function() {
  console.log(1);
});

new Promise(function(resolve) {
  console.log(3);
  resolve();
  console.log(4);
}).then(function() {
  console.log(5);
  console.timeEnd('start')
});

console.log(6);

process.nextTick(function() {
  console.log(7);
});

console.log(8);

参考答案：

综合的执行顺序就是： 3——>4——>6——>8——>7——>5——>start: 7.009ms——>1——>2

解析：

本题目，考察的就是 node 事件循环 Event Loop 我们可以简单理解Event Loop如下：

1. 所有任务都在主线程上执行，形成一个执行栈(Execution Context Stack)
2. 在主线程之外还存在一个任务队列(Task Queen),系统把异步任务放到任务队列中，然后主线程继续执行后续的任务
3. 一旦执行栈中所有的任务执行完毕，系统就会读取任务队列。如果这时异步任务已结束等待状态，就会从任务队列进入执行栈，恢复执行
4. 主线程不断重复上面的第三步

在上述的例子中，我们明白首先执行主线程中的同步任务，因此依次输出3、4、6、8。当主线程任务执行完毕后，再从Event Loop中读取任务。

Event Loop读取任务的先后顺序，取决于任务队列（Job queue）中对于不同任务读取规则的限定。

在Job queue中的队列分为两种类型：

宏任务 Macrotask 宏任务是指Event Loop在每个阶段执行的任务

微任务 Microtask 微任务是指Event Loop在每个阶段之间执行的任务

我们举例来看执行顺序的规定，我们假设

宏任务队列包含任务: A1, A2 , A3

微任务队列包含任务: B1, B2 , B3

执行顺序为，首先执行宏任务队列开头的任务，也就是 A1 任务，执行完毕后，在执行微任务队列里的所有任务，也就是依次执行B1, B2 , B3，执行完后清空微任务队中的任务，接着执行宏任务中的第二个任务A2，依次循环。

了解完了宏任务 Macrotask和微任务 Microtask两种队列的执行顺序之后，我们接着来看，真实场景下这两种类型的队列里真正包含的任务（我们以node V8引擎为例），在node V8中，这两种类型的真实任务顺序如下所示：

宏任务 Macrotask队列真实包含任务：

script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering

微任务 Microtask队列真实包含任务：

process.nextTick, Promises, Object.observe, MutationObserver

由此我们得到的执行顺序应该为：

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

在ES6中宏任务 Macrotask队列又称为ScriptJobs，而微任务 Microtask又称PromiseJobs

我们的题目相对复杂，但是要注意，我们在定义promise的时候，promise构造部分是同步执行的

接下来我们分析我们的题目，首先分析Job queue的执行顺序：

script(主程序代码)——>process.nextTick——>promise——>setTimeout——>setImmediate

• 主体部分： 定义promise的构造部分是同步的，因此先输出3、4 ，主体部分再输出6、8（同步情况下，就是严格按照定义的先后顺序）
• process.nextTick: 输出7
• promise： 这里的promise部分，严格的说其实是promise.then部分，输出的是5、以及 timeEnd(‘start’)
• setImmediate：输出1，依据上面优先级，应该先setTimeout，但是注意，setTimeout 设置 10ms 延时
• setTimeout ： 输出2

35、call appy bind的作用和区别

参考答案：

作用：

都可以改变函数内部的this指向。

区别点：

1. call 和 apply 会调用函数，并且改变函数内部this指向。
2. call 和 apply 传递的参数不一样，call 传递参数arg1,arg2…形式 apply 必须数组形式[arg]
3. bind 不会调用函数，可以改变函数内部this指向。

解析：

call方法

改变函数内部this指向

call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向。

写法：fun.call(thisArg, arg1, arg3, …) // thisArg为想要指向的对象，arg1,arg3为参数

call 的主要作用也可以实现继承

apply方法

apply()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的this指向。

写法：fun.apply(thisArg, [argsArray])

• thisArg:在fun函数运行时指定的this值
• argsArray:传递的值，必须包含在数组里面
• 返回值就是函数的返回值，因为他就是调用函数

apply的主要应用，比如可以利用apply可以求得数组中最大值

const arr = [1, 22, 3, 44, 5, 66, 7, 88, 9];``const max = Math.max.apply(Math, arr);``console.log(max);

bind方法

bind()方法不会调用函数，但是能改变函数内部this指向

写法：fun.bind(thisArg, arg1, arg2, …)

• thisArg:在fun函数运行时指定的this值
• arg1,arg2:传递的其他参数
• 返回由指定的this值和初始化参数改造的原函数拷贝

var` `o = {``  ``name: ``"lisa"``};``function` `fn() {``  ``console.log(``this``);``}``var` `f = fn.bind(o);``f();

bind应用

如果有的函数我们不需要立即调用，但是又需要改变这个函数的this指向，此时用bind再合适不过了

const btns = document.querySelectorAll(``"button"``);``for` `(let i = 0; i < btns.length; i++) {``  ``btns[i].onclick = ``function``() {``   ``this``.disabled = ``true``;``   ``setTimeout(``    ``function``() {``     ``this``.disabled = ``false``;``    ``}.bind(``this``),``    ``2000``   ``);``  ``};``}

扩展:

主要应用场景：

1. call 经常做继承。
2. apply 经常跟数组有关系，比如借助于数学对象实现数组最大值最小值。
3. bind 不调用函数，但是还想改变this指向，比如改变定时器内部的this指向。

手写bind

// bind体验
// 改变this指向

function func(...args) {
    console.log(this)
    console.log(args)
}
// func(1, 2, 3, 4)
// undefined
// [ 1, 2, 3, 4 ]

let Fu = func.bind({ a: 1 }, 1, 2, 3, 4)
// Fu()
// { a: 1 }
// [ 1, 2, 3, 4 ]
let Fu2 = func.bind(1, 1, 2, 3, 4)
// Fu2()
// 1
// [ 1, 2, 3, 4 ]

// bind实现思路：
// 判断是否是函数调用，若非函数调用抛出异常

// 返回函数

// 判断函数的调用方式，是否是被new出来的
// new出来的话，返回空对象，但是实例的 __ proto__ 指向_this的prototype
var age = 16;
var gender = 'female';

var obj = {
    age: 11,
    gender: 'male'
}

function Test(a, b) {
    //   console.log(this.age);
    //   console.log(this.gender);
    console.log(this)
    if (this) {
        console.log(this.age);
        console.log(this.gender);
    }
    console.log(a);
    console.log(b);
}

Test.bind(obj, 3, 7)()

Function.prototype.myBind = function (obj, ...args) {
    obj.fn = this
    let result
    return function () {
        result = obj.fn(...args)
        delete obj.fn
        return result
    }
}
Test.myBind(obj,3,8)()

手写call

// 思路
// 判断是否是函数调用，若非函数调用抛异常
// 通过新对象（context）来调用函数
// 给context创建一个fn设置为需要调用的函数
// 结束调用完之后删除fn


// Function.prototype.myCall = function (contents) {
//     //判断是否是函数调用，不是就抛出异常
//     //这里的this 就是调用my_call的
//     if (typeof this !== 'function') {
//         return
//     }
//     // 不传参默认为window
//     contents = contents || window
//     // 保存this
//     contents.fn = this
//     // 获取参数
//     let args = [...arguments].slice(1)
//     let result = contents.fn(...args)
//     delete contents.fn

//     return result

// }
var age = 16;
var gender = 'female';

var obj = {
    age: 11,
    gender: 'male'
}

function Test(a, b) {
    //   console.log(this.age);
    //   console.log(this.gender);
    console.log(this)
    if (this) {
        console.log(this.age);
        console.log(this.gender);
    }
    console.log(a);
    console.log(b);
}
// Test(3, 5);
// Test.call(obj, 22, 33);

Function.prototype.myCall = function (obj, ...args) {
    if (typeof this !== 'function') {
        return
    }
    obj.fn = this
    let result = obj.fn(...args)
    delete obj.fn
    return result
}
Test.myCall(obj,3,6)

手写apply

// 思路
// 判断是否是函数调用，若非函数调用抛异常
// 通过新对象（context）来调用函数
// 给context创建一个fn设置为需要调用的函数
// 结束调用完之后删除fn


Function.prototype.myApply = function (context) {
    if (typeof this !== 'function') {
        return
    }
    context = context || window
    context.fn = this
    let args = [...arguments].slice(1)
    let result = context.fn(...args)
    delete context.fn
    return result
}

36、继承，优缺点

参考答案：

• 继承的好处
  • a：提高了代码的复用性
  • b：提高了代码的维护性
  • c：让类与类之间产生了关系，是多态的前提
• 继承的弊端
  • 类的耦合性增强了,但是开发的原则：高内聚，低耦合。

37、ES5 js继承的方法和优缺点

参考答案：

1. 原型链继承

   实现方式：将子类的原型链指向父类的对象实例

   function Parent(){
     this.name = "parent";
     this.list = ['a'];
   }
   Parent.prototype.sayHi = function(){
     console.log('hi');
   }
   function Child(){
   
   }
   Child.prototype = new Parent();
   var child = new Child();
   console.log(child.name);
   child.sayHi();

   原理：子类实例child的__proto__指向Child的原型链prototype，而Child.prototype指向Parent类的对象实例，该父类对象实例的__proto__指向Parent.prototype,所以Child可继承Parent的构造函数属性、方法和原型链属性、方法
   优点：可继承构造函数的属性，父类构造函数的属性，父类原型的属性
   缺点：无法向父类构造函数传参；且所有实例共享父类实例的属性，若父类共有属性为引用类型，一个子类实例更改父类构造函数共有属性时会导致继承的共有属性发生变化；实例如下：

   var a = new Child();
   var b = new Child();
   a.list.push('b');
   console.log(b.list); // ['a','b']

2. 构造函数继承

   实现方式：在子类构造函数中使用call或者apply劫持父类构造函数方法，并传入参数

   function Parent(name, id){
     this.id = id;
     this.name = name;
     this.printName = function(){
       console.log(this.name);
     }
   }
   Parent.prototype.sayName = function(){
     console.log(this.name);
   };
   function Child(name, id){
     Parent.call(this, name, id);
     // Parent.apply(this, arguments);
   }
   var child = new Child("jin", "1");
   child.printName(); // jin
   child.sayName() // Error

   原理：使用call或者apply更改子类函数的作用域，使this执行父类构造函数，子类因此可以继承父类共有属性
   优点：可解决原型链继承的缺点
   缺点：不可继承父类的原型链方法，构造函数不可复用

3. 组合继承

   原理：综合使用构造函数继承和原型链继承

   function Parent(name, id){
     this.id = id;
     this.name = name;
     this.list = ['a'];
     this.printName = function(){
       console.log(this.name);
     }
   }
   Parent.prototype.sayName = function(){
     console.log(this.name);
   };
   function Child(name, id){
     Parent.call(this, name, id);
     // Parent.apply(this, arguments);
   }
   Child.prototype = new Parent();
   var child = new Child("jin", "1");
   child.printName(); // jin
   child.sayName() // jin
   
   var a = new Child();
   var b = new Child();
   a.list.push('b');
   console.log(b.list); // ['a']

   优点：可继承父类原型上的属性，且可传参；每个新实例引入的构造函数是私有的
   缺点：会执行两次父类的构造函数，消耗较大内存，子类的构造函数会代替原型上的那个父类构造函数

4. 原型式继承

   原理：类似Object.create，用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象，结果是将子对象的__proto__指向父对象

   var parent = {
     names: ['a']
   }
   function copy(object) {
     function F() {}
     F.prototype = object;    
     return new F();
   }
   var child = copy(parent);

   缺点：共享引用类型

5. 寄生式继承

   原理：二次封装原型式继承，并拓展

   function createObject(obj) {
     var o = copy(obj);
     o.getNames = function() {
       console.log(this.names);
       return this.names;
     }
     return o;
   }

   优点：可添加新的属性和方法

6. 寄生组合式继承

   原理：改进组合继承，利用寄生式继承的思想继承原型

   function inheritPrototype(subClass, superClass) {
     // 复制一份父类的原型
     var p = copy(superClass.prototype);
     // 修正构造函数
     p.constructor = subClass;
     // 设置子类原型
     subClass.prototype = p;
   }
   
   function Parent(name, id){
     this.id = id;
     this.name = name;
     this.list = ['a'];
     this.printName = function(){
       console.log(this.name);
     }
   }
   Parent.prototype.sayName = function(){
     console.log(this.name);
   };
   function Child(name, id){
     Parent.call(this, name, id);
     // Parent.apply(this, arguments);
   }
   inheritPrototype(Child, Parent);

38、ES6继承

class Parent {
  constructor() {
    this.name = "kif";
    this.age = 12;
  }
}
class Child extends Parent {
  constructor(id) {
    super();
    this.id = id;
  }
}

let p = new Child();
console.log(p.name);

39、扩展操作符…

适用类型：数组、对象、字符串。

复杂数据类型都可以，当要转化为可迭代数据结构时可设置对象的迭代器对扩展运算符扩展出来的值进行操作。

基础数据只有string可以使用扩展运算符，number,boolean,null,undefined无效

扩展运算符的应用场景

// 1、函数调用
function add(x, y) {
  return x + y;
}
add(...[4, 38]);

function f(v, w, x, y, z) {  }
f(-1, ...[0, 1], 2, ...[3]);
// 123456789

//2.往数组里push多个元素
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);  
console.log(arr1); //[0,1,2,3,4,5]
//123456

//3.替代函数的apply方法
function f(x, y, z) {  }  
var args = [0, 1, 2];
f.apply(null, args); //ES5 的写法
f(...args); //ES6的写法
// 123456

//4.求一个数组的最大数简化
Math.max.apply(null, [14, 3, 77])  //ES5 的写法
Math.max(...[14, 3, 77])  //ES6 的写法，等同于Math.max(14, 3, 77)
//1234

//5.扩展运算符后面可以放表达式
const arr = [...(5 > 0 ? ['a'] : []),'b'];
console.log(arr);  //['a','b'] 
//1234

//6.与解构赋值结合，用于生成数组
const a1 = [1, 2];
const a2 = [...a1];  //写法1
const [...a2] = a1;  //写法2
const [first, ...rest] = [1, 2, 3, 4, 5];
first  //1
rest  //[2, 3, 4, 5]

const [first, ...rest] = [];
first  //undefined
rest  //[]

const [first, ...rest] = ["foo"];
first  //"foo"
rest   //[]
//1234567891011121314151617

//7.合并数组
[...arr1, ...arr2, ...arr3]  //[ 'a', 'b', 'c', 'd', 'e' ]


//8.数组的克隆——————————————————————特别注意
var arr1 = [0, 1, 2];
var arr2 = [...arr1];
arr1[0]=100;
console.log(arr2); //[0, 1, 2]  

/* 乍一看，arr2与arr1不共用引用地址，arr2不随着arr1变化，接着往下看 */

var arr1 = [0, [1,11,111], 2];
var arr2 = [...arr1];
arr1[1][0]=100;
console.log(arr2); //[0, [100,11,111], 2]

40、为什么js是单线程

参考答案：

这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变

扩展：

什么是进程？

进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）

什么是线程？

线程：是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

浏览器是多进程的？

放在浏览器中，每打开一个tab页面，其实就是新开了一个进程，在这个进程中，还有ui渲染线程，js引擎线程，http请求线程等。 所以，浏览器是一个多进程的。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

41、死锁

参考答案：

死锁是指两个或两个以上的进程在执行过程中，由于竞争资源而造成阻塞的现象，若无外力作用，它们都将无法继续执行

产生原因

• 竞争资源引起进程死锁
• 可剥夺和非剥夺资源
• 竞争非剥夺资源
• 竞争临时性资源
• 进程推进顺序不当

产生条件

1. 互斥条件：涉及的资源是非共享的
   • 涉及的资源是非共享的,一段时间内某资源只由一个进程占用,如果此时还有其它进程请求资源，则请求者只能等待，直至占有资源的进程用毕释放
2. 不剥夺条件：不能强行剥夺进程拥有的资源
   • 进程已获得的资源，在未使用完之前，不能被剥夺，只能在使用完时由自己释放
3. 请求和保持条件：进程在等待一新资源时继续占有已分配的资源
   • 指进程已经保持至少一个资源，但又提出了新的资源请求，而该资源已被其它进程占有，此时请求进程阻塞，但又对自己已获得的其它资源保持不放
4. 环路等待条件：存在一种进程的循环链，链中的每一个进程已获得的资源同时被链中的下一个进程所请求 在发生死锁时，必然存在一个进程——资源的环形链

解决办法

只要打破四个必要条件之一就能有效预防死锁的发生

42、面向对象的三个特征，分别说一下什么意思

参考答案：

概念：

封装：将对象运行所需的资源封装在程序对象中——基本上，是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的，只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。

继承： 继承可以解决代码复用，让编程更加靠近人类思维。当多个类存在相同的属性(变量)和方法时，可以从这些类中抽象出父类，在父类中定义这些相同的属性和方法，所有的子类不需要重新定义这些属性和方法，只需要通过继承父类中的属性和方法。

多态： 多态是指一个引用(类型)在不同情况下的多种状态。也可以理解成：多态是指通过指向父类的引用，来调用在不同子类中实现的方法。

特点：

封装可以隐藏实现细节，使得代码模块化；

继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。

多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。多态分为两种，一种是行为多态与对象的多态

43、防抖和节流的原理和使用场景

参考答案：

函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

防抖：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

根据函数防抖思路设计出第一版的最简单的防抖代码：

var timer; // 维护同一个timer
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}

上面例子中的debounce就是防抖函数，在document中鼠标移动的时候，会在onmousemove最后触发的1s后执行回调函数testDebounce；如果我们一直在浏览器中移动鼠标（比如10s），会发现会在10 + 1s后才会执行testDebounce函数（因为clearTimeout(timer)），这个就是函数防抖。

在上面的代码中，会出现一个问题，var timer只能在setTimeout的父级作用域中，这样才是同一个timer，并且为了方便防抖函数的调用和回调函数fn的传参问题，我们应该用闭包来解决这些问题。

优化后的代码：

function debounce(fn, delay) {
    var timer; // 维护一个 timer
    return function () {
        var _this = this; // 取debounce执行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        }, delay);
    };
}

使用闭包后，解决传参和封装防抖函数的问题，这样就可以在其他地方随便将需要防抖的函数传入debounce了。

节流：

每隔一段时间，只执行一次函数。

• 定时器实现节流函数：

  function throttle(fn, delay) {
      var timer;
      return function () {
          var _this = this;
          var args = arguments;
          if (timer) {
              return;
          }
          timer = setTimeout(function () {
              fn.apply(_this, args);
              timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
          }, delay)
      }
  }

• 时间戳实现节流函数：

  function throttle(fn, delay) {
      var previous = 0;
      // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
      return function() {
          var _this = this;
          var args = arguments;
          var now = new Date();
          if(now - previous > delay) {
              fn.apply(_this, args);
              previous = now;
          }
      }
  }

异同比较

相同点：

• 都可以通过使用 setTimeout 实现。
• 目的都是，降低回调执行频率。节省计算资源。

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
• 函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

常见应用场景

函数防抖的应用场景:

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景:

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

44、文件异步上传怎么实现

参考答案：

1.普通表单上传

使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单，并指定表单的提交内容类型为enctype="multipart/form-data"，表明表单需要上传二进制数据。

<form action="/index.php" method="POST" enctype="multipart/form-data">
  <input type="file" name="myfile">
  <input type="submit">
</form>