美文网首页
前端(三) - JavaScript

前端(三) - JavaScript

作者: Zoulf | 来源:发表于2018-01-28 16:02 被阅读0次

    JavaScript 作为一门脚本语言,所以有着自己的语法,但是也不会和其他语言(Python)差太多,这里主要列出和Python有差异的地方。

    1. js一般写在<script>标签里,也可以写在其他文件通过<script src>导入,而且一般放在页面底部(body底部),这样可以先加载页面再加载js。
    2. var 关键字,在js里,不加 var 修饰的变量为全局变量,加了 var 就代表是局部变量。
    3. 基本数据类型:数字(包括整型浮点),字符串,数组,字典,布尔值,null(空值),undefined(表示变量未定义)。
    4. 函数,
    // 基本函数
    function 函数名(){
            ...
    }
    
    // 匿名函数
    var func = function(){
          ...
    }
    
    // 自执行函数,即页面一被加载自己自动执行的函数
    (function(arg){
        ...
    })('123')
    
    1. 语句结束要加分号。
    2. console.log() 相当于 print()
    3. for 循环,两种方式:
    for(var i=0 ; i<names.length ; i++){
        ...
    }
    
    for(var i in names){
        ...
    }
    
    1. js里的注释,// 单行, /* */ 多行。
    2. 作用域,js 的作用域是以函数区分的,Java是块级作用域(大括号区分),所以以下函数能在js中运行:
    function f(){
        if(a > b){
            var a = '123';
        }
        console.log(a);
    }
    

    以下语句会报错:

    function wrong(){
        var a = '1';
    }
    wrong();
    console.log(a);
    
    // Uncaught ReferenceError: innerValue is not defined
    

    补充:JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域。
    如果出现函数嵌套函数,则就会出现作用域链:

    xo = '1';
      
    xo = 'alex';
      
    function Func(){
        var xo = "seven";
        function inner(){
            var xo = 'alvin';
            console.log(xo);
        }
        inner();
    }
    Func();
    
    // 打印的为 alvin
    

    以上为三个作用域组成的作用域链,当出现作用域链时,寻找变量就会出现顺序(从内到外),对于上述实例,当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

    作用域链
    需要注意的是,js的作用域在被执行前就已经创建,执行时再按照作用域链寻找即可。
    示例一,
    xo = 'alex';
     
    function Func(){
        var xo = "seven";
        function inner(){
            console.log(xo);
        }
        return inner;
    }
     
    var ret = Func();
    ret();
    // 输出结果: seven
    /* 
    在函数被调用之前作用域链已经存在:
    全局作用域 -> Func函数作用域 -> inner函数作用域
    当执行ret()时,xo 会根据作用域链寻找,(先从inner找,没找到,再到Func里找,找到了var xo = 'seven')
    */
    

    示例二,

    xo = 'alex';
     
    function Func(){
        var xo = "eirc";
        function inner(){
            console.log(xo);
        }
        xo = 'seven';
        return inner;
    }
     
    var ret = Func();
    ret();
    // 输出结果: seven
    /*
    这里想表达的是,在执行var ret = Func();时,Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”,所以之后再执行ret()时,就只能找到“seven”。
    

    示例三,

    xo = 'alex';
    function Bar(){
        console.log(xo);
    }
     
    function Func(){
        var xo = "seven";     
        return Bar;
    }
     
    var ret = Func();
    ret();
    // 输出结果: alex
    /*
    这里函数被执行之前已经创建了两条作用域链:
    全局作用域 -> Bar函数作用域
    全局作用域 -> Func函数作用域
    当执行ret()时,ret代指的Bar函数,而Bar函数的作用域链已经存在:
    全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。
    

    还有一点,在JavaScript中如果不创建变量,直接去使用,则报错,JavaScript中如果创建值而不赋值,则该值为 undefined,以下函数需要注意:

    function Foo(){
        console.log(xo);
        var xo = 'seven';
    }
    
    Foo();
    // 输出:undefined
    /*
    这段代码不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。
    */
    

    所以,总结下来就是五句话:
    “Js 无块级作用域”
    Js 采用函数作用域
    Js 有作用域链
    Js 的作用域链执行前已经创建
    Js 的变量先声明后使用

    以上是 Js 与 Python 的区别,然后接下来说下 Js 的 Dom 操作。

    相关文章

      网友评论

          本文标题:前端(三) - JavaScript

          本文链接:https://www.haomeiwen.com/subject/yoaaaxtx.html