JS

头像
kangting
    阅读 2 分钟

    JS基础-变量类型和计算

    javascript数据类型

    手写代码之深拷贝

    {} instanceof Object中{}被优先识别为代码块问题

    javascript toString()

    javascript类型转换

    JS基础-原型和原型链

    原型和原型链
    手写代码之jquery

    JS基础-作用域和闭包

    1.this

    this的不同应用场景,如何取值:
    当作普通函数被调用
    使用call apply bind
    作为对象方法被调用
    在calss的方法中调用
    箭头函数
    this的值不是在函数定义的时候决定的,而是在函数执行的时候决定的

    手写代码之bind

    2.作用域

    作用域:变量的合法使用范围
    全局作用域:在全局可以使用
    函数作用域:只能在函数块中使用
    块级作用域(ES6新增):let,const定义的变量有块级作用域{}内部使用

    3.自由变量:

    1.一个变量在当前作用域没有定义,但是被使用了
    2.向上级作用域,一层一层一次寻找,知到找到为止
    3.如果到全局作用域都没找到,则报错:xxx is not defined

    4.闭包:

    所有自由变量的查找,是在函数定义的地方,向上级作用域查找
    不是在函数执行的地方查找
    
    闭包的应用场景:
    作用域应用的特殊情况,有两种表现:
    函数作为参数被传递
    函数作为返回值被返回
    //函数作为返回值
    function create() {
        const a = 100;
        return function() {
            console.log(a)
        }
    }
    const fn = create()
    const a = 200
    fn ()  //100
    
    
    //函数作为参数被传递
    function print(fn) {
        let a = 200;
        fn()
    }
    let a = 100 
    function fn() {
        console.log(a)
    }
    print(fn)  //100
    //所有地方自由变量的查找,是在函数定义的地方,向上级作用域查找
    //     不是在执行的地方!!

    JS基础-异步

    1.同步和异步的区别

    1.js是单线程语言 
    2.同步会阻塞代码的运行
    3.异步不会阻塞代码的运行

    2.手写用promise加载一张图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <script>
        function loadImg(src){
          return new Promise((resolve,reject)=>{
            var img=document.createElement('img')
            img.onload=function(){
              resolve(img)
            }
            img.onerror=function(){
              reject(new Error('图片加载出错'))
            }
            img.src=src
          })
        }
        loadImg('111').then((res)=>{
          console.log('res',res)
        }).catch(err=>{console.log(err)})
        </script>
    </body>
    </html>

    3.前端使用异步的场景有哪些
    网络请求(ajax加载图片)和定时任务(setTimeout)


    kangting
    62 声望3 粉丝

    一只小小的前端


    « 上一篇
    CSS