JS深入淺出Function與構(gòu)造函數(shù)

更新時間：2021年12月01日 11:54:16 作者：一碗周

這篇文章主要介紹了JS深入淺出Function與構(gòu)造函數(shù)，F(xiàn)unction是一個構(gòu)造函數(shù)，可以通過該構(gòu)造函數(shù)去創(chuàng)建一個函數(shù)，創(chuàng)建的函數(shù)是一個Function對象，具體內(nèi)容請參考下面文章的詳細內(nèi)容,需要的朋友可以參考一下

?1.概述

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

驗證代碼如下所示：

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

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

Function****構(gòu)造函數(shù)創(chuàng)建一個新的Function對象。直接調(diào)用此構(gòu)造函數(shù)可用動態(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("這是一個函數(shù)")')
fun() // 這是一個函數(shù)
// 帶一個參數(shù)的函數(shù)
var fun = new Function('a', 'console.log("這個函數(shù)帶一個參數(shù)：" + a)')
fun(100) // 這個函數(shù)帶一個參數(shù)：100
// 帶兩個參數(shù)的函數(shù)
var fun = new Function(
  'a, b',
  'console.log("這是帶兩個參數(shù)的函數(shù)，分別是" + a + "和" + b);',
)
fun(100, 200) // 這是帶兩個參數(shù)的函數(shù)，分別是100和200

在實際的開發(fā)中我們一般不使用這種方式創(chuàng)建函數(shù)，因為它毫無可讀性。

1.2Function與Object

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

驗證代碼如下：

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ū)ο竽０?，是對象中的一個方法，在實例化時構(gòu)造器被調(diào)用。在JavaScript中函數(shù)就可以作為構(gòu)造器使用，因此不需要特別定義一個構(gòu)造器方法。

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

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

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

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

// 自定義構(gòu)造函數(shù) -> 作用：創(chuàng)建對象
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對象的constructor屬性

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

所有對象都會從它的原型上繼承一個constructor屬性：

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

示例代碼如下：

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

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

先看一段代碼

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

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

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

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

示例代碼代碼如下：

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

3.Function對象的屬性和方法

全局的Function對象沒有自己的屬性和方法，但是，因為它本身也是一個函數(shù)，所以它也會通過原型鏈從自己的原型鏈Function.prototype上繼承一些屬性和方法。

3.1length屬性

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

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

function fn() {}

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

apply()方法：

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

語法格式如下：

func.apply(thisArg, [argsArray])

參數(shù)解釋如下：

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

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

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

// 定義一個函數(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()方法類似，只有一個區(qū)別，就是call()方法接受的是一個參數(shù)列表，而apply()方法接受的是一個包含多個參數(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)建一個新的函數(shù)，在bind()被調(diào)用時，這個新函數(shù)的this被指定為bind()的第一個參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時使用。

參數(shù)解釋如下：

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

參數(shù):

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

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

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

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

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

4.Arguments對象

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

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

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

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

如下代碼展示了該對象的用法，代碼如下：

/*
 * arguments 對象是一個存在于函數(shù)體中的特殊對象。
 * arguments 對象是一個類數(shù)組對象
 * arguments 對象對應(yīng)傳遞給函數(shù)的實參
 */
// 定義一個函數(shù)
var fun = function () {
  console.log(arguments)
  // arguments.callee  指向參數(shù)所屬的當(dāng)前執(zhí)行的函數(shù)。
  //如果給這個屬性加一個括號則表示調(diào)用。因為 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