zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    nginx.conf配置
    分组查询最近时间的记录
    jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
    form表单的onsubmit()问题 集合
    vs代码快捷键
    localStorage存储方法
    display和visibility的区别
    Javascript Math ceil()、floor()、round()三个函数的区别
    sqlservere小计合计总计
    CentOS 7.1 图形化安装
  • 原文地址:https://www.cnblogs.com/goule/p/13626668.html
Copyright © 2011-2022 走看看