JavaScript函數(shù)（二）

用戶84 發(fā)布于2019-08-21 11:20 / 2819人閱讀

摘要：目錄函數(shù)的聲明函數(shù)的屬性和方法函數(shù)的作用域閉包知識(shí)點(diǎn)小結(jié)關(guān)于函數(shù)，可以從以下個(gè)方面去理解首先，數(shù)據(jù)類型上看函數(shù)在中是一種數(shù)據(jù)類型，是對(duì)象的一種其次，從功能上看函數(shù)本質(zhì)上是一段反復(fù)調(diào)用的代碼塊最后，從地位上看函數(shù)在中和其他基本數(shù)據(jù)類型一樣，可

目錄 1.函數(shù)的聲明 2.函數(shù)的屬性和方法 3.函數(shù)的作用域 4.閉包知識(shí)點(diǎn) 5.小結(jié)

關(guān)于函數(shù)，可以從以下3個(gè)方面去理解：
首先，數(shù)據(jù)類型上看：函數(shù)在JavaScript中是一種數(shù)據(jù)類型，是對(duì)象的一種；
其次，從功能上看：函數(shù)本質(zhì)上是一段反復(fù)調(diào)用的代碼塊；
最后，從地位上看：函數(shù)在JavaScript中和其他基本數(shù)據(jù)類型一樣，可以作為參數(shù)和賦值，是“第一等公民”

1.函數(shù)的聲明

聲明函數(shù)的方式有三種：

1.聲明式
function fn(){
  console.log(1)
}
fn()//1

2.表達(dá)式
var fn = function(args){
    console.log(args)
}
fn(a)//a

3.構(gòu)造函數(shù)式
var fn =  new Function("arg1","arg2","return arg1+arg2")
fn(1,2)//3

函數(shù)本質(zhì)上是對(duì)象的一種，所以函數(shù)名保存的實(shí)際上是指向函數(shù)對(duì)象的指針，第3種構(gòu)造函數(shù)的方法對(duì)于理解“函數(shù)是對(duì)象，函數(shù)名是指針”的概念更加直觀，但是第3種方法解析效率較低而且書寫不簡潔，所以一般不用構(gòu)造函數(shù)方法去聲明函數(shù)；
當(dāng)聲明式和表達(dá)式同時(shí)聲明同一個(gè)函數(shù)時(shí)，表達(dá)式會(huì)覆蓋聲明式，原因是函數(shù)作為變量在js解析階段進(jìn)行變量提升，聲明式和表達(dá)式都會(huì)提升至當(dāng)前作用域頭部，然后表達(dá)式會(huì)重新為fn賦值，從而覆蓋聲明式定義的函數(shù)；

function fn(){
  console.log(1)
}
var fn = function(){
  console.log(2)
}
fn()//2

關(guān)于return語句的理解，如果聲明的函數(shù)沒有return語句，則默認(rèn)return undefined，否則返回定義的值；

var a  = function(){
    console.log(1)
}
var b = function(){
    return 2;
}
a() === undefined//true

2.函數(shù)的屬性和方法

函數(shù)作為一個(gè)對(duì)象，同樣擁有屬性和方法，下面主要?dú)w納一下比較常用和重要的屬性和方法：

name屬性：返回該函數(shù)名的字符串；

length屬性：返回形參的個(gè)數(shù)，即預(yù)期傳入?yún)?shù)的個(gè)數(shù)；

function fn (a,b){
    console.log(fn.name)
    console.log(fn.length)
}
fn()
//"fn"  
//2

arguments對(duì)象:是包含傳入函數(shù)實(shí)參的類數(shù)組對(duì)象，只有在函數(shù)執(zhí)行階段并且存在參數(shù)才會(huì)有值,未調(diào)用函數(shù)是為null；

function fn (a,b){
  console.log(arguments)
}
fn(1,2)
//[1,2]

arguments對(duì)象的length屬性代表實(shí)參的個(gè)數(shù)，注意和函數(shù)的length屬性的區(qū)別，函數(shù)的length代表形參的個(gè)數(shù)，arguments的length屬性代表實(shí)參個(gè)數(shù)；
arguments對(duì)象有一個(gè)callee屬性，返回arguments對(duì)象所在的函數(shù)指針；

可以利用callee實(shí)現(xiàn)函數(shù)的遞歸，例如累加或階乘操作：

function increment(arg){
  if(arg === 1){
    return 1
  }
  return arg+arguments.callee(arg-1)
}
function increMultipler(arg){
  if(arg === 1){
    return 1
  }
  return arg*arguments.callee(arg-1)
}

這里另外提一個(gè)函數(shù)的caller屬性，該屬性保存調(diào)用當(dāng)前函數(shù)的函數(shù)的引用，注意的是如果在全局作用域下讀取該屬性，值為null，因?yàn)轫攲訉?duì)象在瀏覽器中為window不是函數(shù)；

function outer(){
  inner();
}
function inner(){
  console.log(arguments.callee.caller)
}
outer();

this對(duì)象：代表函數(shù)執(zhí)行時(shí)的環(huán)境對(duì)象，簡單的說就是誰調(diào)用了該函數(shù)，this的指向是動(dòng)態(tài)的，只有在函數(shù)調(diào)用時(shí)this對(duì)象才能確定；

//在瀏覽器全局環(huán)境下，即window對(duì)象下
var print = function(){
      console.log(this)
 }
print()//this指向Window，因?yàn)檫@是Window對(duì)象調(diào)用了print方法
//在特定對(duì)象的環(huán)境下
var o = {
    print: function(){
      console.log(this)
  }
}
o.print()//this指向o，因?yàn)檫@是o對(duì)象調(diào)用print方法

函數(shù)提供call、apply和bind3種方法可以改變this對(duì)象；

1.call方法
function fn(){
    return this
}
var o = {}
fn() === this//true，this指向window對(duì)象
fn.call(o) === o//true，this指向o對(duì)象
//call方法還可以傳入?yún)?shù)；
function add(x,y){
  return x+y
}
add.call(null,1,2)

2.apply方法，與call不同的是apply傳入的參數(shù)為數(shù)組
var arr = [1,2]
function add(x,y){
  return x+y
}
add.apply(null,arr)

實(shí)際上，apply和call的區(qū)別只在于傳遞參數(shù)的不同，它們真正強(qiáng)大的地方在于能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域，比如slice函數(shù)原本只存在于數(shù)組當(dāng)中，當(dāng)中通過使用call方法，可以實(shí)現(xiàn)不同作用域下調(diào)用該方法；

function fn(a,b){
      console.log(Array.prototype.slice.call(arguments))
 }
fn(1,2)//[1,2]

bind方法會(huì)創(chuàng)建一個(gè)函數(shù)實(shí)例，并將該函數(shù)的this對(duì)象綁定到傳入該方法的參數(shù)；

function fn(){
    return this
}
var o = {}
var newFn =fn.bind(o) 
newFn() === o//true

更多this的相關(guān)介紹，詳見【what"s this???】 3.函數(shù)的作用域

作用域指的是變量存在的范圍，作用域可分為全局作用域和局部作用域，變量在全局范圍可訪問到；局部作用域由函數(shù)所構(gòu)造，變量只能在函數(shù)內(nèi)部可訪問到；

var a =1//a處于全局作用域

function fn(){
   var a = 2//a處于局部作用域，外部無法訪問；
  return a;
}
a//1
fn()//2

值的注意的是，函數(shù)執(zhí)行時(shí)所在的作用域是定義時(shí)所在的作用域，而不是調(diào)用時(shí)所在的作用域；

var a = 1;
function fn(){
  console.log(a)
}
function fn2(){
  var a = 2;
  fn()
}
fn2()//1

4. 閉包知識(shí)點(diǎn)

關(guān)于閉包的知識(shí)點(diǎn)，將會(huì)多帶帶開一章節(jié)詳談，具體請(qǐng)看《JavaScript閉包（三）》

5.小結(jié)

通過《JavaScript函數(shù)（二）》，我們大致了解關(guān)于函數(shù)的知識(shí)點(diǎn)如下：

函數(shù)本質(zhì)上是一段反復(fù)調(diào)用的代碼塊，是對(duì)象的一種，在js中作為“第一等公民”，可以賦值和傳參；

函數(shù)聲明的方法有3種：聲明式、表達(dá)式和構(gòu)造函數(shù)式；其中構(gòu)造函數(shù)是能夠直觀理解函數(shù)的“函數(shù)是對(duì)象，函數(shù)名是指針”的概念；當(dāng)表達(dá)式和聲明式同時(shí)聲明同名函數(shù)時(shí)，表達(dá)式會(huì)覆蓋聲明式，原因是變量提升的作用；

函數(shù)作為對(duì)象，同樣具有屬性和方法；name返回該函數(shù)名的字符串，length返回形參的個(gè)數(shù)；

arguments對(duì)象是包含傳入函數(shù)的實(shí)參的類數(shù)組對(duì)象，只有在執(zhí)行階段該對(duì)象才有值，未調(diào)用函數(shù)時(shí)為null，arguments.length表示實(shí)參的個(gè)數(shù)，arguments.callee返回arguments對(duì)象所在的函數(shù)的指針；

函數(shù)的caller返回調(diào)用當(dāng)前函數(shù)的函數(shù)的指針，在全局作用域下讀取該屬性為null；

this對(duì)象代表當(dāng)前函數(shù)執(zhí)行時(shí)的環(huán)境對(duì)象，this對(duì)象只有在函數(shù)執(zhí)行階段才能確定；

可以使用call、apply和bind改變this的指向；call和apply的區(qū)別在于二者傳遞的參數(shù)不同，call為零散的數(shù)據(jù)，apply為數(shù)組，二者最大的用處是擴(kuò)展函數(shù)的作用域；bind方法可以返回一個(gè)函數(shù)的實(shí)例，并綁定this對(duì)象至傳入bind的參數(shù)；

函數(shù)可以開辟一個(gè)獨(dú)立的作用域，這使得js當(dāng)中經(jīng)典的閉包得以實(shí)現(xiàn)提供可能性；此外，函數(shù)執(zhí)行時(shí)所在的作用域是在定義時(shí)所在的作用域，而不是調(diào)用時(shí)所在的作用域；

參考資料

《JavaScript高級(jí)程序設(shè)計(jì)（第3版）》

《JavaScript標(biāo)準(zhǔn)參考教程》——阮一峰

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86582.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

用戶84

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2741·2023-04-26 02:02
tensorflow-hub

閱讀 2621·2023-04-25 20:38
物聯(lián)網(wǎng)-thingsboard源碼編譯安裝踩坑記錄

閱讀 4162·2021-09-26 09:47
【IoT】產(chǎn)品設(shè)計(jì)：OEM、ODM、EMS 的區(qū)別是什么？

閱讀 3150·2021-09-10 10:50
測試管理之項(xiàng)目軟件測試風(fēng)險(xiǎn)管理實(shí)踐

閱讀 3813·2021-09-07 09:58
總結(jié)了17年初到18年初百場前端面試的面試經(jīng)驗(yàn)(含答案)

閱讀 3359·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：74# 視頻演示如何用純 CSS 創(chuàng)作一臺(tái) MacBook Pro

閱讀 2721·2019-08-30 15:54
學(xué)習(xí)CSS中的BFC

閱讀 1941·2019-08-29 17:03

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript函數(shù)（二）

相關(guān)文章

**使用javascript實(shí)現(xiàn)排序二叉樹（1）**

談?wù)?em>javascript語法里一些難點(diǎn)問題（二）

JavaScript 設(shè)計(jì)模式（二）：策略模式

**進(jìn)擊JavaScript之（二）詞法作用域與作用域鏈**

**細(xì)數(shù) JavaScript 實(shí)用黑科技(二)**

JavaScript學(xué)習(xí)總結(jié)（二）數(shù)組和對(duì)象部分

發(fā)表評(píng)論

0條評(píng)論

用戶84

男|高級(jí)講師

TA的文章

tensorflow

tensorflow-hub

物聯(lián)網(wǎng)-thingsboard源碼編譯安裝踩坑記錄

【IoT】產(chǎn)品設(shè)計(jì)：OEM、ODM、EMS 的區(qū)別是什么？

測試管理之項(xiàng)目軟件測試風(fēng)險(xiǎn)管理實(shí)踐

總結(jié)了17年初到18年初百場前端面試的面試經(jīng)驗(yàn)(含答案)

前端每日實(shí)戰(zhàn)：74# 視頻演示如何用純 CSS 創(chuàng)作一臺(tái) MacBook Pro

學(xué)習(xí)CSS中的BFC

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript函數(shù)（二）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！