2018/06/30这段时间的随笔记忆：遇到概念模糊的js问题

1.事件委托

概念：利用冒泡原理，子元素要做的事情交给父元素做

场景：ul和li标签，当每个li标签都需要有事件触发，如果给每一个li标签添加，当遇到li标签要增加或者减少的时候。监听它的增加或者减少是一件非常麻烦的事情，所以。通过在ul上面添加事件。通过一e.target获取当前对象。注意区分e.target与e.currenttarget

2.浅拷贝与深拷贝

概念：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

用法：

浅拷贝

 function simpleClone(initalObj) {    

      var obj = {};    
      for ( var i in initalObj) {
        obj[i] = initalObj[i];
      }    
      return obj;
    }
或者Object.assign()

深拷贝
用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象

var obj2 = JSON.parse(JSON.stringify(obj1));
使用Object.create()方法
递归

var deepCopy= function(source) { 

var result={};

for (var key in source) {

      result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];

   } 
   return result; 
}
3.关于let和var
Es5中存在函数作用域和全局作用域。如果在函数中定义的var。变量提升最多也只会提升在函数上。不会超过函数。   Es6中多了一个 块级作用域也就是let。let不允许重复定义。
不允许在定义之前使用，否则会报错，出现暂时性死区。

4.关于apply,call,bind
apply和call用法类似，都是用另外一个对象替换当前对象(每处使用都可以用这个解释),区别是参数不同。A.apply(B,[args1,args2])用B对象替换A对象。后面的参数是数组。
apply会把后面的数组转换成一个个的参数。可以利用此点来做其他巧妙的操作。
比如fun.apply(null,arr)把数组转为函数需要的参数

function f(x,y){
console.log(x,y)
}
f.apply(null,[1,3])

es6可以使用（...）扩展运算符，即：f(...[1,3])
同理计算最大值Math.max。apply(null,arr)
继承Parent.call(this)
call巧用
Array.prototype.slice.call(args)将args装换成数组，args必须是具有length属性的类数组对象
至于bind,会返回一个新的函数，它不会立即执行，需要调用一下。而call,apply会立即实行。

5.js的运行机制，解析机制
js解析：
js是一边编译一边执行，是非编译型语言。声明变量和函数会提升
js运行机制：
js是单线程的，event loop是js执行机制
为什么js是单线程的：如果是多线程，同时操作dom元素，浏览器该听谁的？
为什么要异步：如果只有同步，一条线程，那么如果程序执行非常久，就会给用户造成“卡顿”现象
实现：要阐明js运行机制，必须结合同步异步，宏任务微任务来理解

js同步进入主线程，异步的先进入event table,达到触发条件，进入event queue,等主线程空闲就会来event queue来看是否有课执行的

宏任务)：包括整体代码script，setTimeout，setInterval
微任务)：Promise.then等，process.nextTick

浏览器先执行一轮宏任务，在此宏任务中遇到同步的都立即执行，遇到另一轮宏任务（或者异步）推入到queue，微任务也推入到另一微任务queue,宏任务执行完后，执行微任务queue,
再去执行新一轮宏任务

<script>

setTimeout(function(){
console.log(1)
},0)
new Promise(function exec(resolve){
console.log(2)
for(let i=0;i<1000;i++){
console.log("66")

}
console.log(3)
}).then(function(){
console.log(4)
})
console.log(5)

</script>
先执行script宏任务，遇到setTimeout推入栈，执行promise内同步任务，将微任务.then内容推入微任务栈，继续执行完所有同步任务，后执行微任务栈，在接着进入下一轮宏任务栈执行setTimeout

6.window.onload和document.ready区别
document.ready是等所有的dom树加载完后执行,可以多次出现
window.onload是dom树加载完后和所有文件加载完后执行，只能出现一次
window.onload后执行相对于documen.ready

7.立即执行函数: (function(){...})()
传统的写法是声明与执行分开，这样会污染全局空间
立即执行函数其实是把函数声明转成表达式，然后执行。

var foo = function () {...};    // 这就不是定义，而是表达式了。
foo();
相当于

(function foo() {...})    // 这里是故意换行，实际上可以和下面的括号连起来
();
或者

(function foo() {...}（）)

或者

!function foo() {...}();

或者

+function foo() {...}();

或者

void function foo() {...}();