十一天

导航

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

 

posted on 2020-09-07 14:21  十一天  阅读(420)  评论(0编辑  收藏  举报