JavaScript 基礎(chǔ)函數(shù)_深入剖析變量和作用域
函數(shù)定義和調(diào)用
定義函數(shù),在JavaScript中,定義函數(shù)的方式如下:
function abs(x){ if(x >=0){ return x; }else{ return -x; } }
上述abs() 函數(shù)的定義如下:
function 指出這是一個(gè)函數(shù)定義;
abs 是函數(shù)的名稱(chēng);
(x) 括號(hào)內(nèi)列出函數(shù)的參數(shù),多個(gè)參數(shù)以,分隔;
{...}之間的代碼是函數(shù)體,可以包含若干語(yǔ)句,甚至可以沒(méi)有任何語(yǔ)句。
注意:函數(shù)體內(nèi)部的語(yǔ)句在執(zhí)行時(shí),一旦執(zhí)行到return 時(shí),函數(shù)就執(zhí)行完畢,并將結(jié)果返回。因此內(nèi)部通過(guò)條件判斷和循環(huán)可以在實(shí)現(xiàn)非常復(fù)雜的。
如果沒(méi)有return語(yǔ)句,函數(shù)執(zhí)行完畢后也會(huì)返回結(jié)果,只是結(jié)果為undefined。
由于JavaScript的函數(shù)也是一個(gè)對(duì)象,上述定義的abs()函數(shù)實(shí)際上是一個(gè)函數(shù)對(duì)象,而函數(shù)名abs可以視為指向該函數(shù)的變量。
var abs = function(x){ if(x >= 0){ return x; } else { return -x; } }
在這種方式下,function (x) { ... }是一個(gè)匿名函數(shù),它沒(méi)有函數(shù)名。但是,這個(gè)匿名函數(shù)賦值給了變量abs,所以,通過(guò)變量abs就可以調(diào)用該函數(shù)。
兩種定義完全等價(jià),注意第二種方式按照完整語(yǔ)法需要在函數(shù)體末尾加一個(gè);,表示賦值語(yǔ)句結(jié)束。
調(diào)用函數(shù)時(shí),按順序傳入?yún)?shù)即可:
abs(10); // 返回10
abs(-9); // 返回9
由于JavaScript 允許傳入任意個(gè)參數(shù)而不受影響調(diào)用,因此傳入的參數(shù)比定義的參數(shù)多也沒(méi)有問(wèn)題,雖然函數(shù)內(nèi)部并不需要這些參數(shù)。
abs(10,'blablabla'); //返回10
abs(-9,'haha','hehe',null) // 返回9
傳入的參數(shù)比定義的少也沒(méi)有問(wèn)題
abs(); 返回NaN
此時(shí)abs(x)函數(shù)的參數(shù)x 將收到undefined,計(jì)算結(jié)果為NaN
function abs(x){ if(typeof x !=='number'){ throw 'Not a number': } if(x >=0){ return x; }else{ return -x; } }
arguments
JavaScript 還有一個(gè)免費(fèi)贈(zèng)送的關(guān)鍵字 arguments,它只在函數(shù)內(nèi)部起作用,并且永遠(yuǎn)指向當(dāng)前函數(shù)的調(diào)用者傳入的所有參數(shù)。
function foo(x){ alert(x); // 10 for(var i=0; i < arguments.length;++){ alert(arguments[i]); // 10,20,30 } } foo(10.20,30)
利用arguments,你可以獲得調(diào)用者傳入的所有參數(shù)。也就是說(shuō),即使函數(shù)不定義任何參數(shù),還是可以拿到參數(shù)的值:
function abs(){ if(arguments.length ===0){ return 0; } var x = arguments[0] return x >=0 ? x : -x; } abs(); //0 abs(10); // 10 abs(-9) //9
實(shí)際上arguments最常用于判斷傳入?yún)?shù)的個(gè)數(shù)。你可能會(huì)看到這樣的寫(xiě)法:
// foo(a[,b],c)
//接受2~3 個(gè)參數(shù),b 是可選參數(shù),如果只要出入兩個(gè)參數(shù),b默認(rèn)為null
function foo(a,b,c){ if(arguments.length ===2){ // 實(shí)際拿到的參數(shù)是a 和b c 為undefined c = b; b = null; // b 變?yōu)槟J(rèn)值
要把中間的參數(shù)b變?yōu)椤翱蛇x”參數(shù),就只能通過(guò)arguments判斷,然后重新調(diào)整參數(shù)并賦值。
rest 參數(shù)
由于JavaScript 函數(shù)允許接收任意個(gè)參數(shù),遇事我們就不得不用arguments 來(lái)獲取所有的參數(shù):
function foo(a,b){ var i, rest = []; if(arguments.length > 2){ for(i = 2; i < arguments.length; i++){ rest.push(arguments[i]); } } console.log('a =' + a); console.log('b = ' + b); console.log(rest); }
為了獲取除了已定義參數(shù)a、b之外的參數(shù),我們不得不用arguments,并且循環(huán)要從索引2開(kāi)始以便排除前兩個(gè)參數(shù),這種寫(xiě)法很別扭,只是為了獲得額外的rest參數(shù),有沒(méi) 有更好的方法?
ES6標(biāo)準(zhǔn)引入了rest參數(shù),上面的函數(shù)可以改寫(xiě)為:
function foo(a,b,...rest){ console.log('a = ' + a); console.log('b = ' + b); console.log(rest); } foo(1,2,3,4,5); //結(jié)果 // a = 1 // b = 2 // Array[3,4,5] foo(1) // 結(jié)果 // a = 1 // b = undefined // Array []
rest 參數(shù)只能寫(xiě)在最后,前面用... 標(biāo)示,從運(yùn)行結(jié)果可知,傳入的參數(shù)先綁定 a , b, 多余的參數(shù)以數(shù)組形式交給變量 rest,所以,
不在需要 arguments 我們就獲取了全部參數(shù)。
如果傳入的參數(shù)連正常定義的參數(shù)都沒(méi)填滿,也不要緊,rest參數(shù)會(huì)接收一個(gè)空數(shù)組(注意不是undefined)。
return 語(yǔ)句
前面我們講到了JavaScript引擎有一個(gè)在行末自動(dòng)添加分號(hào)的機(jī)制,這可能讓你栽到return語(yǔ)句的一個(gè)大坑:、
function foo(){ return {name:'foo'}; } foo(); // {name:'foo'}
要注意:
function foo(){ return: //自動(dòng)添加了分號(hào),相當(dāng)于return undefined {name:'foo'}; // 這行語(yǔ)句已經(jīng)沒(méi)法執(zhí)行到了。 }
所以正確的多行寫(xiě)法是
function foo(){ return { // 這里不會(huì)自動(dòng)加分號(hào),因?yàn)楸硎菊Z(yǔ)句尚未結(jié)束。 name:'foo' } }
變量作用域
在JavaScript 中,用var 聲明的實(shí)際上是有作用域的。
如果一個(gè)變量在函數(shù)體內(nèi)部申明,則該變量的作用域?yàn)檎麄€(gè)函數(shù)體,在函數(shù)體外不該引用該變量。
‘use strict': function foo(){ var x = 1; x = x +1; } x = x +2; // RefrenceError 無(wú)法在函數(shù)體外引用該該變量x
如果兩個(gè)不同的函數(shù)各自申明了同一個(gè)變量,那么該變量只在各自的函數(shù)體內(nèi)起作用。換句話說(shuō),不同函數(shù)內(nèi)部的同名變量互相獨(dú)立,互不影響:
'use struct': function foo(){ var x = 1; x = x +1; } function bar (){ var x= 'A'; x = x + 'B'; }
由于JavaScript的函數(shù)可以嵌套,此時(shí),內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)定義的變量,反過(guò)來(lái)則不行:
'use strict'; function foo(){ var x =1; function bar(){ var x = 1; function bar(){ var y= x +1; //bar 可以訪問(wèn)foo 的變量x } var z = y + 1; //RefernceError! foo 不可以訪問(wèn)bar 的變量y! } }
如果內(nèi)部函數(shù)和外部函數(shù)的變量名重名怎么辦?
'use strict': function foo(){ var x = 1; function bar (){ var x = 'A'; alert('x in bar() =' + x); // 'A' } alert('x in foo()=' +x) //1 bar(); }
變量提升
JavaScript的函數(shù)定義有個(gè)特點(diǎn),它會(huì)先掃描整個(gè)函數(shù)體的語(yǔ)句,把所有申明的變量“提升”到函數(shù)頂部:
'use strict'; function foo(){ var x='Hello,'+y; alert(x); var y = 'Bob'; } foo();
對(duì)于上述foo()函數(shù),JavaScript引擎看到的代碼相當(dāng)于:
function foo(){ var y; // 提升變量y的 var x = 'Hello' + y; alert(x); y = 'Bob'; }
由于JavaScript的這一怪異的“特性”,我們?cè)诤瘮?shù)內(nèi)部定義變量時(shí),請(qǐng)嚴(yán)格遵守“在函數(shù)內(nèi)部首先申明所有變量”這一規(guī)則。最常見(jiàn)的做法是用一個(gè)var申明函數(shù)內(nèi)部用到的所有變量:
function foo(){ var x =1, // x 初始化為1 y = x +1, // y 初始化為2 z,i; // z和i 為undefined // 其他語(yǔ)句 for(i =0; i<100; i++){ ... } }
全局作用域
不在任何函數(shù)內(nèi)定義的變量就具有全局作用域,實(shí)際上,JavaScript 默認(rèn)有一個(gè)全局作用域的變量實(shí)際上唄綁定到window 的一個(gè)屬性。
‘use strict'; var sourse = 'Learn JavaScript'; alert(course); // 'Learn JavaScript'; alert(window.course); // 'Learn JavaScript'
名字空間
全局變量會(huì)綁定到window 上,不同的JavaScript 文件如果使用相同的全局變量,或者定義了相同名字的頂層函數(shù),都會(huì)造成
命名沖突,并且很難被發(fā)現(xiàn),
減少?zèng)_突的一個(gè)方法是把自己的所有的變量和函數(shù)全部綁定到一個(gè)全局變量中。
// 唯一的曲劇變量MYAPP var MYAPP = {}; //其他變量: MYAPP.name = 'myapp'; MYAPP.version = 1.0; // 其他函數(shù) MYAPP.foo = function (){ return 'foo'; };
把自己的代碼全部放入唯一的名字空間MYAPP中,會(huì)大大減少全局變量沖突的可能。
局部作用域
由于JavaScript 的變量作用域?qū)嶋H上是函數(shù)內(nèi)部,我們?cè)趂or 循環(huán)等語(yǔ)句塊中是無(wú)法定義具有無(wú)法定義具有局部作用域的變量的。
function foo(){ for(var i = 0; i<100; i++){ // } i+=100; // 仍然可以引用變量; }
為了解決塊級(jí)作用域,ES6引入了新的關(guān)鍵字let,用let替代var可以申明一個(gè)塊級(jí)作用域的變量:
function foo(){ var sum = 0; for(let i=0; i<100;i++){ sum +=i; } i +=1; }
常量
由于var 和let 聲明的變量,如果要聲明一個(gè)常量,在ES6 之前是不行的,我們通常用全部大寫(xiě)的變量倆表示這是一個(gè)常量
不要修改他的值。
var PI = 3.14;
ES6標(biāo)準(zhǔn)引入了新的關(guān)鍵字const 來(lái)定義常量,const 與 let都具有塊級(jí)作用域;
const PI = 3.14;
PI = 3; // 某些瀏覽器不報(bào)錯(cuò),但是無(wú)效果。
PI; // 3.14
以上這篇JavaScript 基礎(chǔ)函數(shù)_深入剖析變量和作用域就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS失效 提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁(yè) utf-8 覆蓋(META 標(biāo)記)的沖突的代
今天使用F12調(diào)試的時(shí)候提示HTML1114: (UNICODE 字節(jié)順序標(biāo)記)的代碼頁(yè) utf-8 覆蓋(META 標(biāo)記)的沖突的代碼頁(yè) utf-8,需要的朋友可以參考下2017-06-06javascript中的onkeyup和onkeydown區(qū)別介紹
文本框里輸入的時(shí)候要開(kāi)始計(jì)算文本框里面輸入了多少字,自然想到了onkeydown事件,然后計(jì)算value.length的方法,下面看下具體的代碼2013-04-04關(guān)于javascript中的typeof和instanceof介紹
typeof用來(lái)檢測(cè)給定變量的數(shù)據(jù)類(lèi)型 instanceof用來(lái)檢測(cè)對(duì)象的類(lèi)型2012-12-12javascript中實(shí)現(xiàn)兼容JAVA的hashCode算法代碼分享
這篇文章主要介紹了javascript中實(shí)現(xiàn)兼容JAVA的hashCode算法代碼分享,實(shí)現(xiàn)跟JAVA中的運(yùn)算結(jié)果一致,需要的朋友可以參考下2014-08-08關(guān)于JavaScript 原型鏈的一點(diǎn)個(gè)人理解
本文給大家分享的是個(gè)人關(guān)于JavaScript原型鏈相關(guān)知識(shí)的一些理解,這里推薦給大家,希望大家能夠喜歡2016-07-07詳解javascript設(shè)計(jì)模式三:代理模式
這篇文章主要介紹了javascript設(shè)計(jì)模式三:代理模式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JavaScript DOM 學(xué)習(xí)第五章 表單簡(jiǎn)介
在這一章我主要介紹一些用來(lái)檢測(cè)用戶(hù)輸入的代碼,利用這些代碼,你也可以寫(xiě)一些自己的檢測(cè)函數(shù)。2010-02-02關(guān)于什么是javascript模塊化以及為何使用模塊化開(kāi)發(fā)
這篇文章主要介紹了關(guān)于什么是javascript模塊化以及為何使用模塊化開(kāi)發(fā),模塊化是一種軟件開(kāi)發(fā)的設(shè)計(jì)模式,它將一個(gè)大型的軟件系統(tǒng)劃分成多個(gè)獨(dú)立的模塊,每個(gè)模塊都有自己的功能和接口,需要的朋友可以參考下2023-04-04