JavaScript的预解析和对象的使用方式

176 阅读4分钟

#arguments

    arguments并不是一个真正的数组
    但是它拥有一些数组的使用方法
    <script>
        fimctopm fn(){
            for(var i = 0; i < arguments.length; i++){
                console.log(arguments[i])
            }
        }
        fn(1,2,3,4)实参
    </script>

#arguments案例

<script>
    function getMax(){
        var max = arguments[0];
        for(var i = 1; i < arguments.length; i++){
            if(arguments[i] > max){
                max = arguments[i]
            }
        }
        return max;
    }
    console.log(getMax(1,2,3,50,4,5))
</script>

#判断是否为闰年

<script>
    function isRunYear(year){
        if(year % 4 == 0 && year % 100 ! == 0 || year % 400 == 0){
            return true
        }else{
            return false
        }
    }
    console.log(isRunYear(1998))
</script>

#函数和函数之间是可以相互调用的

<script>
    function fn1(){
        console.log("这是fn1")
    }
    function fn2(){
        console.log("这是fn2")
        fn1()两个函数之间只能其中一个调用另一个不可以两个都相互调用不然就是死循环
    }
</script>

#函数调用判断是否为闰年

<script>
    function isRunYear(year){
        if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
            return true
        }else{
            return false
        }
    }
    
    function inputDay(){
        var year = prompt("请输入您的年份");
        if(isRunYear(year)){
            alert("当前年份是闰年")
        }else{
            alert("当前年费是平年")
        }
    }
    inputDay()
</script>

#函数的声明方式

<script>
    // 函数声明式
    function fn(){}
    
    // 函数表达式
    var fn = function(){}
    
    // new
    var fn = new Function(){}
</script>

#js作用域

<script>
    var a = 1 这种的就是全局的作用域
    
    function fn(){
        var b = 1; 这种就是局部作用域,b只能在fn中进行访问
    }
    
    console.log(b) 不能打印出b值,b是一个局部作用域中的定义变量
</script>

#js中没有块级作用域

<script>
    if(true){
        如果num只能在这个{}中进行使用,那么js就是有块级作用域
        但是num不仅仅是可以在{}中使用,它是一个全局变量,因此js中没有块级作用域
        var num = 10;
    }
    console.log(num)
</script>

#js中的作用域

<script>
    内部函数访问外部函数的变量,采用的是链式查找(向上查找)的方式来决定取那个值
     var num = 10;
     function fn() {
        var num = 20;
        function fun() {
            console.log(num)
        }
        fun();
    }
    fn()
</script>

#作用域链查找变量案例

<script>
    案例1
    function f1(){
        var num = 123;
        function f2(){
            var num = 0;
            console.log(num)因为是向上查找这里肯定就输出0
        }
        f2(
    }
    f1()
    
    案例2
    var a = 1;
    function fn1(){
        var a = 2;
        var b = 22;
        fn2();
        function fn2(){
            var a = 3;
            fn3()
            function fn3(){
                var a = 4;
                console.log(a)因为内部有a所以这里输出4
                console.log(b)一直向上查找到fn1这里有个b值输出22
            }
        }
    }
    fn1()
</script>

#预解析

<script>
    console.log(num); 输出undefined
    按照正常思路来说,此时的console.log(unm);还没有定义
    是因为js引擎在处理代码时,是需要先进行预编译的。
    先进行预编译在执行代码
    var num = 10;
    
    案例转换
    预编译
    var num 因为先预编译了 变量提升到了最高
    console.log(num)然后执行代码 但是变量值没有所以输出undefined
    num = 10
    
    fun()
    var fun = function(){
        console.log("2222")
    }
    因为预编译的原因会先执行var fun
    在执行fun()
    在执行fun = function()
    所以会报错
    
    demo() //demo是可以执行的,预解析会把函数提升到最前面
    function demo(){
        console.log("demo")
    }
    
    js引擎运行js代码的时候分为两个步骤:先预解析 在执行代码
    预解析 js引擎会把js里面的var还有function函数提升到作用域的最前面
    代码执行 从上到下顺序执行的
    
    提升:变量和函数会在预解析时提升到最前面
</script>

#预解析案例

<script>
    var num = 10;
    fun();
    function fun() {
        所以var = num 会提升到这点
        console.log(num)
        变量的提升是提升到当前的作用域的最前面
        var num = 20;
    }
    
    var num = 10;
    function fn(){
        console.log(num);空
        var num = 20;
        console.log(num);20
    }
    fn();
    
    var a = 18;
    f1();
    function f1(){
        var b = 9;
        console.log(a)空
        console.log(b)9
        var a = "123"
    }
    
    f1()
    console.log(a)9
    console.log(b)9
    console.log(c)9
    js是单线程语言,一旦出错,下面的代码不再执行
    function f1(){
        var a = b = c = 9;
        console.log(a)报错
        console.log(b)
        console.log(c)
    }
    
    如果函数中 没有使用 var 定义变量, 外部也没有这个变量
    这个变量就为全局变量
    function demo(){
        这个num就被定义成了全局变量
        num = 5;
    }
    demo()
    console.log(num)5
</script>

#创建对象的方式

<script>
    var zhangsan = {
        name:"zhangsan",
        sex:"man",
        age:18,
        sayHell:function(){
            alert("大家好!!!")
        }
    }
    
    怎么操作对象,怎么访问对象里面的属性和方法
    console.log(zhangsan.name)
    console.log(zhangsan.sayHell)
    
    访问属性和方法时可以使用另外一种方式
    zhangsan["sayHell"]()
    zhangsan["sex"]
</script>

#创建对象的方式2

<script>
    var obj = new Object();
    obj.name = "lisi";
    obj.sex = "man"
    obj.sayHi = function() {
        alert("大家好!!!")
    }
    console.log(obj.name)
    console.log(obj.sex)
    console.log(obj.sayHi())
</script>

#创建对象的方式3

<script>
    function createObj(name, sex){
        var obj = {}
        obj.name = name;
        obj.sex = sex;
        obj.satHello = function(){
            alert("satHello")
        }
            return obj
    }
    var obj1 = createObj("zhangsan", "man")
    var obj2 = createObj("lisi", "man")
    obj1.satHello()
    console.log(obj1.name)
    
    构造函数
    function Person(name, sex){
        this.name = name;
        this.sex = sex;
        this.sayHello = function(){
            alert("大家好!!!!")
        }
    }
    var p1 = new Person("zhangsan", "man")
    var p2 = new Person("lisi", "man")
</script>

#对象的遍历

<script>
    var obj = {
        name:"zhangsan",
        likes:["运动", "跑步", "唱歌"],
        age: 20
    }
    
    console.log(obj.length);
    for(var i = 0; i < obj.length; i++){
        console.log(i)
    }输出为空
    
    对象不能使用for来遍历了,能使用for in来遍历
    for(var key in obj){
        console.log(key)
        console.log(obj[key])
    }
</script>