JavaScript 闭包+封装+异步同步区别

一）闭包

闭包定义：有权访问另外一个函数作用域变量的函数

闭包作用：正常函数执行完毕后,里面声明的变量被垃圾回收处理掉

                  但是闭包可以让作用域里的变量,在函数执行完之后依旧保持没有被垃圾回收处理掉

闭包缺陷：会导致内存占用过高，因为变量没释放内存

//bbb函数可以访问aaa函数作用域内的变量
function aaa(){
  var name = "xxx"
  return function bbb(){          
    alert(name);
  }
}

 

二）封装

封装：把零散的做成一个组件，代码减少，复用提高，但封装的方法过多，代码耦合度提高，所以封装代码要适度

适度的把相同的功能打包成一个函数，只留下相应的接口，就可以同一个功能，调用不同的参数反复使用

 

三）异步同步区别

java是多线程语言；JavaScript是单线程语言，（JavaScript考虑到此问题，任务分为同步任务和异步任务：主线程可以完全不用等待文件的读取完毕或ajax的加载成功，可以先挂起处于等待中的任务，先运行排在后面的任务，等到文件的读取或ajax有了结果后，再回过头执行挂起的任务）

同步任务：同步会阻塞代码运行，在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务（网站的渲染，元素的渲染）

异步任务：（图片的加载，音乐的加载，ajax请求）

 

四）箭头函数（ES6新增）和普通函数的区别

//1、没有形参
let fun = () => console.log('我是箭头函数'); 
fun();

//2、只有1个形参的时候()可省略
let fun2 = a => console.log(a); 
fun2('aaa');

//3、2个及2个以上的形参的时候
let fun3 = (x,y) =>console.log(x,y);  //函数体只包含一个表达式则省略{}和return 默认返回
fun3(24,44);

//4、2个形参以及函数体多条语句表达式
let fun4 = (x,y) => {
　　console.log(x,y);
　　return x+y; //必须加return才有返回值
}

//5、如果要返回对象时需要用小括号包起来，因为大括号被占用解释为代码块了，正确写法
let fun5 = ()=>({ foo: x })   //如果x => { foo: x }  //则语法出错

1）箭头函数相比于普通函数更简洁的写法

2）箭头函数是匿名函数，不能作为构造函数，不能使用new

3）箭头函数没有原型属性，所以箭头函数本身没有this

4）箭头函数捕获其所在上下文的this值，作为自己的this值，任何方法都不能改变其指向，call(),apply(),bind()都不能，可以间接修改箭头函数的指向，去修改被继承的普通函数的this指向，然后箭头函数的this指向会跟着改变，如果箭头函数外层没有普通函数，this指向window全局对象；普通函数的this指向调用它的那个对象

5）不绑定arguments，用rest参数解决

arguments.push(0);  // arguments.push is not a function

//使用扩展符Array.from来将它转换成真正的数组
arguments = Array.from(arguments);

6）箭头函数在参数和箭头之间不能换行

var func = ()
           => 1;       //报错

箭头函数的注意事项：

1）箭头函数一条语句返回对象字面量，需要加括号

2）箭头函数的解析顺序相对靠前

箭头函数不适应场景：

1）箭头函数的this意外指向和代码的可读性

 

五）CSS浮动

CSS浮动：用于将多个块级元素排列在一行上，使元素脱离文档流，不占有标准流

  float:left     float:right

清除浮动：让后面的元素自动掉到下一行

  overflow:hidden

 

六）构造函数创建类，创建对象

步骤1：new构造函数，后台执行new Object()

步骤2：new Object() 函数代入构造函数的参数

步骤3：执行构造函数代码

步骤4：返回新对象

 

七）遍历数组

var arr=[1,2,3,4];

for(var i=0;i<arr.length;i++){

}

for(var i in arr){
      a[i]
}

arr.forEach(function(x,index,a)){
    return 
}

 

数组方法：

join("-")        //1-2-3
push("34")     //末尾加34       unshift()           //从开头加
pop()            //末尾减1个       shift()           //从开头删
sort()           //数组排序
reverse()       //反转数组
concat()        //组合数组
slice()            //可任意截取数组
splice()          //可删除，添加，修改
splice(0,2)                     //下标0开始删除2项
splice(2，0，4，6)          //下标2开始删除0项，插入4，6
indexOf(5)                 //数组中查找5的索引值
map(function(x,index)){          //对数组的每一项给定函数
    return
}
filter(function)                    //过滤符合条件的数组
every(function)                    //全符合true
some(function)                    //部分符合true