函數(shù)作用域及變量提升（作用域鏈）
關(guān)于函數(shù)的相關(guān)初識(shí)嘹履，函數(shù)在Js中是不可或缺的一部分，功能十分強(qiáng)大债热，所用到的地方呢也非常多砾嫉，提到函數(shù)，函數(shù)的知識(shí)點(diǎn)很多窒篱。定義一個(gè)函數(shù)焕刮，需要function? 函數(shù)名 （參數(shù)）{函數(shù)體}。函數(shù)需要調(diào)用才能使用墙杯，創(chuàng)建函數(shù)名的時(shí)候命名規(guī)則與變量的命名一樣配并。不能重復(fù)命名，重復(fù)命名最終只會(huì)生效一個(gè)高镐，后寫的會(huì)將先寫的覆蓋掉荐绝。其中，又要提到作用域的概念避消，什么是作用域。在函數(shù)內(nèi)部的稱為局部變量召夹，在函數(shù)外部的稱為全局變量岩喷。在js中，有個(gè)概念叫做作用域鏈监憎，總結(jié)來說纱意，就是從函數(shù)內(nèi)部向外部尋找的一個(gè)過程，形成一個(gè)作用域鏈鲸阔。變量提升：在js中偷霉，運(yùn)行時(shí)先將文檔中的變量和函數(shù)都預(yù)覽一遍，然后在按照從上往下的順序運(yùn)行代碼褐筛，此過程稱為變量提升类少。
作用域：
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<script>
? ? ? ? // 作用域及作用域鏈
? ? ? ? // 作用域:變量或函數(shù)的有效使用范圍，有全局作用域和局部作用域兩種
? ? ? ? // 全局變量： 函數(shù)外聲明的變量渔扎，在任何地方都可以被修改和訪問硫狞。
? ? ? ? // 局部變量:? 函數(shù)內(nèi)聲明的變量，只能在函數(shù)內(nèi)被修改和訪問。
? ? ? ? // 作用域鏈：是js內(nèi)部中的一種變量残吩，函數(shù)查找機(jī)制财忽，它決定了變量和函數(shù)的作用范圍，向上查找的方式
? ? ? ? // 全局函數(shù)
? ? ? ? function fn() {
? ? ? ? ? ? var b = 10//局部變量
? ? ? ? ? ? console.log('111');
? ? ? ? }
? ? ? ? //全局變量
? ? ? ? var a = 10
? ? ? ? console.log(window.a);
? ? ? ? window.fn()
? ? ? ? //? 在window上的屬性和函數(shù)可以省略window
? ? ? ? // var a=20
? ? ? ? // function fn() {
? ? ? ? //? ? var b = 10//局部變量
? ? ? ? //? ? console.log(a); //20
? ? ? ? //? ? console.log(b); //10
? ? ? ? // }
? ? ? ? // fn()
? ? ? ? // console.log(b);//報(bào)錯(cuò)? 局部變量b只在函數(shù)內(nèi)有效 出了函數(shù)就會(huì)被垃圾回收機(jī)制回收
? ? ? ? // 作用域鏈：是js內(nèi)部中的一種變量泣侮，函數(shù)查找機(jī)制即彪，它決定了變量和函數(shù)的作用范圍，向上查找的方式
? ? ? ? // var a=20
? ? ? ? // function fn() {
? ? ? ? //? ? var b = 10//局部變量
? ? ? ? //? ? // 變量a在函數(shù)內(nèi)作用域中沒有活尊，就會(huì)向上查找
? ? ? ? //? ? console.log(a); //20
? ? ? ? //? ? console.log(b); //10
? ? ? ? // }
? ? ? ? // fn()
? ? ? ? var? a=50
? ? ? ? function ff(){
? ? ? ? ? ? var b=10
? ? ? ? ? ? console.log(a); // 50 向上查找的機(jī)制
? ? ? ? ? ? gg()
? ? ? ? ? ? function gg(){
? ? ? ? ? ? ? ? var c=90 //gg函數(shù)的局部變量
? ? ? ? ? ? ? ? console.log(a); //向上查找的機(jī)制
? ? ? ? ? ? ? ? console.log('111');
? ? ? ? ? ? ? ? console.log(c); //在本身的局部作用域中就有
? ? ? ? ? ? }
? ? ? ? ? ? // gg()
? ? ? ? ? ? // console.log(c) //報(bào)錯(cuò)
? ? ? ? }
? ? ? ? ff()
? ? ? ? // gg() //報(bào)錯(cuò)? 局部函數(shù)
? ? ? ? function sum(){
? ? ? ? ? ? var a=10
? ? ? ? ? ? console.log(a); //10
? ? ? ? ? ? // console.log(c);//報(bào)錯(cuò)
? ? ? ? ? ? function s(){
? ? ? ? ? ? ? ? var c=20
? ? ? ? ? ? }
? ? ? ? ? ? s()
? ? ? ? }
? ? ? ? sum()
? ? ? ? console.log(c); //報(bào)錯(cuò)
</script>
</body>
</html>
變量提升：
<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
<script>
? ? ? ? // 變量提升：瀏覽器在解析js代碼的時(shí)候隶校，會(huì)先進(jìn)行一個(gè)預(yù)解析的操作，會(huì)有一個(gè)js解析器
? ? ? ? // js解析器酬凳，會(huì)執(zhí)行其中的兩個(gè)步驟
? ? ? ? // 1惠况、找 var? function (找變量)
? ? ? ? // 2、逐行解析
? ? ? ? // 1宁仔、找 var? function (找變量)
? ? ? ? // 1稠屠、1? 如果存在var 關(guān)鍵詞，則會(huì)將這個(gè)變量 存起來? 形式：var a; 并且提到最前面
? ? ? ? // 1.2 找函數(shù)? 如果存在函數(shù)則整體(不包含函數(shù)的調(diào)用)提到前面
? ? ? ? // 1.3 逐行排列解析
? ? ? ? // 函數(shù)調(diào)用的時(shí)候 翎苫，在函數(shù)內(nèi)部也會(huì)執(zhí)行以上兩個(gè)步驟
? ? ? ? // var b;
? ? ? ? // function s(){
? ? ? ? //? ? console.log('111');
? ? ? ? // }
? ? ? ? // console.log(b); //undefined
? ? ? ? // b = 10?
? ? ? ? // s()
? ? ? ? // console.log(c);
? ? ? ? // var c = 10
? ? ? ? // function s() {
? ? ? ? //? ? console.log(c);
? ? ? ? //? ? console.log(g);
? ? ? ? //? ? var g = 20
? ? ? ? // }
? ? ? ? // s()
? ? ? ? // console.log(c);
? ? ? ? // console.log(g);
? ? ? ? /*
? ? ? ? var c;
? ? ? ? function s(){? ? ? ? ? ? ?
? ? ? ? ? ? console.log(c);? ? ? ? ? ? var g;
? ? ? ? ? ? console.log(g);? ? ? ? ? ? console.log(c); //10
? ? ? ? ? ? var g=20? ? ? ? ? ? ? ? ? ? console.log(g);? //undefined
? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? g=20?
? ? ? ? ? console.log(c);//undefined
? ? ? ? ? c=10
? ? ? ? ? ? s()
? ? ? ? ? ? console.log(c); //10
? ? ? ? ? console.log(g); //局部變量不能再外面訪問
? ? ? ? */
? ? ? ? var? a=30
? ? ? ? var c;
? ? ? ? function s(){
? ? ? ? ? ? console.log(c); //undefined? ? ? ?
? ? ? ? ? ? c=50?
? ? ? ? ? ? console.log(a); // 30
? ? ? ? ? ? var k=80
? ? ? ? ? ? function gg(){
? ? ? ? ? ? ? ? console.log(k); //80
? ? ? ? ? ? }
? ? ? ? ? ? gg()? ? ? ? ? ?
? ? ? ? }
? ? ? ? console.log(c);//undefined
? ? ? ? s()
? ? ? ? console.log(c);//50
? ? ? ? /*
? ? ? ? ? var a;
? ? ? ? ? var c;
? ? ? ? ? function s(){? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? console.log(c);
? ? ? ? ? ? c=50
? ? ? ? ? ? console.log(a);
? ? ? ? ? ? var? k=80
? ? ? ? ? ? function gg(){
? ? ? ? ? ? ? ? console.log(k);
? ? ? ? ? ? }? ? ? ? ? ?
? ? ? ? }
? ? ? ? a=30
? ? ? ? console.log(c);
? ? ? ? s()
? ? ? ? ? var k;
? ? ? ? ? function gg(){
? ? ? ? ? ? ? ? console.log(k);
? ? ? ? ? ? }
? ? ? ? console.log(c);
? ? ? ? c=50
? ? ? ? console.log(a);
? ? ? ? k=80
? ? ? ? ? gg()
? ? ? ?*/
</script>
</body>
</html>
