javascript function(函數(shù)類型)使用與注意事項(xiàng)小結(jié)

本文實(shí)例講述了javascript function(函數(shù)類型)使用與注意事項(xiàng)。分享給大家供大家參考，具體如下：

在ECMAScript中，F(xiàn)unction(函數(shù))類型實(shí)際上是對(duì)象。每個(gè)函數(shù)都是Function類型的實(shí)例，而且都與其他引用類型一樣具有屬性和方法。由于函數(shù)是對(duì)象，因此函數(shù)名實(shí)際上也是一個(gè)指向函數(shù)對(duì)象的指針。

學(xué)習(xí)要點(diǎn)：

1.函數(shù)的聲明方式
2.作為值的函數(shù)
3.函數(shù)的內(nèi)部屬性
4.函數(shù)屬性和方法

一．函數(shù)的聲明方式

1.普通的函數(shù)聲明

function box(num1, num2) {
  return num1+ num2;
}

2.使用變量初始化函數(shù)

var box= function(num1, num2) {
  return num1 + num2;
};

3.使用Function構(gòu)造函數(shù)

var box= new Function('num1', 'num2' ,'return num1 + num2');

PS：第三種方式我們不推薦，因?yàn)檫@種語(yǔ)法會(huì)導(dǎo)致解析兩次代碼（第一次解析常規(guī)ECMAScript代碼，第二次是解析傳入構(gòu)造函數(shù)中的字符串），從而影響性能。但我們可以通過這種語(yǔ)法來理解"函數(shù)是對(duì)象，函數(shù)名是指針"的概念。

二．作為值的函數(shù)

ECMAScript中的函數(shù)名本身就是變量，所以函數(shù)也可以作為值來使用。也就是說，不僅可以像傳遞參數(shù)一樣把一個(gè)函數(shù)傳遞給另一個(gè)函數(shù)，而且可以將一個(gè)函數(shù)作為另一個(gè)函數(shù)的結(jié)果返回。

function box(sumFunction, num) {
  return sumFunction(num); //someFunction
}
function sum(num) {
  return num + 10;
}
var result = box(sum, 10); //傳遞函數(shù)到另一個(gè)函數(shù)里

三．函數(shù)內(nèi)部屬性

在函數(shù)內(nèi)部，有兩個(gè)特殊的對(duì)象：arguments和this。arguments是一個(gè)類數(shù)組對(duì)象，包含著傳入函數(shù)中的所有參數(shù)，主要用途是保存函數(shù)參數(shù)。但這個(gè)對(duì)象還有一個(gè)名叫callee的屬性，該屬性是一個(gè)指針，指向擁有這個(gè)arguments對(duì)象的函數(shù)。

function box(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * box(num-1); //一個(gè)簡(jiǎn)單的的遞歸
  }
}

對(duì)于階乘函數(shù)一般要用到遞歸算法，所以函數(shù)內(nèi)部一定會(huì)調(diào)用自身；如果函數(shù)名不改變是沒有問題的，但一旦改變函數(shù)名，內(nèi)部的自身調(diào)用需要逐一修改。為了解決這個(gè)問題，我們可以使用arguments.callee來代替。

function box(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * arguments.callee(num-1);//使用callee來執(zhí)行自身
  }
}

函數(shù)內(nèi)部另一個(gè)特殊對(duì)象是this，其行為與Java和C#中的this大致相似。換句話說，this引用的是函數(shù)據(jù)以執(zhí)行操作的對(duì)象，或者說函數(shù)調(diào)用語(yǔ)句所處的那個(gè)作用域。PS：當(dāng)在全局作用域中調(diào)用函數(shù)時(shí)，this對(duì)象引用的就是window。

//便于理解的改寫例子
window.color = '紅色的'; //全局的，或者var color = '紅色的';也行
alert(this.color); //打印全局的color
var box = {
  color : '藍(lán)色的', //局部的color
  sayColor : function () {
    alert(this.color); //此時(shí)的this只能box里的color
  }
};
box.sayColor(); //打印局部的color
alert(this.color); //還是全局的

//引用教材的原版例子
window.color = '紅色的'; //或者var color = '紅色的';也行

var box = {
  color : '藍(lán)色的'
};
function sayColor() {
  alert(this.color); //這里第一次在外面，第二次在box里面
}
getColor();
box.sayColor = sayColor; //把函數(shù)復(fù)制到box對(duì)象里，成為了方法
box.sayColor();

四．函數(shù)屬性和方法

ECMAScript中的函數(shù)是對(duì)象，因此函數(shù)也有屬性和方法。每個(gè)函數(shù)都包含兩個(gè)屬性：length和prototype。其中，length屬性表示函數(shù)希望接收的命名參數(shù)的個(gè)數(shù)。

function box(name, age) {
  alert(name + age);
}
alert(box.length); //2

PS：對(duì)于prototype屬性，它是保存所有實(shí)例方法的真正所在，也就是原型。這個(gè)屬性，我們將在面向?qū)ο笠徽略敿?xì)介紹。而prototype下有兩個(gè)方法：apply()和call()，每個(gè)函數(shù)都包含這兩個(gè)非繼承而來的方法。這兩個(gè)方法的用途都在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值。

function box(num1, num2) {
  return num1 + num2; //原函數(shù)
}
function sayBox(num1, num2) {
  return box.apply(this, [num1, num2]); //this表示作用域，這里是window
} //[]表示box所需要的參數(shù)
function sayBox2(num1, num2) {
  return box.apply(this, arguments); //arguments對(duì)象表示box所需要的參數(shù)
}

alert(sayBox(10,10)); //20
alert(sayBox2(10,10)); //20

call()方法于apply()方法相同，他們的區(qū)別僅僅在于接收參數(shù)的方式不同。對(duì)于call()方法而言，第一個(gè)參數(shù)是作用域，沒有變化，變化只是其余的參數(shù)都是直接傳遞給函數(shù)的。

function box(num1, num2) {
  return num1 + num2;
}
function callBox(num1, num2) {
  return box.call(this, num1, num2); //和apply區(qū)別在于后面的傳參
}
alert(callBox(10,10));

事實(shí)上，傳遞參數(shù)并不是apply()和call()方法真正的用武之地；它們經(jīng)常使用的地方是能夠擴(kuò)展函數(shù)賴以運(yùn)行的作用域。

var color = '紅色的'; //或者window.color = '紅色的';也行
var box = {
  color : '藍(lán)色的'
};
function sayColor() {
  alert(this.color);
}
sayColor(); //作用域在window
sayColor.call(this); //作用域在window
sayColor.call(window); //作用域在window
sayColor.call(box); //作用域在box，對(duì)象冒充

這個(gè)例子是之前作用域理解的例子修改而成，我們可以發(fā)現(xiàn)當(dāng)我們使用call(box)方法的時(shí)候，sayColor()方法的運(yùn)行環(huán)境已經(jīng)變成了box對(duì)象里了。

使用call()或者apply()來擴(kuò)充作用域的最大好處，就是對(duì)象不需要與方法發(fā)生任何耦合關(guān)系(耦合，就是互相關(guān)聯(lián)的意思，擴(kuò)展和維護(hù)會(huì)發(fā)生連鎖反應(yīng))。也就是說，box對(duì)象和sayColor()方法之間不會(huì)有多余的關(guān)聯(lián)操作，比如 box.sayColor = sayColor;

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。