JavaScript scope


A collection of scope-accessible variables.

JavaScript scope

In JavaScript, objects and functions are also variables.

In JavaScript, scope is a collection of accessible variables, objects, and functions.

JavaScript function scope: The scope is modified within the function.

JavaScript local scope

Variables are declared within the function, and the variables are local scope.

Local variables: can only be accessed inside the function.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>局部变量在声明的函数内可以访问。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Because local variables only act within the function, different functions can use variables with the same name.

Local variables are created when the function starts executing, and will be automatically destroyed after the function is executed.

JavaScript global variables

Variables defined outside the function are global variables.

Global variables have Global scope: All scripts and functions in the web page can be used.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以显示 " + carName;
}
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

If the variable is not declared within the function (without using the var keyword), the variable is a global variable.

In the following example, carName is within the function, but is a global variable.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
如果你的变量没有声明，它将自动成为全局变量：
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " + carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

JavaScript variable life cycle

JavaScript variable life cycle is initialized when it is declared.

Local variables are destroyed after the function is executed.

Global variables are destroyed after the page is closed.

Function parameters

Function parameters only work within the function and are local variables.

Global variables in HTML

In HTML, global variables are window objects: all data variables belong to the window object.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
在 HTML 中, 所有全局变量都会成为 window 变量。
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " + window.carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Do you know?


##Your global variable, or function , can override the variables or functions of the window object.
NoteLocal variables, including window objects, can override global variables and functions.