JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】

是洋洋a

已于 2024-03-31 19:15:06 修改

阅读量964

点赞数 19

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2024-03-30 22:10:34 首次发布

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/137183413

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.JavaScript介绍

1.1什么是JavaScript

JavaScript简称“js”，js与java没有任何关系。

js是一种“轻量级、解释型、面向对象的脚本语言”。

二.JavaScript的两种导入方式

2.1内联式

在HTML文档中使用<script>标签直接引用。

    <script>
        console.log("Hello,world,内联样式")
    </script>

2.2外联样式

在HTML中使用<script>标签的“src”属性引入

    <script src="./JS/myscript.js"></script>

在这里我有一个JS文件夹,里面有一个“myscript.js”名字的js文件

文件内容如下：

console.log("Hello,world,外联样式");

效果：

三.js的变量作用域

3.1全局作用域

在“函数之外”定义的变量拥有“全局作用域”，被定义的变量叫作“全局变量”

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

而“全局变量”可以在JS程序中的任何地方被访问，例如：

<!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>
    <script>
        var x = 100;
        console.log("x在第一个script标签中被访问",x)
        function pt(){
            console.log("x在pt函数中被访问",x)
        }
        pt();
    </script>
    <script>
        console.log("x在第二个script标签中被访问",x)
    </script>
</body>
</html>

效果：

可见全局变量哪怕是在不同的<script>标签中，仍然可以被访问。

那么全局变量在被调用位置的后面，还能不能访问呢？如下所示：

    <script>
        console.log("x在最前面script标签中被访问",x)
    </script>
    <script>
        var x = 100;
        console.log("x在第一个script标签中被访问",x)
    </script>

效果：

报错了，显示：“x没有被定义”。

这说明作用域只在被定义的开始位置到整个HTML文档结束，这与其它编程语言中的变量作用域是类似的，如果学习过(C/C++、python等等)应该很好理解。

3.2函数(局部)作用域

在“函数”定义的变量拥有”函数作用域“，被叫作“局部变量”

例如：

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

很好理解吧，就跟编程语言中的局部作用域是一样的。

“局部变量只能在被定义的函数中访问”

例如：

<!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>
    <script>
        function sample(){
            var x = 100;
            console.log("x在sample函数中被调用",x);
        }
        sample();
        console.log("x在script标签中被调用",x);
    </script>
</body>
</html>

效果：

可以看到在<script>标签中调用x报错，提示“没有定义x”。

这说明x是一个局部变量。

3.3块作用域

块作用域是ES2015新订的规则。

块作用域指的是在“{}(花括号)”中定义的变量，具有块作用域，在块外无法访问。

值得注意的是，使用“var”在块内定义变量，仍然可以在块外访问，只有使用“let”定义的变量才不可以在块外访问。

例如：

{
var x = 10;
}
// 此处可以使用 x

比如：

<!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>
    <script>
        {
            var x = 10;
            let y = 100;
        }
        console.log("块外访问var定义的x",x);
        console.log("块外访问let定义的y",y);
    </script>
</body>
</html>

效果：

看到使用let定义的变量y具有“块作用域”

3.4var和let单独重新定义变量的问题【重要】

使用var两次定义变量，第二次定义在某个块中，会造成值改变，因为var默认是全局变量，哪怕在块中。

例如：

<!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>
    <script>
        var x = 100;
        console.log("第一次访问var定义的x",x);
        {
            var x = 10;
        }
        console.log("第二次访问var定义的x",x);
    </script>
</body>
</html>

效果：

可以看到全局变量x在块内被修改了！！

但如果，我们在块中使用“let”定义x，那么就可以解决这个问题了，因为let定义的变量具有块作用域，不会改变全局变量x

    <script>
        var x = 100;
        console.log("第一次访问var定义的x",x);
        {
            let x = 10;
        }
        console.log("第二次访问var定义的x",x);
    </script>

效果：

如果我们在某个作用域中，重复使用var或者let定义某一个变量，结果如何呢？

<!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>
    <script>
        var x = 100;
        console.log("第一次访问var定义的x",x);
        var x = 250;
        console.log("第二次访问var定义的x",x);
        let y = 100;
        console.log("第一次访问let定义的y",y);
        // let y = 250;
        // console.log("第二次访问let定义的y",y;
    </script>
</body>
</html>

效果：

注意：我对let的定义只有一次，没有第二次，那是因为，如果第二次重新定义y就会报错

原因很简单，y是由let定义的，而let定义的变量是具有块作用域的，块作用域变量不能重复定义，而var定义的变量具有全局作用域，可以使用var重复定义。

不明白实质的背过就行，因为我也不是很懂。

3.5使用var和let交叉定义变量的问题

什么是交叉定义？

很简单，就是我先用var(let)定义一个变量x，再用let(var)重新定义变量x，这就叫交叉定义。

“在相同作用域中使用var和let交叉定义相同变量是不允许的”

例如：

let x = 10;       // 允许
var x = 6;       // 不允许

var y = 100;    //允许
let y = 60;    //不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许

  var y = 100;    //允许
  let y = 60;    //不允许
}

这样会使程序崩溃（报错都没有！）

是洋洋a

关注

19
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】

重要什么是交叉定义？很简单，就是我先用var(let)定义一个变量x，再用let(var)重新定义变量x，这就叫交叉定义。在相同作用域中使用var和let交叉定义相同变量是不允许的let x = 10;// 允许var x = 6;// 不允许//允许let y = 60;//不允许let x = 10;// 允许var x = 6;// 不允许//允许let y = 60;//不允许这样会使程序崩溃报错都没有！
复制链接

扫一扫