js:函數(shù):返回值啄清、this。

概念:函數(shù)是一塊js代碼塊俺孙,被定義一次但可以執(zhí)行和調(diào)用多次辣卒,js中的函數(shù)也是對(duì)象可以像其他對(duì)象那樣操作和執(zhí)行,js函數(shù)也被稱(chēng)為函數(shù)對(duì)象睛榄。

一荣茫、調(diào)用方式和返回值:(foo)

調(diào)用方式:直接調(diào)用foo()、對(duì)象的方法o.method()场靴、構(gòu)造器new Foo()啡莉、call/apply/bind。

1旨剥、一般的調(diào)用函數(shù)的返回值依賴(lài)于return 語(yǔ)句咧欣,若沒(méi)有return語(yǔ)句 將在代碼執(zhí)行完后返回undefined;

2泞边、函數(shù)作為構(gòu)造函數(shù)(使用new調(diào)用)该押,如果沒(méi)有return語(yǔ)句疗杉,或者return后是基本數(shù)據(jù)類(lèi)型阵谚,會(huì)將this作為返回值蚕礼;反之如果return了對(duì)象,則以此對(duì)象為返回值梢什。



二奠蹬、關(guān)于this:

this是js中的一個(gè)關(guān)鍵字:它代表函數(shù)運(yùn)行時(shí),自動(dòng)生成的一個(gè)內(nèi)部對(duì)象嗡午。在不同是使用場(chǎng)景下囤躁,this的值會(huì)發(fā)生變化。但是有一個(gè)總的原則荔睹,那就是this指的是狸演,調(diào)用函數(shù)的那個(gè)對(duì)象

1、this如何被創(chuàng)建僻他、以及如何指向

如何被創(chuàng)建:在每一次function被執(zhí)行的時(shí)候都會(huì)創(chuàng)建一個(gè)內(nèi)部對(duì)象宵距,其中的信息包括: 傳入了哪些參數(shù), 函數(shù)是如何調(diào)用(invoked)的, 函數(shù)是在哪里被調(diào)用(called)的,等等。該對(duì)象中還有一個(gè)重要的屬性是?this?引用, 函數(shù)是哪個(gè)對(duì)象的方法吨拗,this?就會(huì)自動(dòng)綁定到該對(duì)象满哪。

指向誰(shuí):在function中this的指向和上下文有關(guān)(context,?函數(shù)在調(diào)用時(shí)刻所處的環(huán)境)劝篷,this?的作用域(scope) 與函數(shù)定義的位置沒(méi)有關(guān)系, 而是取決于函數(shù)在哪里被調(diào)用哨鸭。

測(cè)試如下:


上面的代碼里,第一次函數(shù)調(diào)用對(duì)應(yīng)的是?myCar?對(duì)象, 而第二次對(duì)應(yīng)的是?window?【 此時(shí)?getBrand()?等價(jià)于?window.getBrand()?】娇妓。因此,不同的上下文產(chǎn)生的是不同的結(jié)果像鸡。

每一行JavaScript代碼都是在執(zhí)行上下文(execution context)中運(yùn)行的。this?指向的對(duì)象在每次進(jìn)入新的執(zhí)行上下文后是固定的, 直到跳轉(zhuǎn)(shifted)到另一個(gè)不同的上下文才發(fā)生改變哈恰。決定執(zhí)行上下文(以及?this?的綁定)需要我們?nèi)フ页稣{(diào)用點(diǎn)(call-site), 調(diào)用點(diǎn)即函數(shù)在代碼中調(diào)用的位置坟桅。

2、不同情景下的this指向:

a蕊蝗、全局模式下和一般函數(shù)調(diào)用:

全局模式下的this指向window: this === window仅乓;

一般函數(shù)調(diào)用:

function simpleCall(){

? console.log(this);

}

simpleCall();

// output: the Window object? ??

在這種情況下,this值沒(méi)有被 call 設(shè)置。因?yàn)榇a不是運(yùn)行在嚴(yán)格模式下,?this?又必須是一個(gè)對(duì)象, 所以他的值默認(rèn)為全局對(duì)象蓬戚。

如果是在嚴(yán)格模式(strict mode)下, 進(jìn)入執(zhí)行上下文時(shí)設(shè)置為什么值那就是什么值夸楣。如果沒(méi)有指定, 那么就一直是undefined

function simpleCall(){

? "use strict";

? console.log(this);

}

simpleCall();

// output: undefined

b、作為對(duì)象方法被調(diào)用時(shí):

將函數(shù)保存為對(duì)象的屬性, 這樣就轉(zhuǎn)化為一個(gè)方法, 可以通過(guò)對(duì)象調(diào)用這個(gè)方法子漩。當(dāng)函數(shù)被當(dāng)成對(duì)象的方法來(lái)調(diào)用時(shí), 里面的?this?值就被設(shè)置為調(diào)用方法的對(duì)象豫喧。


備注:第二段代碼 中cc雖然是在全局下定義,但被myoption.ff()調(diào)用執(zhí)行時(shí)是作為對(duì)象myoption的方法被調(diào)用的幢泼,所以此時(shí)this的值是指向的myoption紧显。

c、構(gòu)造函數(shù)中的this

當(dāng)函數(shù)被new關(guān)鍵字 來(lái)調(diào)用時(shí)涉兽,該函數(shù)將不在是一個(gè)普通函數(shù)而成為了一個(gè)函數(shù)構(gòu)造器(也就是一個(gè)對(duì)象工廠)虱饿,與普通函數(shù)和對(duì)象方法不同的是拥诡,構(gòu)造器調(diào)用會(huì)傳入一個(gè)全新的對(duì)象來(lái)作為this的值, 并且隱式地返回新構(gòu)造的這個(gè)對(duì)象作為結(jié)果(簡(jiǎn)言之, 新構(gòu)造對(duì)象的內(nèi)存是 new 操作符分配的, 構(gòu)造函數(shù)只是做了一些初始化工作)氮发。

當(dāng)一個(gè)函數(shù)作為構(gòu)造器使用時(shí)(通過(guò)?new?關(guān)鍵字), 它的?this?值綁定到新創(chuàng)建的那個(gè)對(duì)象渴肉。如果沒(méi)使用?new?關(guān)鍵字, 那么他就只是一個(gè)普通的函數(shù),?this?將指向?window?對(duì)象。

function Message(content){

? this.content = content;

? this.showContent = function(){

? ? console.log(this.content);

? };

}

var message = new Message("I'm JavaScript!");

message.showContent();

// output: I'm JavaScript!

在上面的示例中, 有一個(gè)名為?Message()?的構(gòu)造函數(shù)爽冕。通過(guò)使用?new?操作符創(chuàng)建了一個(gè)全新的對(duì)象,名為?message。同時(shí)還通傳給構(gòu)造函數(shù)一個(gè)字符串, 作為新對(duì)象的content屬性迁霎。通過(guò)最后一行代碼中可以看到這個(gè)字符串成功地打印出來(lái)了, 因?yàn)?this?指向的是新創(chuàng)建的對(duì)象, 而不是構(gòu)造函數(shù)本身考廉。

d、原型鏈上的this


備注:代碼中test是由Obejct.create方法創(chuàng)建出來(lái)的空對(duì)象捷雕,其原型指向myoption征绸。當(dāng)test.f()調(diào)用的時(shí)候是調(diào)用的原型上的方法 原型鏈上的this依然是可以訪問(wèn)到當(dāng)前對(duì)象的渤弛。

e、call和apply:

在JavaScript中,所有的函數(shù)都是對(duì)象, 因此函數(shù)也可以有自己的方法。所有的函數(shù)都有的兩個(gè)方法敷钾, 是?apply()?和?call(). 侨赡。我們可以通過(guò)這兩個(gè)方法來(lái)改變函數(shù)的上下文, 在任何時(shí)候都有效, 用來(lái)顯式地設(shè)置?this?的值眨攘。

apply()?方法接收兩個(gè)參數(shù): 第一個(gè)是要設(shè)置為?this?的那個(gè)對(duì)象, 第二個(gè)參數(shù)是可選的共螺,如果要傳入?yún)?shù), 則封裝為數(shù)組作為?apply()?的第二個(gè)參數(shù)即可该肴。

call()?方法 和?apply()?基本上是一樣的, 除了后面的參數(shù)不是數(shù)組, 而是分散開(kāi)一個(gè)一個(gè)地附加在后面藐不。

測(cè)試如下:

f:bind方法:

bind方法有es5提供匀哄,bind()方法會(huì)創(chuàng)建一個(gè)新函數(shù),稱(chēng)為綁定函數(shù)雏蛮,當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí)涎嚼,綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入?bind()方法的第一個(gè)參數(shù)作為?this,傳入?bind()?方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來(lái)調(diào)用原函數(shù)挑秉。

測(cè)試如下:

備注:g為f通過(guò)bind方法新創(chuàng)建的函數(shù)法梯,調(diào)用g方法是 this是指向{a:"g"}這個(gè)對(duì)象的,故o.ff為“aa”犀概,o.gg()確實(shí)return的gg
備注:帶參數(shù)的情況
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末立哑,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子姻灶,更是在濱河造成了極大的恐慌刁憋,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,427評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件木蹬,死亡現(xiàn)場(chǎng)離奇詭異至耻,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)镊叁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)尘颓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人晦譬,你說(shuō)我怎么就攤上這事疤苹。” “怎么了敛腌?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,747評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵卧土,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我像樊,道長(zhǎng)尤莺,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,939評(píng)論 1 295
  • 正文 為了忘掉前任生棍,我火速辦了婚禮颤霎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己友酱,他們只是感情好晴音,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著缔杉,像睡著了一般锤躁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上或详,一...
    開(kāi)封第一講書(shū)人閱讀 51,737評(píng)論 1 305
  • 那天系羞,我揣著相機(jī)與錄音,去河邊找鬼鸭叙。 笑死觉啊,一個(gè)胖子當(dāng)著我的面吹牛拣宏,可吹牛的內(nèi)容都是我干的沈贝。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼勋乾,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼宋下!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起辑莫,我...
    開(kāi)封第一講書(shū)人閱讀 39,352評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤学歧,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后各吨,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體枝笨,經(jīng)...
    沈念sama閱讀 45,834評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評(píng)論 3 338
  • 正文 我和宋清朗相戀三年揭蜒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了横浑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡屉更,死狀恐怖徙融,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瑰谜,我是刑警寧澤欺冀,帶...
    沈念sama閱讀 35,815評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站萨脑,受9級(jí)特大地震影響隐轩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜渤早,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評(píng)論 3 331
  • 文/蒙蒙 一龙助、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦提鸟、人聲如沸军援。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,022評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)胸哥。三九已至,卻和暖如春赡鲜,著一層夾襖步出監(jiān)牢的瞬間空厌,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,147評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工银酬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嘲更,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,398評(píng)論 3 373
  • 正文 我出身青樓揩瞪,卻偏偏與公主長(zhǎng)得像赋朦,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子李破,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 函數(shù)和對(duì)象 1宠哄、函數(shù) 1.1 函數(shù)概述 函數(shù)對(duì)于任何一門(mén)語(yǔ)言來(lái)說(shuō)都是核心的概念。通過(guò)函數(shù)可以封裝任意多條語(yǔ)句嗤攻,而且...
    道無(wú)虛閱讀 4,566評(píng)論 0 5
  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,237評(píng)論 0 4
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持妇菱,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券承粤,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 6,926評(píng)論 15 54
  • 第3章 基本概念 3.1 語(yǔ)法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類(lèi)型 5種簡(jiǎn)單數(shù)據(jù)類(lèi)型:Unde...
    RickCole閱讀 5,128評(píng)論 0 21
  • 隨筆#“武林高手”知天命# 今天是恬妞五十歲生日闯团,非常愉快辛臊! 五十歲,民間俗稱(chēng)“武林高手”偷俭,企業(yè)女職工臨近退休的年...
    書(shū)香是佳閱讀 381評(píng)論 0 0