美文网首页
前端(三) - 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