2020/9/12 js 基础复习

153 阅读2分钟

 var a = { age: 12 }
        var b = a
        a = { name: "Bob", age: 13 }
        console.log(b.age, a.name, a.age)//12 "Bob" 13
        b.age = 20
        console.log(b.age, a.name, a.age)//20 "Bob" 13

变量赋值到底做的是什么事情?

将a的内容赋值给b(或者说拷贝一份给b)

函数传递参数 是值传递还是引用传递?


        function fn(obj){
            console.log(obj.name)
        }
        var obj = {name:'lulu'}
        fn(obj)//lulu

内存空间 变量的释放(局部、全局)

局部变量 (ps:不代表带上他后面的{}) 自动释放:函数执行完释放(立马干掉)

自动释放 不是 垃圾回收器(以后的某一时刻 有间隔)

对象

    <script>

        var p = {
            name :'lala',
            age:20,
            banji:{
                name:'sadage',
                class:'3班'
            },
            setName:function (name){
                this.name =  name
            },
            setAge:function (age){
                this.age = age
            }

        }


        // 访问内部数据有两种方法:
        p.setName('Bob')
        console.log(p.setName('Bob'))//undefined  都没返回值
        p['setName']('lulu')

        console.log(p.name , p['age'])//lulu 20

    </script>

对象--什么时候使用['属性名']的 形式?


        //    1.属性名中包含了特殊字符 
        var p = {}
        p['content-type'] = 'sdjash',
        p['woshi kong'] = 'hey kong'
 
        console.log(p['content-type'])//sdjash
        console.log( p['woshi kong'])//hey kong
        
        //2.属性名不确定    p.propName 还是 p.myname  项目中会用到
        
        var  propName = 'myname'
        var value = 300
        // p.propName = value 
        // console.log(p.propName)//300  能打印出
        p[propName] = value
        console.log(p[propName])

函数:

  1. 什么是函数?
  2. 为什么要用函数?
  3. 如何定义函数?
  4. 如何调用(执行)函数?

        function fn(name){
            this.name = name

        }

        var  fun = function(age){
               this.age= age 
        }


         fn('xiaomi')
         fun('20')   

         obj  = {}
         function objMethods(){
             this.name  = 'sdskadhasj'   //给obj添加了属性
            console.log('~~~~函数被调用~~')

         }

        //  obj.objMethods()    不存在的

        objMethods.call(obj)//~~~~函数被调用~~   //相当于obj.objMethods()  
        objMethods.apply(obj)//~~~~函数被调用~~

        console.log(obj.name)//sdskadhasj

可以让一个函数成为指定任意对象的方法进行调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">测试这个按钮</button>



    <script>

        function fn(name) {
            this.name = name

        }

        var fun = function (age) {
            this.age = age
        }


        fn('xiaomi')
        fun('20')

        obj = {}
        function objMethods() {
            this.name = 'sdskadhasj'   //给obj添加了属性
            console.log('~~~~函数被调用~~')

        }

        //  obj.objMethods()    不存在的

        objMethods.call(obj)//~~~~函数被调用~~   //相当于obj.objMethods()  
        objMethods.apply(obj)//~~~~函数被调用~~

        console.log(obj.name)//sdskadhasj


        document.getElementById('btn').onclick = function () {
            alert(this.innerHTML)
        }

        //超时定时器  setTimeout
        //循环定时器 setInterval

        setTimeout(() => {
            //两秒后执行
            alert('两秒后执行')
        }, 2000)


        //  定时器赋值

        var timer = null  //null 代表将要赋值 /把内存腾出来被垃圾回收器回收(在浏览器中)
        timer = setTimeout(() => {
            console.log('打印了定时器')
        }, 5000)

        if (timer !== null) {
            console.log('timer:', timer)//输出不是打印了定时器    是timer: 2   (谷歌浏览器中是2 / 火狐timer: 3)   wthy等于2呢? 这是BOM中的兼容性问题
        } else {
            console.log('timer为空null')
        }

        console.log(typeof timer);//=>'number'

        // 定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除。

        var i = 0;
        var timer2 = setInterval(function () {
            console.log(i + 'i');
            i++;

            if (i >= 10) {
                clearInterval(timer2)//清除定时器
            }
        }, 1000)

        console.log('timer2:', timer2);// timer2 = 3  不确定的



     
    </script>
</body>

</html>

定时器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>cnblog头部轮播图</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <style>
    </style>
</head>
<body>
    <input type='button' value='点击开启定时器' id='btn' />
    <input type='button' value='点击关闭定时器' id='btn-close' />
    <p id='content'></p>
    <script>
        var i = 0;
        var oBtn = document.getElementById('btn');
        var oBtnC = document.getElementById('btn-close');
        var oP = document.getElementById('content');
        var timer = null;
        oBtn.onclick = function () {
            if(timer){
                clearInterval(timer);
            }
            timer=setInterval(function () {
                oP.innerHTML += i + '<br/>';
                i++;
            }, 1000);
        }
        oBtnC.onclick = function (){
            clearInterval(timer);//定时器执行就有值了
            console.log(timer)

        }
    </script>
</body>

</html>

回调函数

立即执行函数 IIFE

作用: 隐藏实现 不会污染外部(全局)的命名空间 总而言之:立即执行函数会形成一个单独的作用域,我们可以封装一些临时变量或者局部变量,避免污染全局变量

     var a =  2000;
          console.log(a);//2000
          //在不同的作用域
            // () 包裹函数 让他形成一个整体 fn()
         

          ( function(){
              var  a = 20;
              console.log(a);//20
          })()

NaN 与 isNaN

var str = 'abc'
            console.log(Number(str))//NaN

            console.log(isNaN(str))//true  不是数字返回true