?1.概述

Function是一個(gè)構(gòu)造函數(shù)，可以通過該構(gòu)造函數(shù)去創(chuàng)建一個(gè)函數(shù)，創(chuàng)建的函數(shù)是一個(gè)Function對(duì)象，實(shí)際上，不管使用什么方式創(chuàng)建的都是一個(gè)Function對(duì)象，本質(zhì)上函數(shù)名僅僅是一個(gè)變量名，它指向某個(gè)Function對(duì)象的引用。

驗(yàn)證代碼如下所示：

var f = function () {
  console.log('this is f function');
}
// 函數(shù)也是一個(gè)對(duì)象
console.log(f instanceof Object); // true
// 函數(shù)是Function類型的對(duì)象
console.log(f instanceof Function); // true

1.1利用Function構(gòu)造函數(shù)創(chuàng)建函數(shù)

Function****構(gòu)造函數(shù)創(chuàng)建一個(gè)新的Function對(duì)象。直接調(diào)用此構(gòu)造函數(shù)可用動(dòng)態(tài)創(chuàng)建函數(shù)。

語法結(jié)構(gòu)如下：

var functionName = new Function ([arg1[, arg2[, ...argN]],] functionBody)

其中functionName表示函數(shù)名稱，[arg1[, arg2[, ...argN]],]表示可選的參數(shù)列表，functionBody表示函數(shù)

示例代碼如下所示：

// 無參的函數(shù)
var fun = new Function('console.log("這是一個(gè)函數(shù)")')
fun() // 這是一個(gè)函數(shù)
// 帶一個(gè)參數(shù)的函數(shù)
var fun = new Function('a', 'console.log("這個(gè)函數(shù)帶一個(gè)參數(shù)：" + a)')
fun(100) // 這個(gè)函數(shù)帶一個(gè)參數(shù)：100
// 帶兩個(gè)參數(shù)的函數(shù)
var fun = new Function(
  'a, b',
  'console.log("這是帶兩個(gè)參數(shù)的函數(shù)，分別是" + a + "和" + b);',
)
fun(100, 200) // 這是帶兩個(gè)參數(shù)的函數(shù)，分別是100和200

在實(shí)際的開發(fā)中我們一般不使用這種方式創(chuàng)建函數(shù)，因?yàn)樗翢o可讀性。

1.2Function與Object

• Object類型和Function是JavaScript中的引用類型之一
• 構(gòu)造函數(shù)也是函數(shù)的一種
• 函數(shù)其實(shí)是一個(gè)Function類型的對(duì)象
• JavaScript中所有對(duì)象都是Object類型的

驗(yàn)證代碼如下：

console.log(Function instanceof Function) //true
console.log(Function instanceof Object) //true
console.log(Object instanceof Object) //true
console.log(Object instanceof Function) //true

2.構(gòu)造函數(shù)

2.1自定義否則函數(shù)

構(gòu)造函數(shù)又稱為構(gòu)造器或?qū)ο竽０?，是?duì)象中的一個(gè)方法，在實(shí)例化時(shí)構(gòu)造器被調(diào)用。在JavaScript中函數(shù)就可以作為構(gòu)造器使用，因此不需要特別定義一個(gè)構(gòu)造器方法。

創(chuàng)建構(gòu)造函數(shù)的語法結(jié)構(gòu)如下所示：

function Person(){
  this.屬性名 = 屬性值;
  this.方法名 = function() {
      方法體
}
var person = new Person();

這里的Person是作為構(gòu)造函數(shù)的名稱，將Person實(shí)例化需要使用new關(guān)鍵字，還有一點(diǎn)需要說的就是構(gòu)造函數(shù)一般首字母都是大寫的。

如下代碼展示了如何通過創(chuàng)建一個(gè)構(gòu)造函數(shù)以及如何通過構(gòu)造函數(shù)去實(shí)例化一個(gè)類：

// 自定義構(gòu)造函數(shù) -> 作用：創(chuàng)建對(duì)象
function Person(name, age, sex) {
  this.name = name
  this.age = age
  this.sex = sex
  this.print = function () {
    console.log(name + '今年' + age + '歲 性別' + sex)
  }
}
// 創(chuàng)建 一碗甜
var t = new Person('一碗甜', 18, '女')
hong.print() // 一碗甜今年18歲 性別女
// 創(chuàng)建 一碗周
var z = new Person('一碗周', 20, '男')
dong.print() //一碗粥今年20歲 性別男

2.2對(duì)象的constructor屬性

Object對(duì)象提供的constructor屬性，返回創(chuàng)建實(shí)例對(duì)象Object的構(gòu)造函數(shù)的引用。

所有對(duì)象都會(huì)從它的原型上繼承一個(gè)constructor屬性：

值得注意的是此屬性的值是對(duì)函數(shù)本身的引用，而不是一個(gè)包含函數(shù)名稱的字符串。

示例代碼如下：

// 創(chuàng)建 一碗周
var z = new Person('一碗周', 18, '男')
// 判斷是否為 Person 構(gòu)造函數(shù)的對(duì)象
console.log(z.constructor === Person)

2.3構(gòu)造函數(shù)與函數(shù)

先看一段代碼

function Hero() {
  // 當(dāng)作是一個(gè)函數(shù)來使用
  var v = 100 // 局部變量
  // 當(dāng)作是一個(gè)構(gòu)造函數(shù)來使用
  this.set = function (value) {
    v = value
  }
  this.get = function () {
    return v
  }
}

在這段代碼中，首先我們定義了一個(gè)函數(shù)，那它也是一個(gè)構(gòu)造函數(shù)，當(dāng)然它還是一個(gè)對(duì)象。

既然它有三個(gè)方面的含義，那就有三個(gè)方面的操作，如下所示

• 直接當(dāng)做函數(shù)調(diào)用
• 通過構(gòu)造函數(shù)創(chuàng)建對(duì)象
• 當(dāng)做對(duì)象為其添加屬性或者方法

示例代碼代碼如下：

// 直接調(diào)用
Hero()
// 通過構(gòu)造函數(shù)創(chuàng)建對(duì)象
var hero = new Hero()
// 當(dāng)做對(duì)象為其添加屬性和方法
Hero.n = '一碗周'
console.log(Hero.n) // 一碗周

3.Function對(duì)象的屬性和方法

全局的Function對(duì)象沒有自己的屬性和方法，但是，因?yàn)樗旧硪彩且粋€(gè)函數(shù)，所以它也會(huì)通過原型鏈從自己的原型鏈Function.prototype上繼承一些屬性和方法。

3.1length屬性

length屬性指明函數(shù)的形參個(gè)數(shù)，示例代碼如下所示：

// 定義兩個(gè)空函數(shù)
function fun(a, b, c, d) {}

function fn() {}

// 測(cè)試 length 屬性
console.log(fun.length) // 4
console.log(fn.length) // 0

apply()方法：

**apply()**方法調(diào)用一個(gè)具有給定this值的函數(shù)，以及以一個(gè)數(shù)組（或類數(shù)組對(duì)象）的形式提供的參數(shù)。

語法格式如下：

func.apply(thisArg, [argsArray])

參數(shù)解釋如下：

• thisArg：必選的。在func函數(shù)運(yùn)行時(shí)使用的this值。請(qǐng)注意，this可能不是該方法看到的實(shí)際值：如果這個(gè)函數(shù)處于非嚴(yán)格模式下，則指定為null或undefined時(shí)會(huì)自動(dòng)替換為指向全局對(duì)象，原始值會(huì)被包裝。
• argsArray：可選的。一個(gè)數(shù)組或者類數(shù)組對(duì)象，其中的數(shù)組元素將作為單獨(dú)的參數(shù)傳給func函數(shù)。如果該參數(shù)的值為null或undefined，則表示不需要傳入任何參數(shù)。從ECMAScript5開始可以使用類數(shù)組對(duì)象。

返回值是調(diào)用有指定this值和參數(shù)的函數(shù)的結(jié)果。

如下代碼展示了apply()方法的用法：

// 定義一個(gè)函數(shù)
function fn(a) {
  console.log('this is ' + a)
}
fn.apply(null, ['函數(shù)']) // this is 函數(shù)

// 上面的調(diào)用方式等同于下面這種方式
fn('函數(shù)') // this is 函數(shù)

3.2call()方法

該方法的語法和作用與apply()方法類似，只有一個(gè)區(qū)別，就是call()方法接受的是一個(gè)參數(shù)列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

如下代碼展示了call()方法的用法：

function fn(a) {
  console.log('this is ' + a)
}
fn.call(null, '函數(shù)') // this is 函數(shù)

// 上面的調(diào)用方式等同于下面這種方式
fn('函數(shù)') // this is 函數(shù)

bind()方法:
ind()方法創(chuàng)建一個(gè)新的函數(shù)，在bind()被調(diào)用時(shí)，這個(gè)新函數(shù)的this被指定為bind()的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用。

參數(shù)解釋如下：

function.bind(thisArg[, arg1[, arg2[, ...]]])

參數(shù):

thisArg：調(diào)用綁定函數(shù)時(shí)作為this參數(shù)傳遞給目標(biāo)函數(shù)的值。

arg1, arg2, ...：當(dāng)目標(biāo)函數(shù)被調(diào)用時(shí)，被預(yù)置入綁定函數(shù)的參數(shù)列表中的參數(shù)。

返回值是一個(gè)原函數(shù)的拷貝，并擁有指定的**this**值和初始參數(shù)。

如下代碼展示了bind()方法的：

// 定義一個(gè)函數(shù)
var fun = function (a, b) {
  console.log('第一個(gè)參數(shù)的值為：' + a + '第二個(gè)參數(shù)的值為：' + b)
}
// 調(diào)用 fun()
fun(10, 20) // 第一個(gè)參數(shù)的值為：10第二個(gè)參數(shù)的值為：20
// 創(chuàng)建綁定函數(shù)
var fn = fun.bind(null, 100, 200) // 有參數(shù)默認(rèn)值的功能
// 調(diào)用新創(chuàng)建的函數(shù)，不寫實(shí)參
fn() // 第一個(gè)參數(shù)的值為：100第二個(gè)參數(shù)的值為：200

4.Arguments對(duì)象

arguments對(duì)象是所有（非箭頭）函數(shù)中都可用的局部變量。你可以使用arguments對(duì)象在函數(shù)中引用函數(shù)的參數(shù)。此對(duì)象包含傳遞給函數(shù)的每個(gè)參數(shù)，第一個(gè)參數(shù)在索引0處。例如，如果一個(gè)函數(shù)傳遞了三個(gè)參數(shù)，你可以以如下方式引用他們：

arguments[0]
arguments[1]
arguments[2]

它的參數(shù)也是可以被重新定義的，該對(duì)象還提供了兩個(gè)屬性，分別是：

• arguments.length：返回傳遞給函數(shù)的參數(shù)數(shù)量
• arguments.callee ：返回指向參數(shù)所屬的當(dāng)前執(zhí)行的函數(shù)。如果這個(gè)屬性后面緊跟一個(gè) ()，則表示調(diào)用此函數(shù)，因?yàn)閍rguments.callee === fun的結(jié)果為 true

如下代碼展示了該對(duì)象的用法，代碼如下：

/*
 * arguments 對(duì)象是一個(gè)存在于函數(shù)體中的特殊對(duì)象。
 * arguments 對(duì)象是一個(gè)類數(shù)組對(duì)象
 * arguments 對(duì)象對(duì)應(yīng)傳遞給函數(shù)的實(shí)參
 */
// 定義一個(gè)函數(shù)
var fun = function () {
  console.log(arguments)
  // arguments.callee  指向參數(shù)所屬的當(dāng)前執(zhí)行的函數(shù)。
  //如果給這個(gè)屬性加一個(gè)括號(hào)則表示調(diào)用。因?yàn)?arguments.callee === fun 的結(jié)果為 true
  console.log(arguments.callee)
  // arguments.length  傳遞給函數(shù)的參數(shù)數(shù)量。
  console.log(arguments.length)
}
fun(1, 2, 3, 4, 5) 

代碼執(zhí)行結(jié)果如下所示：

[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
[Function: fun]
5

我們可以通過arguments.length屬性，來判斷傳入?yún)?shù)的數(shù)量，來完成函數(shù)重載的功能，示例代碼如下：

// 模擬函數(shù)的重載
function add() {
  // 記錄參數(shù)數(shù)量
  var len = arguments.length
  // 通過 switch case 語句判斷傳入?yún)?shù)數(shù)量，來模擬重載的功能
  switch (len) {
    case 2:
      return arguments[0] + arguments[1]
      break
    case 3:
      return arguments[0] + arguments[1] + arguments[2]
      break
    case 4:
      return arguments[0] + arguments[1] + arguments[2] + arguments[3]
      break

    default:
      break
  }
}
console.log(add(1, 2)) // 3
console.log(add(1, 2, 3)) // 6
console.log(add(1, 2, 3, 4)) // 10

5.總結(jié)

本篇文章介紹了如何創(chuàng)建構(gòu)造函數(shù)，如何通過構(gòu)造函數(shù)去實(shí)例化一個(gè)對(duì)象；以及Function對(duì)象提供的方法和屬性有哪些？怎么用，最后還介紹了一個(gè)Arguments對(duì)象。

到此這篇關(guān)于JS深入淺出Function與構(gòu)造函數(shù)的文章就介紹到這了,更多相關(guān)JS unction與構(gòu)造函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論