JavaScript 经典笔试面试题

1. 变量提升

原题如下：

		+ function() {
			alert(a);
			a();
			var a = function() {
				console.log(1);
			}
			function a() {
				console.log(2);
			}
			alert(a);
			a();
		 var c = d = a;
		}()
		alert(d);
		alert(c);

知识点：
1. 变量提升 函数>变量  
2. 全局变量与局部变量 var a=b=c;
变形后的函数如下：

 		// + - ! ~ 把函数声明语句变成函数表达式 可执行
		// 变量和函数都会提升，函数提升的比变量高
		(function() {
			function a() {
				console.log(2);
			}
			alert(a); // 输出了console.log(2)的函数
			a();  // 输出了2
			var a = function() {
				console.log(1);
			}
			alert(a); // 输出了console.log(1)的函数
			a(); // 输出了1
			d = a; // d没有用var声明 是全局变量
			var c = a; // c 用var声明 是局部变量
		})()
		alert(d); // 输出了console.log(1)的函数
		alert(c); // c is not defined

---

2. this 谁调用指向谁 箭头函数this指向词法作用域，由上下文决定

		this.a = 20;
		var test = {
			a: 40,
			init: () => {
				console.log(this.a);
				function go() {
					// this.a = 60;
					console.log(this.a);
				}	
				go.prototype.a = 50;
				return go;			
			}
		};
		// var p = test.init();
		// p()
		new(test.init())

知识点：
1. this 谁调用指向谁
2. 箭头函数this基于词法作用域
3. 作用域
4. 原型链 

3 同步和异步队列（宏任务微任务）

		// 将var 变成 let(es6块级作用域)  闭包缓存i的值 this绑定i的值
		var li_list = Document.getElementsByTagName('li')
		for (var i = 1; i<=li_list.length;i++) {
			li_list[i].onclick = function() {
				consoel.log(i)
			}
		}

知识点：
 1. let(es6块级作用域)  
 2. 闭包缓存i的值 
 3. this绑定i的值

4 函数传参是传值

		function test(m) {
			m = {v : 5};
		}
		var m = {k : 30};
		test(m);
		alert(m.v); // undefined

5 继承

JS里没有构造函数

// Car.prototype.constructor = Car
		// Car.__proto__ = Function.prototype
		// Function.__proto__ = Function.prototype
		// Object.__proto__ === Function.prototype
		// Object.__proto__.__proto__ === Object.prototype
		// Object.prototype.__proto__ = null

		function Car(color) {
			this.color = color;
		}

		Car.prototype.go = function() {
			console.log(this.color)
		}

		function BMW(color) {
			Car.call(this, color);
		}

		
		// 可能会改变父类原型
		// BMW.prototype = Car.prototype 

		// call 和 new 会使Car的构造函数执行两遍 
		// BMW.prototype = new Car()

		_proto = Object.create(Car.prototype);
		_proto.constructor = BMW;
		BMW.prototype = _proto;

		// 先继承，在给原型上加BMW的方法
		BMW.prototype.come = function() {
			console.log('come');
		}
		var nss = new Car('blue');
		// nss.__proto__ = Car.prototype

		var wss = new BMW('red');

		console.dir(Car);
		console.dir(BMW);
		console.log('nss', nss);
		console.log('wss', wss);

6 如何解决 while(TRUE)堵塞

1. setTimeout()
2. serInterval()
3. webWork()
4. 引入第三方库

7如何解决回调地狱

8 请用一句话 ‘asfbmsdf’ 变成数组;

	a.split()
	Array.from(a)
	Array.prototype.slice.call(a)  // splice会改变原有数组所以会报错
	[ ...b] =a

9 运算顺序

		var a = { n: 1 };
		var b = a;
		a.x = a = { n: 2};
		// a.x = {n: 2}; 点运算符优先级比较高
		// a = {n: 2};
		console.log(a.x); // undefined
		console.log(b.x); // { n: 2 }
		

编程题

1. 请用一句话算出0-100 之间学生的学生登记，如90-100输出为1等生，80-90 为2等生

	10 - Math.floor(point / 10)

2. 实现Bind函数

		Function.prototype.bind = function(obj, ...arg){
			obj.fn = this;
			return function(...argS){
				obj.fn(...arg, ...argS);
				delete obj.fn;
			};
		}
 		
 		Function.prototype.bind = function (obj, ...arg) {
		  return (...Arg) => {
		    return this.call(obj, ...arg, ...Arg)
		  }
		}
		var person = {
			name: 'qiugu',
			eat: function(a,b,c){
				console.log(this.name + 'eating!' + a + b +c);
			}
		}
 
		var another = {
			name: 'yasuo',
			drink: function(){
				console.log('drinking!');
			}
		}
 
		var fn = person.eat.bind(another, 1);//eating!
		fn('asds', 'wqdeefd');

3. 实现函数节流和去抖

1. window对象的resize、scroll事件
2. 拖拽时的mousemove事件
3. 射击游戏中的mousedown、keydown事件
4. 文字输入、自动完成的keyup事件

去抖和节流是不同的，因为节流虽然中间的处理函数被限制了，但是只是减少了频率，而去抖则把中间的处理函数全部过滤掉了，只执行规判定时间内的最后一个事件。

// 去抖相当于按弹簧
//       也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
  var debounce = function(idle, action){
  var last
  return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
        action.apply(ctx, args)
    }, idle)
  }
  
  //  如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

// 　　也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
var throttle = function(delay, action){
  var last = 0;
  return function(){
    var curr = +new Date()
    if (curr - last > delay){
      action.apply(this, arguments)
      last = curr 
    }
  }
}

4. 把一串数字表示成千位分隔形式——JS正则表达式的应用

	str.replace(/(?=(/B/d{3})+$)/g, ',')
	a(?=b)匹配后面紧跟b的a
	

问答题

1. 如何解决异步嵌套，回调地狱

 1. Promise/Defferred 
 2. generator + promise
 3. Async await函数
 4. fetch()
 5. navigator.sendBeacon() // 锚节点 ，用于埋点用的

2. 如何解释NodeJS使用与IO密集型不适用与CPU密集型

异步高并发大吞吐量
 Node还没有简单易用的多核计算接口，Cluster并不是那么好用
Node的单核效率比传统脚本语言高，但是和C C++Java比并没有什么优势 

3. 请画出Node.js的异步事件回调机制的实现，并解释原理
   

 javascript通过V8的引擎解析
Node.js bings绑定对应操作系统
进入到执行的事件队列
LIBUV封装了 两个东西 Linux 下的custom streampool windows下是IOCP
异步的交给干活的线程，干完活挪出来交给操作系统
返回V8引擎在返回给APP

4. 测试技术

UI层   		  selenium-webdriver nigthwatch f2etest
Service层  	  mocha supertest
Unit层  		  karma PhantomJS+chai jest

5. 有人说Node是玩具，写错一处整个网站就挂，为了解决它你有神马办法？

中间件处理掉常见的 404 500
关键函数比如请求进行封装 容错重试等
全部错与监听 uncaughExcetion

6. 请你写出你知道的HTTP请求报头，请写出常见的HTTP Status Code 表明他的含义

200 ok
301 Moved Permanently 永久重定向
302  Move temporarily 临时重定向
404 not found
403 Forbidden
500 Internal Server Error
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout

7. 请用KOA2实现基本的服务端，并输出helloworld，且实现单元测试

const koa = require('koa');
const app = new koa();
const result = new Promise(function(resolve, reject){
	setTimeout(function() => {
		resolve('hello world')
	}, 1000);
})
app.use(async (ctx, next) => {
	const start new Date();
	ctx body = await result;
})
app.listen(3000);

8. NodeJS使用了Scavenge Mark-sweep Mark-compact算法进行垃圾回收，请绘制三种算法的原理，并描述何种情况下会造成NodeJS的内存泄漏，如何检测？

9. 请你写出你能力范围内的node项目文件夹，并描述作用

1.
2.
3.
4.
5.
6.

10. 浏览器缓存机制
    
11. 请说明前端为何要工程化

解决了前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

12. 性能优化和工程化关系

雅虎军规：
- 网页内容：合并资源减少HTTP请求    延迟加载  减少DOM数量（iconfont等） 
- 服务器 CDN Expires
- cookie  
- css
- JavaScript  精简 
- 图片
- 移动客户端

工程化做到一定极致的时候，性能优化是不用太操心的

13. CDN内容分发网络 静态资源放到CDN好处

- 用户尽快访问到资源
- 减少主站压力 cookie

14. 缓存前端静态资源的常用方法

Expires  Cache-control  
localstorage

15. 下图是一张完整的网络请求阶段的关键节点，如果让你开发一个性能统计平台，你会怎么做

Performance.timing 

12. 降低移动端首屏时间的方法

重要的东西直出，避免二次渲染

13. 并发，js请求过多怎么办

缓存，并行请求

14. 优化node

pm2 cpu负载
压力测试，找到代码涉及到性能问题的地方并修改
代码体积