今天筆者要來(lái)給大家介紹一下接口,廢話(huà)不多說(shuō)我們直接進(jìn)入正文哈。
接口一般來(lái)說(shuō)有兩種,一種是程序內(nèi)部的接口,一種是系統(tǒng)對(duì)外的接口。
系統(tǒng)對(duì)外的接口:比如你要從別的網(wǎng)站或服務(wù)器上獲取資源或信息,別人肯定不會(huì)把數(shù)據(jù)庫(kù)共享給你,他只能給你提供一個(gè)他們寫(xiě)好的方法來(lái)獲取數(shù)據(jù),你引用他提供的接口就能使用他寫(xiě)好的方法,從而達(dá)到數(shù)據(jù)共享的目的,比如說(shuō)咱們用的app、網(wǎng)址這些它在進(jìn)行數(shù)據(jù)處理的時(shí)候都是通過(guò)接口來(lái)進(jìn)行調(diào)用的。
程序內(nèi)部的接口:方法與方法之間,模塊與模塊之間的交互,程序內(nèi)部拋出的接口,比如bbs系統(tǒng),有登錄模塊、發(fā)帖模塊等等,那你要發(fā)帖就必須先登錄,要發(fā)帖就得登錄,那么這兩個(gè)模塊就得有交互,它就會(huì)拋出一個(gè)接口,供內(nèi)部系統(tǒng)進(jìn)行調(diào)用。
1、webService接口:是走soap協(xié)議通過(guò)http傳輸,請(qǐng)求報(bào)文和返回報(bào)文都是xml格式的,我們?cè)跍y(cè)試的時(shí)候都用通過(guò)工具才能進(jìn)行調(diào)用,測(cè)試??梢允褂玫墓ぞ哂蠸oapUI、jmeter、loadrunner等;
2、http api接口:是走h(yuǎn)ttp協(xié)議,通過(guò)路徑來(lái)區(qū)分調(diào)用的方法,請(qǐng)求報(bào)文都是key-value形式的,返回報(bào)文一般都是json串,有g(shù)et和post等方法,這也是最常用的兩種請(qǐng)求方式??梢允褂玫墓ぞ哂衟ostman、RESTClient、jmeter、loadrunner等;
在說(shuō)接口測(cè)試之前,我們先來(lái)搞清楚這兩個(gè)概念,前端和后端。
前端是什么呢,對(duì)于web端來(lái)說(shuō),咱們使用的網(wǎng)頁(yè),打開(kāi)的網(wǎng)站,這都是前端,這些都是html、css寫(xiě)的;對(duì)于app端來(lái)說(shuō)呢,它就是咱們用的app,android或者object-C(開(kāi)發(fā)ios上的app)開(kāi)發(fā)的,它的作用就是顯示頁(yè)面,讓我們看到漂亮的頁(yè)面,以及做一些簡(jiǎn)單的校驗(yàn),比如說(shuō)非空校驗(yàn),咱們?cè)陧?yè)面上操作的時(shí)候,這些業(yè)務(wù)邏輯、功能,比如說(shuō)你購(gòu)物,發(fā)微博這些功能是由后端來(lái)實(shí)現(xiàn)的,后端去控制你購(gòu)物的時(shí)候扣你的余額,發(fā)微博發(fā)到哪個(gè)賬號(hào)下面,那前端和后端是怎么交互的呢,就是通過(guò)接口。
前面說(shuō)的你可能不好理解,你只需記住:前端負(fù)責(zé)貌美如花,后端負(fù)責(zé)掙錢(qián)養(yǎng)家。
接口測(cè)試是測(cè)試系統(tǒng)組件間接口的一種測(cè)試。接口測(cè)試主要用于檢測(cè)外部系統(tǒng)與系統(tǒng)之間以及內(nèi)部各個(gè)子系統(tǒng)之間的交互點(diǎn)。測(cè)試的重點(diǎn)是要檢查數(shù)據(jù)的交換,傳遞和控制管理過(guò)程,以及系統(tǒng)間的相互邏輯依賴(lài)關(guān)系等。
OK,上面是百度百科上說(shuō)的,下面才是我說(shuō)的
其實(shí)我覺(jué)得接口測(cè)試很簡(jiǎn)單,比一般的功能測(cè)試還簡(jiǎn)單,現(xiàn)在找工作好多公司都要求有接口測(cè)試經(jīng)驗(yàn),也有好多人問(wèn)我(也就兩三個(gè)人)什么是接口測(cè)試,本著不懂也要裝懂的態(tài)度,我會(huì)說(shuō):所謂接口測(cè)試就是通過(guò)測(cè)試不同情況下的入?yún)⑴c之相應(yīng)的出參信息來(lái)判斷接口是否符合或滿(mǎn)足相應(yīng)的功能性、安全性要求。
我為啥說(shuō)接口測(cè)試比功能測(cè)試簡(jiǎn)單呢,因?yàn)楣δ軠y(cè)試是從頁(yè)面輸入值,然后通過(guò)點(diǎn)擊按鈕或鏈接等傳值給后端,而且功能測(cè)試還要測(cè)UI、前端交互等功能,但接口測(cè)試沒(méi)有頁(yè)面,它是通過(guò)接口規(guī)范文檔上的調(diào)用地址、請(qǐng)求參數(shù),拼接報(bào)文,然后發(fā)送請(qǐng)求,檢查返回結(jié)果,所以它只需測(cè)入?yún)⒑统鰠⒕托辛耍鄬?duì)來(lái)說(shuō)簡(jiǎn)單了不少。
首先,接口文檔應(yīng)該包含以下內(nèi)容:
1、接口說(shuō)明
2、調(diào)用url
3、請(qǐng)求方法(get\post)
4、請(qǐng)求參數(shù)、參數(shù)類(lèi)型、請(qǐng)求參數(shù)說(shuō)明
5、返回參數(shù)說(shuō)明
由接口文檔可知,接口至少應(yīng)有請(qǐng)求地址、請(qǐng)求方法、請(qǐng)求參數(shù)(入?yún)⒑统鰠ⅲ┙M成,部分接口有請(qǐng)求頭header。
標(biāo)頭 (header):是服務(wù)器以HTTP協(xié)議傳HTML資料到瀏覽器前所送出的字串,在標(biāo)頭與 HTML 文件之間尚需空一行分隔,一般存放cookie、token等信息
有同學(xué)問(wèn)我header和入?yún)⒂惺裁搓P(guān)系?它們不都是發(fā)送到服務(wù)器的參數(shù)嗎?
OK,首先,它們確實(shí)都是發(fā)送到服務(wù)器里的參數(shù),但它們是有區(qū)別的,header里存放的參數(shù)一般存放的是一些校驗(yàn)信息,比如cookie,它是為了校驗(yàn)這個(gè)請(qǐng)求是否有權(quán)限請(qǐng)求服務(wù)器,如果有,它才能請(qǐng)求服務(wù)器,然后把請(qǐng)求地址連同入?yún)⒁黄鸢l(fā)送到服務(wù)器,然后服務(wù)器會(huì)根據(jù)地址和入?yún)?lái)返回出參。也就是說(shuō),服務(wù)器是先接受header信息進(jìn)行判斷該請(qǐng)求是否有權(quán)限請(qǐng)求,判斷有權(quán)限后,才會(huì)接受請(qǐng)求地址和入?yún)⒌摹?/span>
大家都知道,接口其實(shí)就是前端頁(yè)面或APP等調(diào)用與后端做交互用的,所以好多人都會(huì)問(wèn),我功能測(cè)試都測(cè)好了,為什么還要測(cè)接口呢?OK,在回答這個(gè)問(wèn)題之前,先舉個(gè)栗子:
比如測(cè)試用戶(hù)注冊(cè)功能,規(guī)定用戶(hù)名為6~18個(gè)字符,包含字母(區(qū)分大小寫(xiě))、數(shù)字、下劃線。首先功能測(cè)試時(shí)肯定會(huì)對(duì)用戶(hù)名規(guī)則進(jìn)行測(cè)試時(shí),比如輸入20個(gè)字符、輸入特殊字符等,但這些可能只是在前端做了校驗(yàn),后端可能沒(méi)做校驗(yàn),如果有人通過(guò)抓包繞過(guò)前端校驗(yàn)直接發(fā)送到后端怎么辦呢?試想一下,如果用戶(hù)名和密碼未在后端做校驗(yàn),而有人又繞過(guò)前端校驗(yàn)的話(huà),那用戶(hù)名和密碼不就可以隨便輸了嗎?如果是登錄可能會(huì)通過(guò)SQL注入等手段來(lái)隨意登錄,甚至可以獲取管理員權(quán)限,那這樣不是很恐怖?
所以,接口測(cè)試的必要性就體現(xiàn)出來(lái)了:
①、可以發(fā)現(xiàn)很多在頁(yè)面上操作發(fā)現(xiàn)不了的bug
②、檢查系統(tǒng)的異常處理能力
③、檢查系統(tǒng)的安全性、穩(wěn)定性
④、前端隨便變,接口測(cè)好了,后端不用變
在進(jìn)行接口測(cè)試前,還需要了解:
1)GET和POST請(qǐng)求:
如果是get請(qǐng)求的話(huà),直接在瀏覽器里輸入就行了,只要在瀏覽器里面直接能請(qǐng)求到的,都是get請(qǐng)求,如果是post的請(qǐng)求的話(huà),就不行了,就得借助工具來(lái)發(fā)送。
GET請(qǐng)求和POST請(qǐng)求的區(qū)別:
1、GET使用URL或Cookie傳參。而POST將數(shù)據(jù)放在BODY中。
2、GET的URL會(huì)有長(zhǎng)度上的限制,則POST的數(shù)據(jù)則可以非常大。
3、POST比GET安全,因?yàn)閿?shù)據(jù)在地址欄上不可見(jiàn)。
4、一般get請(qǐng)求用來(lái)獲取數(shù)據(jù),post請(qǐng)求用來(lái)發(fā)送數(shù)據(jù)。
其實(shí)上面這幾點(diǎn),只有最后一點(diǎn)說(shuō)的是比較靠譜的,第一點(diǎn)post請(qǐng)求也可以把數(shù)據(jù)放到url里面,get請(qǐng)求其實(shí)也沒(méi)長(zhǎng)度限制,post請(qǐng)求看起來(lái)參數(shù)是隱式的,稍微安全那么一些些,但是那只是對(duì)于小白用戶(hù)來(lái)說(shuō)的,就算post請(qǐng)求,你通過(guò)抓包也是可以抓到參數(shù)的。所以上面這些面試的時(shí)候你說(shuō)出來(lái)就行了。
2)http狀態(tài)碼
每發(fā)出一個(gè)http請(qǐng)求之后,都會(huì)有一個(gè)響應(yīng),http本身會(huì)有一個(gè)狀態(tài)碼,來(lái)標(biāo)示這個(gè)請(qǐng)求是否成功,常見(jiàn)的狀態(tài)碼有以下幾種:
1、200 2開(kāi)頭的都表示這個(gè)請(qǐng)求發(fā)送成功,最常見(jiàn)的就是200,就代表這個(gè)請(qǐng)求是ok的,服務(wù)器也返回了。
2、300 3開(kāi)頭的代表重定向,最常見(jiàn)的是302,把這個(gè)請(qǐng)求重定向到別的地方了,
3、400 400代表客戶(hù)端發(fā)送的請(qǐng)求有語(yǔ)法錯(cuò)誤,401代表訪問(wèn)的頁(yè)面沒(méi)有授權(quán),403表示沒(méi)有權(quán)限訪問(wèn)這個(gè)頁(yè)面,404代表沒(méi)有這個(gè)頁(yè)面
4、500 5開(kāi)頭的代表服務(wù)器有異常,500代表服務(wù)器內(nèi)部異常,504代表服務(wù)器端超時(shí),沒(méi)返回結(jié)果
接下來(lái)再說(shuō)接口測(cè)試怎么測(cè):
1)、通用接口用例設(shè)計(jì)
①、通過(guò)性驗(yàn)證:首先肯定要保證這個(gè)接口功能是好使的,也就是正常的通過(guò)性測(cè)試,按照接口文檔上的參數(shù),正常傳入,是否可以返回正確的結(jié)果。
②、參數(shù)組合:現(xiàn)在有一個(gè)操作商品的接口,有個(gè)字段type,傳1的時(shí)候代表修改商品,商品id、商品名稱(chēng)、價(jià)格有一個(gè)是必傳的,type傳2的時(shí)候是刪除商品,商品id 是必傳的,這樣的,就要測(cè)參數(shù)組合了,type傳1的時(shí)候,只傳商品名稱(chēng)能不能修改成功,id、名稱(chēng)、價(jià)格都傳的時(shí)候能不能修改成功。
③、接口安全:
1、繞過(guò)驗(yàn)證,比如說(shuō)購(gòu)買(mǎi)了一個(gè)商品,它的價(jià)格是300元,那我在提交訂單時(shí)候,我把這個(gè)商品的價(jià)格改成3元,后端有沒(méi)有做驗(yàn)證,更狠點(diǎn),我把錢(qián)改成-3,是不是我的余額還要增加?
2、繞過(guò)身份授權(quán),比如說(shuō)修改商品信息接口,那必須得是賣(mài)家才能修改,那我傳一個(gè)普通用戶(hù),能不能修改成功,我傳一個(gè)其他的賣(mài)家能不能修改成功
3、參數(shù)是否加密,比如說(shuō)我登陸的接口,用戶(hù)名和密碼是不是加密,如果不加密的話(huà),別人攔截到你的請(qǐng)求,就能獲取到你的信息了,加密規(guī)則是否容易破解。
4、密碼安全規(guī)則,密碼的復(fù)雜程度校驗(yàn)
④、異常驗(yàn)證:
所謂異常驗(yàn)證,也就是我不按照你接口文檔上的要求輸入?yún)?shù),來(lái)驗(yàn)證接口對(duì)異常情況的校驗(yàn)。比如說(shuō)必填的參數(shù)不填,輸入整數(shù)類(lèi)型的,傳入字符串類(lèi)型,長(zhǎng)度是10的,傳11,總之就是你說(shuō)怎么來(lái),我就不怎么來(lái),其實(shí)也就這三種,必傳非必傳、參數(shù)類(lèi)型、入?yún)㈤L(zhǎng)度。
2)、根據(jù)業(yè)務(wù)邏輯來(lái)設(shè)計(jì)用例
根據(jù)業(yè)務(wù)邏輯來(lái)設(shè)計(jì)的話(huà),就是根據(jù)自己系統(tǒng)的業(yè)務(wù)來(lái)設(shè)計(jì)用例,這個(gè)每個(gè)公司的業(yè)務(wù)不一樣,就得具體的看自己公司的業(yè)務(wù)了,其實(shí)這也和功能測(cè)試設(shè)計(jì)用例是一樣的。
舉個(gè)例子,拿bbs來(lái)說(shuō),bbs的需求是這樣的:
1、登錄失敗5次,就需要等待15分鐘之后再登錄
2、新注冊(cè)的用戶(hù)需要過(guò)了實(shí)習(xí)期才能發(fā)帖
3、刪除帖子扣除積分
4、......
像這樣的你就要把這些測(cè)試點(diǎn)列出來(lái),然后再去造數(shù)據(jù)測(cè)試對(duì)應(yīng)的測(cè)試點(diǎn)。
接口測(cè)試的工具很多,比如 postman、RESTClient、jmeter、loadrunner、SoapUI等,首推的測(cè)試工具是postman和jmeter(測(cè)試框架的話(huà),可以選擇Robot Framework Pytest等),接下來(lái)就簡(jiǎn)單介紹下如何使用這兩款工具進(jìn)行接口測(cè)試,其他工具本次暫不介紹。
1)Postman是谷歌的一款接口測(cè)試插件,它使用簡(jiǎn)單,支持用例管理,支持get、post、文件上傳、響應(yīng)驗(yàn)證、變量管理、環(huán)境參數(shù)管理等功能,可以批量運(yùn)行,并支持用例導(dǎo)出、導(dǎo)入。
2)jmeter是一款100%純Java編寫(xiě)的免費(fèi)開(kāi)源的工具,它主要用來(lái)做性能測(cè)試,相比loadrunner來(lái)說(shuō),它內(nèi)存占用小,免費(fèi)開(kāi)源,輕巧方便、無(wú)需安裝,越來(lái)越被大眾所喜愛(ài)。
今天的分享就到這里了,喜歡的可以點(diǎn)贊收藏,加關(guān)注喲,關(guān)注我不迷路。
天碰到要在一個(gè)頁(yè)面獲取另外一個(gè)頁(yè)面url傳過(guò)來(lái)的參數(shù),一開(kāi)始很本能的想到了用 split(“?”)這樣一步步的分解出需要的參數(shù)。
喜歡的朋友可以測(cè)試下,希望對(duì)大家有所幫助!
js方法一:正則分析法,指定參數(shù)名獲取值。
function getQueryString(name){
var reg =new RegExp('(^|&)'+name+'=([^&]*)(&|$)','i');
var r = window.location.search.substr(1).match(reg);
if(r !=null){
return unescape(r[2]);
}
return null;
}
// 這樣調(diào)用:
// http://orzhtml.github.io?a=1&b=2&c=3
console.log(getQueryString("a"));
console.log(getQueryString("b"));
console.log(getQueryString("c"));
結(jié)果截圖:
下面舉一個(gè)例子:
若地址欄URL為:abc.html?id=123&url=http://orzhtml.github.io
那么,但你用上面的方法去調(diào)用:alert(getQueryString("url"));
則會(huì)彈出一個(gè)對(duì)話(huà)框:內(nèi)容就是 http://orzhtml.github.io
如果用:alert(getQueryString("id"));那么彈出的內(nèi)容就是 123 啦;
當(dāng)然如果你沒(méi)有傳參數(shù)的話(huà),比如你的地址是 abc.html 后面沒(méi)有參數(shù),那強(qiáng)行輸出調(diào)用結(jié)果有的時(shí)候會(huì)報(bào)錯(cuò):
所以我們要加一個(gè)判斷 ,判斷我們請(qǐng)求的參數(shù)是否為空,首先把值賦給一個(gè)變量:
var myurl= getQueryString("url");
if(myurl != null && myurl.toString().length>1) {
alert(myurl);
}
js方法二:獲取所有參數(shù)這樣就不會(huì)報(bào)錯(cuò)了,結(jié)果返回始終會(huì)是一個(gè)對(duì)象!
function GetRequest(){
var url = location.search;//獲取url中"?"符后的字串
var theRequest ={};
if(url.indexOf("?")!=-1){
var str = url.substr(1);
strs = str.split("&");
for(var i =0; i < strs.length; i ++){
theRequest[strs[i].split("=")[0]]= unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
// 這樣調(diào)用
// http://orzhtml.github.io?a=4&b=5&c=6
var Request = {};
Request = GetRequest();
console.log(Request);
console.log(Request['a']);
console.log(Request['b']);
console.log(Request['c']);
結(jié)果截圖:
本文內(nèi)容均屬個(gè)人原創(chuàng)作品,轉(zhuǎn)載此文章須附上出處及原文鏈接。
加關(guān)注,定時(shí)推送,互動(dòng)精彩多,若你有更好的見(jiàn)解,歡迎留言探討!
說(shuō)到函數(shù)我們首先會(huì)想到數(shù)學(xué)中的函數(shù)公式,但是在編程中函數(shù)的概念和你想象中的可能有所不同。所謂函數(shù)就是一段可以被其它程序引用的代碼或程序,可以叫它子程序。函數(shù)的作用就是將一個(gè)大的系統(tǒng)程序按功能分成一個(gè)個(gè)小的子程序模塊,這樣便于把復(fù)雜問(wèn)題簡(jiǎn)單化、模塊化。
ECMAScript 中使用 function 關(guān)鍵字來(lái)聲明函數(shù),一個(gè)函數(shù)由函數(shù)名稱(chēng)、函數(shù)參數(shù)、函數(shù)體組成,其語(yǔ)法如下:
function 函數(shù)名稱(chēng)(參數(shù)1,參數(shù)2...) {
// 函數(shù)體
}
在函數(shù)體中就是具體實(shí)現(xiàn)功能的代碼。函數(shù)名和參數(shù)的命名和普通變量命名一樣遵循ECMAScript規(guī)范。
如下示例:
function sayHi(name,message){
alert("hello "+name+ ", " + message);
}
我們可以通過(guò)函數(shù)名來(lái)調(diào)用函數(shù),如下示例:
sayHi('Nicholas','how are you doing?');
執(zhí)行上面的函數(shù),將彈出"Nicholas,how are you doing?"彈框。
函數(shù)可以作為參數(shù)傳遞,或者作為一個(gè)對(duì)象的屬性值。參數(shù)和屬性值和普通變量一樣,通過(guò)參數(shù)名稱(chēng)或?qū)傩悦涂梢哉{(diào)用函數(shù)。
如下示例:
// 作為參數(shù)
function b(){
alert("b");
}
function a(fun){
fun();
}
a(b); // 輸出b
// 方法
const obj = {
name: "張三",
getFirstName(){
alert(this.name.slice(0,1));
}
}
obj.getFirstName(); // 輸出張
在函數(shù)體中使用return 語(yǔ)句可以返回一個(gè)值,這樣就會(huì)在調(diào)用函數(shù)后得到一個(gè)計(jì)算結(jié)果,如下示例:
// 聲明一個(gè)求和的函數(shù)
function sum(a,b){
const result = a + b;
return result;
}
// 調(diào)用函數(shù)
cont ret = sum(1,3);
alert(ret); // 4
cont ret1 = sum(5,10);
alert(ret1); // 15
注意,在return 語(yǔ)句后面的語(yǔ)句不會(huì)被執(zhí)行(return 指退出函數(shù)并返回值),如下示例:
function diff(a,b){
return a - b;
alert("hello world!");
}
diff(35,10);
// 結(jié)果25,但并沒(méi)有彈出“hello world!”
在函數(shù)體內(nèi)可以有多個(gè)return 語(yǔ)句,往往和條件語(yǔ)句一起使用,如下示例:
function diff(a,b){
if(a < b){
return a -b;
}else{
return b-a;
}
}
return 語(yǔ)句可以返回一個(gè)函數(shù),如下示例:
function hello(a){
return function (){
return a + 100;
}
}
const ret = hello(50); // ret 結(jié)果是一個(gè)函數(shù)
alert(ret()); // 繼續(xù)執(zhí)行,結(jié)果是 150
JavaScript 函數(shù)中的參數(shù)比較特殊,在調(diào)用函數(shù)時(shí)你不必嚴(yán)格按照函數(shù)聲明時(shí)的參數(shù)進(jìn)行傳參,比如不傳、或多傳一個(gè)參數(shù)、少傳一個(gè)都不會(huì)引起錯(cuò)誤。這是因?yàn)镴avaScript參數(shù)是一個(gè)類(lèi)數(shù)組的結(jié)構(gòu)(它并不是 Array 類(lèi)的實(shí)例),可以使用argumetns 關(guān)鍵字獲取所有參數(shù)。
如下示例:
function sayHii(){
alert("hello " + argumetns[0] +","+ argumetns[1]);
}
sayHii("Nidlosd","how are you?");
和上面使用具名參數(shù)的結(jié)果是一樣的,argumetns[0] 是第一個(gè)參數(shù),argumetns[1] 是第二個(gè),依次類(lèi)推。
函數(shù)參數(shù)和變量一樣,可以使用任何類(lèi)型的,比如數(shù)字、字符串、布爾甚至是一個(gè)函數(shù)。如下示例:
// 函數(shù)1
function sum(a,fun){
return a + fun(a);
}
// 函數(shù)2
function diff(b){
return 100 - b;
}
// 調(diào)用sum 函數(shù)
cont ret = sum(50, diff); // 結(jié)果是100
alert(ret);
重載是計(jì)算機(jī)面向?qū)ο缶幊趟枷胫械囊粋€(gè)重要概念,它是指我們可以定義一些名稱(chēng)相同的方法,通過(guò)定義不同的輸入?yún)?shù)來(lái)區(qū)分這些方法,然后再調(diào)用時(shí),就會(huì)根據(jù)不同的參數(shù)樣式,來(lái)選擇合適的方法執(zhí)行。
在JavaScript 函數(shù)卻沒(méi)有重載,當(dāng)你定義同名的函數(shù),后面的函數(shù)會(huì)覆蓋前面的函數(shù)。如下示例:
function sum(a){
alert(a + 100);
}
function sum(a){
alert(a + 200);
}
sum(100); // 輸出 300
當(dāng)調(diào)用sum(100) 結(jié)果返回300而不是200。
雖然如此,但是我們可以根據(jù)傳入的參數(shù)類(lèi)型和數(shù)量作出不同的反應(yīng),來(lái)模擬重載的效果。
函數(shù)聲明
以上的定義函數(shù)的方式就是函數(shù)聲明方式,它們都是全局函數(shù),其父級(jí)對(duì)象是 windows對(duì)象。如下示例:
// 聲明函數(shù)
function fun(){}
// window.fun 等同于 fun,一般會(huì)省略window
函數(shù)表達(dá)式
和聲明一個(gè)變量一樣聲明函數(shù),如下語(yǔ)法:
const funName = function (params) {
// function content
}
其實(shí)2種方式的結(jié)果是一樣的,區(qū)別主要在于如下:
函數(shù)聲明方式會(huì)被引擎進(jìn)行函數(shù)提升,函數(shù)的調(diào)用在函數(shù)聲明前或后都可以,但函數(shù)表達(dá)式不行,函數(shù)的調(diào)用必須在其聲明之后調(diào)用,否則會(huì)出錯(cuò)。
如下示例1:
a(); // 在函數(shù)聲明前先調(diào)用
function a(){}
示例2:
a(); // 在函數(shù)聲明前先調(diào)用
const a = function(){}
示例1不會(huì)出現(xiàn)任何錯(cuò)誤,但是示例2,在執(zhí)行代碼時(shí),你會(huì)在控制臺(tái)中看到如下錯(cuò)誤:
Uncaught ReferenceError: Cannot access 'a' before initialization
函數(shù)提升,是指引擎會(huì)提前將function 聲明的函數(shù)提升到代碼頂部,不管函數(shù)實(shí)際在代碼中的位置,只要是使用 function 函數(shù)聲明的方式就會(huì)這樣。
函數(shù)其實(shí)也是一種對(duì)象,它也有屬性和方法,函數(shù)常見(jiàn)屬性有l(wèi)ength 和 prototype。
示例:
function say(name){
alert(name);
}
alert(say.length); // 輸出1
function sum(a,b,c){
alert(a+b+c);
}
alert(sum.length); // 輸出3
常見(jiàn)方法有apply()、call()和bind()。
函數(shù)中的這幾方法都是用來(lái)在特定的作用域或上下文中調(diào)用函數(shù),具體講就是控制函數(shù)中的this 對(duì)象指向誰(shuí),如下示例:
window.color = "red";
const obj = {color: "blue"};
function sayColor(){
alert(this.color);
}
sayColor(); // red
sayColor.call(this); // red
sayColor.call(window); //red
sayColor.call(obj); //blue
sayColor.apply(obj); //blue
sayColor.bind(obj); // blue
此時(shí)通過(guò)上面例子可以看出,函數(shù)默認(rèn)情況下this 指window對(duì)象,當(dāng)使用call 、apply、bind方法改變其this對(duì)象時(shí),函數(shù)的上下文環(huán)境也被改變了,其結(jié)果返回 blue,而不是red。
關(guān)于 call 和 apply 的區(qū)別主要在于傳參數(shù)的方式不同,call 參數(shù)是必需依次列舉出來(lái),apply參數(shù)是一個(gè)數(shù)組,如下示例:
function sum(a,b){
alert(a+b);
}
sum.apply(this,[10,20]); // 參數(shù)是一個(gè)數(shù)組
sum.call(this,10,20); // 參數(shù)需要依次列舉出來(lái)
在es6 最新規(guī)范有一種特殊的函數(shù),稱(chēng)為箭頭函數(shù),它和普通函數(shù)基本上一樣,唯一區(qū)別就是其this 對(duì)象指向不一樣。
語(yǔ)法如下:
const 函數(shù)名 = (參數(shù)..) => {函數(shù)體}
箭頭函數(shù)的聲明和函數(shù)表達(dá)式一樣,不同之處它沒(méi)有使用function關(guān)鍵字,而是使用的 =>。
普通函數(shù)的this指向的是調(diào)用它的對(duì)象或事件源對(duì)象,箭頭函數(shù)它總是指向其最近的外層函數(shù)作用域的 this 所指對(duì)象。
如下示例:
const obj = {
sum: function(){
setTimeOut(function(){
console.log(this)
});
},
diff:function(){
setTimeOut(()=>{
console.log(this)
});
}
}
obj.sum() // Window {window: Window, self: Window,…}
obj.diff() // {sum: ?, diff: ?}
上面中function構(gòu)造的函數(shù)(sum)中的this指向了調(diào)用它的window對(duì)象,而箭頭函數(shù)(diff)中的this指向了最近的外層函數(shù)作用域中的this指向的對(duì)象obj。
箭頭函數(shù)往往是作為參數(shù)來(lái)使用的,單獨(dú)使用的情況很少。
函數(shù)作為程序中重要的一部分,它的語(yǔ)法、屬性、方法等知識(shí)點(diǎn)必須要完全了解,尤其是關(guān)于普通函數(shù)、函數(shù)表達(dá)式、箭頭函數(shù)等概念的區(qū)別。還有就是關(guān)于this對(duì)象的理解,本篇作為入門(mén)知識(shí)沒(méi)有詳細(xì)介紹這里,所以請(qǐng)自行查閱資料深入學(xué)習(xí)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。