[劉陽Java]_步步窺探JS變量做用域

時間 2019-12-09

標籤 java 步步窺探變量欄目 Java 简体版

原文原文鏈接

今天的這個文章題目名稱甚是讓人會突發異想。JS變量做用域是務必須要搞懂的，單從面試過程就會讓面試者燒腦袋。因此，咱們仍是寫一篇關於JS變量做用域的技術專題，讓全部小夥伴可以藉此文章去整理JS的基礎學習。說不定不少人會比我理解這方面基礎知識有更好地看法javascript

黃金守則第一條： JS沒有塊級做用域（你能夠本身閉包或其餘方法實現），只有函數級做用域，函數外面的變量函數裏面能夠找到，函數裏面的變量外面找不到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);
	}
	function m02() { // 嘗試經過m02方法去改變變量a的值
		var a = 20;
		m01();
	}
	m02();
  </script>
 </head>
 <body>
 </body>
</html>

黃金守則第一條原理：由於在方法m02裏面定義變量a是局部變量，它不會影響最外面的var a = 10; 的值java

黃金守則第二條：在函數裏面定義變量 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學習

黃金守則第四條：當參數跟局部變量重名時，優先級是等同的。spa

<!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>

=============================================================3d

參數是基本類型，只傳了值進去，下面的傳個引用類型

<!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>