[刘阳Java]_步步窥探JS变量作用域
Posted 刘阳Java
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[刘阳Java]_步步窥探JS变量作用域相关的知识，希望对你有一定的参考价值。
今天的这个文章题目名称甚是让人会突发异想。JS变量作用域是务必需要搞懂的，单从面试过程就会让面试者烧脑壳。所以，我们还是写一篇关于JS变量作用域的技术专题，让所有小伙伴能够借此文章去整理JS的基础学习。说不定很多人会比我理解这方面基础知识有更好地见解
黄金守则第一条： JS没有块级作用域（你可以自己闭包或其他方法实现），只有函数级作用域，函数外面的变量函数里面可以找到，函数里面的变量外面找不到
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> var a = 10; function m01() { alert(a); } function m02() { // 尝试通过m02方法去改变变量a的值 var a = 20; m01(); } m02(); </script> </head> <body> </body> </html>
黄金守则第一条原理：因为在方法m02里面定义变量a是局部变量，它不会影响最外面的var a = 10; 的值
黄金守则第二条：在函数里面定义变量 var a = b = 10; 其实a是局部变量，b是全局变量。此程序的坑实在是难以让程序员们接受
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function m01() {
var a = b = 10;
}
m01();
// alert(a); 运行这段代码就报错; Uncaught ReferenceError: a is not defined
alert(b);
</script>
</head>
<body>
</body>
</html>
黄金守则第三条：变量的查找是就近原则，去寻找var定义的变量，当就近没有找到的时候就去查找外层。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = 10;
function m01() {
alert(a);
var a = 20;
}
m01();
</script>
</head>
<body>
</body>
</html>
==============================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = 10;
function m01() {
alert(a);
a = 20;
}
m01();
</script>
</head>
<body>
</body>
</html>
======================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = 10;
function m01() {
m02();
alert(a);
function m02() {
var a = 20;
}
}
m01();
</script>
</head>
<body>
</body>
</html>
这段代码有些意思，为什么会输出10。因为，在alert(a)的时候，bbb函数中的a确实为20 ，可是它对于这时的alert(a)这句话来说是局部的，alert(a)根本找不到bbb函数中的a，所以在aaa函数中它找不到a，于是乎去外面找，一找，就找到了10
黄金守则第四条：当参数跟局部变量重名时，优先级是等同的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = 10;
function m01(a) {
a += 3;
}
m01(a);
alert(a);
</script>
</head>
<body>
</body>
</html>
=============================================================
参数是基本类型，只传了值进去，下面的传个引用类型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = [1,2,3];
function m01(a) {
a = [1,2,3,4];
}
m01(a);
alert(a);
</script>
</head>
<body>
</body>
</html>
==========================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var a = [1,2,3];
function m01(a) {
a.push(4);
}
m01(a);
alert(a);
</script>
</head>
<body>
</body>
</html>
以上是关于[刘阳Java]_步步窥探JS变量作用域的主要内容，如果未能解决你的问题，请参考以下文章