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
  • 相关阅读:
    stenciljs 学习四 组件装饰器
    stenciljs 学习三 组件生命周期
    stenciljs 学习二 pwa 简单应用开发
    stenciljs ionic 团队开发的方便web 组件框架
    stenciljs 学习一 web 组件开发
    使用npm init快速创建web 应用
    adnanh webhook 框架 hook rule
    adnanh webhook 框架 hook 定义
    adnanh webhook 框架request values 说明
    adnanh webhook 框架execute-command 以及参数传递处理
  • 原文地址:https://www.cnblogs.com/goule/p/13626668.html
Copyright © 2011-2022 走看看