整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線:

          軟件測(cè)試人員必須知道的接口測(cè)試基礎(chǔ)

          今天筆者要來(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)用。

          二、常見(jiàn)接口

          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è)試是測(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>

          六、為什么要做接口測(cè)試

          大家都知道,接口其實(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è)好了,后端不用變

          七、接口測(cè)試怎么測(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è)

          接口測(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)。

          總結(jié)

          今天的分享就到這里了,喜歡的可以點(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)解,歡迎留言探討!

          數(shù)概念

          說(shuō)到函數(shù)我們首先會(huì)想到數(shù)學(xué)中的函數(shù)公式,但是在編程中函數(shù)的概念和你想象中的可能有所不同。所謂函數(shù)就是一段可以被其它程序引用的代碼或程序,可以叫它子程序。函數(shù)的作用就是將一個(gè)大的系統(tǒng)程序按功能分成一個(gè)個(gè)小的子程序模塊,這樣便于把復(fù)雜問(wèn)題簡(jiǎn)單化、模塊化。

          JavaScript 函數(shù)

          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ù)或?qū)傩缘闹?/h1>

          函數(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ù)返回值

          在函數(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

          函數(shù)參數(shù)

          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);

          函數(shù)沒(méi)有重載

          重載是計(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ù)表達(dá)式

          函數(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ù)其實(shí)也是一種對(duì)象,它也有屬性和方法,函數(shù)常見(jiàn)屬性有l(wèi)ength 和 prototype。

          • length 屬性指每個(gè)函數(shù)接收的參數(shù)個(gè)數(shù)。
          • prototype 屬性指用來(lái)保存它們所有的實(shí)例方法的對(duì)象,比如toString()、valueOf()等方法都是prototype屬性下的方法,它是不可能枚舉的,關(guān)于其詳細(xì)內(nèi)容以后會(huì)在介紹,這里不多做介紹。

          示例:

          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)

          箭頭函數(shù)

          在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ú)使用的情況很少。

          結(jié)語(yǔ)

          函數(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í)。


          主站蜘蛛池模板: 无码人妻一区二区三区兔费| 亚洲AV午夜福利精品一区二区| 亚洲国产精品综合一区在线| 男女久久久国产一区二区三区| 免费播放一区二区三区| 亚洲高清一区二区三区| 国产精品一区二区三区高清在线 | 无码人妻久久一区二区三区| 国产无套精品一区二区 | 精品伦精品一区二区三区视频 | 国产女人乱人伦精品一区二区 | 精品一区二区三区电影| 日韩精品一区二区三区四区 | 人妻少妇精品视频三区二区一区| 国产av一区最新精品| 中文字幕无码一区二区免费 | 成人无码精品一区二区三区| 国产一区视频在线| 黄桃AV无码免费一区二区三区| 一区二区三区观看免费中文视频在线播放| 极品人妻少妇一区二区三区| 痴汉中文字幕视频一区| 国产成人高清亚洲一区91| 麻豆国产一区二区在线观看| 国产一区二区三区免费观看在线| 日本精品一区二区久久久| 免费在线观看一区| 视频一区二区中文字幕| 国产福利电影一区二区三区,亚洲国模精品一区 | 亚洲一区精彩视频| 91视频一区二区三区| 无码人妻精品一区二区三区9厂| 中文字幕一区视频| 亚洲性无码一区二区三区| 精品午夜福利无人区乱码一区| 人妖在线精品一区二区三区| 亚洲AV无码一区二区三区牛牛| 精品久久久中文字幕一区| 国产综合精品一区二区| 熟女少妇丰满一区二区| 中文字幕无线码一区2020青青|