title: JS中的函數(shù)
date: 2018-9-27 23:04:05
tags: [JavaScript]
categories: JavaScript
什么是函數(shù)
函數(shù)是一段可以反復(fù)調(diào)用的代碼塊。函數(shù)還能接受輸入的參數(shù),不同的參數(shù)會(huì)返回不同的值胜茧。
函數(shù)的本質(zhì)就是對(duì)象派阱,或者說(shuō)可以執(zhí)行代碼的對(duì)象就是函數(shù)窍霞。
函數(shù)的五種聲明方法
函數(shù)體內(nèi)部的return語(yǔ)句沦补,表示返回罩缴。JavaScript 引擎遇到return語(yǔ)句踢俄,就直接返回return后面的那個(gè)表達(dá)式的值缩功,后面即使還有語(yǔ)句,也不會(huì)得到執(zhí)行都办。也就是說(shuō)嫡锌,return語(yǔ)句所帶的那個(gè)表達(dá)式,就是函數(shù)的返回值琳钉。如果沒(méi)有return势木,該函數(shù)就返回undefined。
- 具名函數(shù)
function fn1() {
return undefined; // 如果不寫return 歌懒,瀏覽器默認(rèn)返回undefined
}
- 匿名函數(shù)
var fn2 = function() {}
- 結(jié)合上面兩種方式(謹(jǐn)慎使用)
var fn3 = function fn4() {}
- 使用Function函數(shù)對(duì)象
new Function() 中啦桌,最后一個(gè)參數(shù)表示函數(shù)體,前面的參數(shù)表示傳入函數(shù)的參數(shù)及皂。
var fn5 = new Function(
'x',
'y',
'return x + y'
);
- 箭頭函數(shù)
var fn6 = (x,y) => {return x+y} // 箭頭前面表示傳入函數(shù)的參數(shù)甫男,箭頭后面表示函數(shù)體且改。
var fn7 = x => {return x*2} // 如果只有一個(gè)參數(shù),參數(shù)的圓括號(hào)可以省略
var fn8 = x => x*x // 如果函數(shù)體只有一句話板驳,可以同時(shí)省略函數(shù)體的大括號(hào)及return
函數(shù)的調(diào)用
function fn(){ return undefined; }
fn() // 執(zhí)行該函數(shù)钾虐。
作為初學(xué)者,更建議使用call()方法笋庄,call()的第一個(gè)參數(shù)是this效扫,后面的參數(shù)是arguments(偽數(shù)組)
例如:
function fn(x,y){ return x+y; }
fn.call(undefined,1,2) // 結(jié)果為3 等價(jià)于fn(1,2)
函數(shù)的常用屬性和方法
- name 屬性
每一個(gè)函數(shù)都有name屬性,但其值可能因不同的函數(shù)聲明方式而不同直砂。舉例:
// 具名函數(shù)的name屬性菌仁,表示函數(shù)的名字
function fn1() {}
fn1.name // "fn1"
// 匿名函數(shù)的name屬性,指的是接收函數(shù)的變量名
var fn2 = function () {}
fn2.name // "fn2"
// fn3.name返回函數(shù)表達(dá)式的名字静暂。真正的函數(shù)名還是fn3济丘,而fn4這個(gè)名字只在函數(shù)體內(nèi)部可用。
var fn3 = function fn4(){}
fn3.name // "fn4"
// 使用Function()方法構(gòu)造函數(shù)洽蛀,函數(shù)的name屬性值為"anonymous"
var fn5 = new Function()
fn5.name // "anonymous"
// 箭頭函數(shù)的name屬性摹迷,指的也是接收函數(shù)的變量名
var fn6 = () => {}
fn6.name // "fn6"
- length 屬性
函數(shù)的length屬性返回函數(shù)預(yù)期傳入的參數(shù)個(gè)數(shù),即函數(shù)定義之中的參數(shù)個(gè)數(shù)郊供。
常用來(lái)判斷定義時(shí)和調(diào)用時(shí)參數(shù)的差異
function fn(a, b) {}
fn.length // 2 不管調(diào)用時(shí)輸入了多少個(gè)參數(shù)峡碉,length屬性始終等于2。
- toString() 方法
函數(shù)的toString方法返回一個(gè)字符串驮审,內(nèi)容是函數(shù)的源碼鲫寄,包括函數(shù)中的注釋也會(huì)被打印出來(lái)。
function fn() {
var a = 1
/* 我是
注釋*/
}
fn.toString()
// "function fn() {
// var a = 1
// /* 我是
// 注釋*/
// }"
call apply bind 的用法
call() 方法調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的this值和分別地提供的參數(shù)(參數(shù)的列表)疯淫。
apply() 方法調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的this值地来,以及作為一個(gè)數(shù)組(或類似數(shù)組的對(duì)象)提供的參數(shù)。
- apply和call二者作用一樣熙掺,只是接受參數(shù)的方式不一樣未斑,call需要把參數(shù)按順序傳遞進(jìn)去,而apply則是把參數(shù)放在數(shù)組里币绩。
bind() 方法創(chuàng)建一個(gè)新的函數(shù)蜡秽,被調(diào)用時(shí),將其this關(guān)鍵字設(shè)置為提供的值类浪,在調(diào)用新函數(shù)時(shí)载城,在任何提供之前提供一個(gè)給定的參數(shù)序列肌似。
- bind 是創(chuàng)建對(duì)應(yīng)函數(shù)费就,非立即執(zhí)行;apply 川队、call會(huì)立即執(zhí)行函數(shù) 力细。
作用域
作用域(scope)指的是變量存在的范圍睬澡。
在 ES5 的規(guī)范中,Javascript 只有兩種作用域:
一種是全局作用域眠蚂,變量在整個(gè)程序中一直存在煞聪,所有地方都可以讀取逝慧;
另一種是函數(shù)作用域昔脯,變量只在函數(shù)內(nèi)部存在。ES6又新增了塊級(jí)作用域笛臣。
- 在判斷作用域時(shí)云稚,還要注意函數(shù)作用域內(nèi)部會(huì)產(chǎn)生變量提升現(xiàn)象。
var命令聲明的變量沈堡,不管在什么位置静陈,變量聲明都會(huì)被提升到函數(shù)體的頭部。
閉包
如果一個(gè)函數(shù)使用了它范圍外的變量诞丽,那么(這個(gè)函數(shù)和這個(gè)變量)就叫做閉包鲸拥。
具體介紹這里引用鏈接:
https://zhuanlan.zhihu.com/p/22486908
回調(diào)(callback)
名詞解釋:被當(dāng)做參數(shù)的函數(shù)就是回調(diào)函數(shù)
動(dòng)詞解釋:調(diào)用這個(gè)回調(diào)
舉例:
fn(function(){}) :函數(shù)fn中的參數(shù)是一個(gè)函數(shù),在fn中調(diào)用了這個(gè)函數(shù)僧免,那么這個(gè)函數(shù)就是回調(diào)函數(shù)刑赶,調(diào)用的過(guò)程就是回調(diào)。
立即執(zhí)行函數(shù)的使用
我的MVC篇中有用到立即執(zhí)行函數(shù)懂衩,并有詳細(xì)講解角撞。