前端问（面试）题

1. dom执行顺序
2. 事件委托原理
3. 原型链的作用，与作用域链的区别
4. js事件轮询原理、JavaScript的运行机制
5. 结果及原因

var num = 100
function A () { 
  console.info(this.num); 
  var num 
}
A()

6. 结果及原因

(function (num) { console.info(num); var num = 300; })(100)

7. 结果及原因

var num = 100
var obj = { 
  name: 'xxx', 
  mmm: { 
    num: 300, 
    func: function () { console.info(this.num) } 
  } 
}
1. obj.mmm.func()
2. var temp = obj.mmm.func; temp()
3. (obj.mmm.func)()
4. (obj.mmm.func=obj.mmm.func)()

.

1. 事件捕获->目标阶段（？？？）->事件冒泡
2. 利用事件冒泡。优：减少事件注册，节省内存。简化了dom节点更新时，相应事件的更新。缺：对于不冒泡的事件不支持。层级过多，冒泡过程中，可能会被某层阻止掉。对委托函数不必要的调用。事件误判（开发者不知道是不是有委托事件）。
3. 作用域链：先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。这个查找的过程就叫作用域链
   原型链：prototype的线性调用。对象有内部属性prototype，如果prototype指向另一个对象，这个对象会有自己的prototype，依次向上为原型链

（1）所有同步任务都在主线程上执行，形成一个（execution context stack）。
（2）主线程之外，还存在一个""（task queue）。只要异步任务有了运行结果，就在""之中放置一个事件。
（3）一旦""中的所有同步任务执行完毕，系统就会读取""，看看里面有哪些事件。那些对应的异步任务，就结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

在JS中ES6 中新增的任务队列（promise）是在事件循环之上的，事件循环每次 tick 后会查看 ES6 的任务队列中是否有任务要执行，也就是 ES6 的任务队列比事件循环中的任务（事件）队列优先级更高。
　　　　　　　　　　　　　　　　　　　　　　　　　　-- 出处

setTimeout(function(){console.log('111')},0);
new Promise(function(resolve,reject){
   console.log("2222");
   resolve();
}).then(function(){console.log('3333')})
console.log("44444");
//输出
 2222
 44444//上面的两个输出属于同步操作
 3333//promise加入到队列的优先级高于setTimeout
 111

5. 100
6. 100
7. 300 this指定方法本身 \ 100 this指定windows \ 300 this指定方法本身 \ 100 this指定windows

不不不，我不会js这门语言，我就是个路过的
不知道，不清楚，别问我[吐血]

---

1. 描述css盒子模型（没错，题是从某个学校来的）
2. 使用css实现一个无限旋转360度的圆
3. 什么是BFC（Block Formatting Context）,什么情况下会产生BFC
4. 函数中的arguments是数组吗？如果不是怎么转化为真数组
5. []==![]

var x=1,y=0,z=0;
var add = function (x) {
    return x = x + 1
}
y = add(x)
function add (x) {
    return x = x + 3
}
z = add(x)
console.info(x,y,z)

var p = new Promise((res, rej) => {
    console.info('c')
    setTimeout(() => {
        console.info('d')
        res()
        rej()
        res()
    }, 10)
    setTimeout(() => { console.info('h') })
})
p.then(res => console.info('e'))
p.then(res => console.info('f'))
p.catch(res => console.info('g'))
console.log('b')

8. 代码实现bind函数
9. js事件有几个阶段？用原生js实现事件代理
10. js如何简短优雅的实现sleep函数
11. 入参：[1,[2,[3,4,5],2],5,[6]] 出参：[1,2,3,4,5,2,5,6]

答案：

1. content + padding + border + margin

.yuan {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(#0eda1e, #cc12e2);
  animation: zhuan 3s linear infinite;
}
@keyframes zhuan{
  from { transform: rotate(0deg) }
  to { transform: rotate(-360deg) }
}

/* 三角 */
.sanjiao {
  width: 0;
  height: 0;
  border-top: 25px solid #000;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
/* 半圆 */
.banyuan {
  width: 50px;
  height: 25px;
  background: linear-gradient(#0eda1e, #cc12e2);
  border-radius: 25px 25px 0 0 ;
}

一个独立的布局环境，其中的元素布局是不受外界的影响：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
可以避免外边距折叠

4. Array.from(arguments)、[...arguments]
5. []==![] 两个值类型不同，且![]为false，应该转为0；一个是对象，一个是数字，则[].toString() => '' == 0 => true
6. add指向一个匿名函数，在调用的时候才真正的被加载上，所有会把具名函数覆盖掉。
   结果：1 2 2
   关于具名方法，在加载（执行）之前就会将之前相同的方法覆盖掉
7. Promise在状态（机）改变前是同步执行的，且只有一个状态。在第一次then之前，p的状态已为resolved，后面只是获取返回值
   结果：cbhdef

Function.prototype.bind2 = function () {
  let _t = this;
  let args = Array.from(arguments);
  let newthis = args.shift()
  return function () {
    _t.apply(newthis, args);
  }
}

9. 事件捕获->目标阶段（？？？）->事件冒泡。 addEventListener

function sleep(delay) {
  return new Promise(reslove => {
    setTimeout(reslove, delay)
  })
}
sleep(500).then(() => {})
// or
async function test() {
  ...
  await sleep(3000)
  ...
}

function zzz (arr) {
    var temp = []
    arr.forEach(item => {
        if (Array.isArray(item)) temp.push(...zzz(item))
        else temp.push(item)
    })
    return temp
}
// or
json.join(',').split(',')

---

1. ul li 样式清空使用______
2. 严格模式关键字______
3. js中的函数调用方式有____，____，____等
4. axios与fetch、ajax有什么区别
5. 浏览器端的js包括哪几部分？
6. js中继承是怎么工作的，举例说明？
7. css选择器优先顺序
8. vue-router路由的两种模式，及区别
9. vue ui组件库，遇到的问题？
10. vue组件之间8种组件通信方式
11. 常见兼容性问题

答案：

1. list-style: none;
2. use strict
3. 函数三种定义方式 & 四种调用方式

定义函数（关键字）  function aaa
定义函数字面量      let aaa = function ...
定义构造函数        let aaa = new Function('x','alert(x);') 

方法调用模式      某对象中的方法
函数调用模式      正常函数
构造器调用模式    new aaa().sub()
apply,call调用模式

4. ajax基于原生XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱
   axios 是对xhr的Promise封闭。拦截、转换请求和响应，支持从 node.js 创建 http 请求，提供了一些并发请求的接口（axios.all）
   fetch是es6新特性，与xhr没关系。语法简洁，更加语义化；基于标准 Promise 实现，支持 async/await；同构方便。 不支持所有ie；请求无法中断（axios使用CancelToken取消）
5. ECMAScript、DOM、BOM（浏览器对象模型，我没用到过）
6. extends，基于原型链继承（prototype）、构造函数继承（call）、对象冒充
7. !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
8. hash：基于onhashchange事件（#xxx改变触发）、history：基于history.pushState、replaceState（nginx）
9. 纯ui：ElementUI
   右键菜单，应用内通知，抽屉组件，弹出层组件，无网络为空组件
   自定义指令：title 滚动，过滤器
10. props 、vuex、localStorage、sessionStorage、cookie、provide和inject
11. css3? 滚动条对宽度的影响？？？js兼容性

---

严格模式：
变量必须声明再使用
全局运用域下this指向undefined，定时器this指向window
不允许在非函数的代码块内声明函数
不能用with，eval内部定义的变量不能影响外部
不能对arguments赋值，且与具名参数不关联
尾调用优化（）
禁止在函数内部遍历调用栈caller？
无法删除变量？

严格模式通过抛出错误来消除了一些原有静默错误。
严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。

尾调用优化：函数的返回值是一个内部函数的返回值。
在函数执行到最后，引擎把其栈帧弹出（真的没有必要存在了），为内部函数推入栈帧。这样无论调用多少次嵌套函数（递归？）都只有一个栈帧。
条件：严格模式(arguments)、是尾调用（无return、return fnRes等无效）、return后没有其它逻辑（return fn().toString()、return fn(1) + fn(2)无效）、尾调用不能是一个闭包（比如fn调用了执行函数/外部函数的变量，会导致其栈帧不能弹出，因为还在用）。

在函数被调用时，会为其创建一个执行上下文、一个作用域链。用arguments和其它具名参数初始化为此函数的活动对象。外部函数的活动对象为链上的第二层，一直向外串起了整个链。
闭包：外部函数执行完毕后，其活动对象并没有销毁，因为内部函数的作用域链上还在引用，需要等内部函数被销毁后它们占用的内存才会释放。
因为闭包会保留外部函数的作用域，所以比其它函数更占内存。