Function 對象屬性和方法

Function 對象

 

在 JavaScript 中， Function 對象是一個很核心的內容，它本身是一個對象，可以創建對象，也可以用於創建任何函數，所有函數都是一個 Function 對象。Function 對象的返回值可以是任何一種數據類型，雖然本身的屬性和方法並不多，但卻是最靈活最不可或缺的一個對象。

它提供了幾個改變函數上下文的相關操作。

創建一個 Function 實例對象的方法：

• var func = Function('a','console.log(a)')
• var func = new Function('a','console.log(a)')
• var func = function (a) {console.log(a)}
• var func = (a)=> {console.log(a)}
• function func(a) {console.log(a)}

 

Function 對象與其實例對象的屬性和方法：

// Object.getOwnPropertyDescriptors(Function):
name                         : {value: "Function", writable: false, enumerable: false, configurable: true}
length                       : {value: 1, writable: false, enumerable: false, configurable: true}
prototype                    : {writable: false, enumerable: false, configurable: false, value: ƒ}

// Object.getOwnPropertyDescriptors(Function.prototype):
arguments                    : {enumerable: false, configurable: true, get: ƒ, set: ƒ}
constructor                  : {writable: true, enumerable: false, configurable: true, value: ƒ}
name                         : {value: "", writable: false, enumerable: false, configurable: true}
length                       : {value: 0, writable: false, enumerable: false, configurable: true}
toString                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
caller                       : {enumerable: false, configurable: true, get: ƒ, set: ƒ}
Symbol(Symbol.hasInstance)   : {writable: false, enumerable: false, configurable: false, value: ƒ}
apply                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
bind                         : {writable: true, enumerable: false, configurable: true, value: ƒ}
call                         : {writable: true, enumerable: false, configurable: true, value: ƒ}

 

Function.prototype 常用屬性

1、arguments（此api或將棄用，但仍能使用，嚴格模式下盡量別用）

• arguments.length：獲取函數實參的個數
• arguments.callee：獲取函數對象本身的引用
• arguments.callee.length：獲取函數形參的個數

Javascrip中每個函數都會有一個Arguments對象實例arguments，它引用着函數的實參，可以用數組下標的方式"[]"引用每個實際傳入的參數。

示例：

function test (a,b,c,d) {
    console.log('len(實參個數):',arguments.length) // len(實參個數): 3
    console.log('callee(函數本身):',arguments.callee) // callee(函數本身): ƒ test (a,b,c,d) {...}
    console.log('callee.length(形參個數):',arguments.callee.length) // callee.length(形參個數): 4
    console.log('指定參數：',arguments[0],arguments[1],arguments[arguments.length - 1])// 指定參數： hello (3) [1, 2, 3] {a: 999}
} 
test('hello',[1,2,3],{a:999})

 

2.length :獲取函數的接收參數(形參)個數。

function test (a,b,c,d,e,f,g) {
    console.log('len:',test.length) // len: 7
}
test()

 

Function.prototype 常用方法

1、call() : 方法使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數。

語法：function.call(thisArg, arg1, arg2, ...)
參數：

• thisArg（可選）：
  • 在 function 函數運行時使用的 this 值。
  • this可能不是該方法看到的實際值：如果這個函數處於非嚴格模式下，則指定為 null 或 undefined 時會自動替換為指向全局對象，原始值會被包裝。
• arg1, arg2, ...：
  • 指定的參數列表。

返回值：使用調用者提供的 this 值和參數調用該函數的返回值。若該方法沒有返回值，則返回 undefined。

示例：

// call 的基本用法：fn.call第一個參數指向o，所以前三個參數this.a、this.b、this.c分別對應o的a、b、c，
// fn.call的第二部分參數（除第一個參數以外的參數）分別是fn函數原本的參數，對應d、e、f
var o = {a:1,b:2,c:3}
function fn(d,e,f) {
    console.log(this.a,this.b,this.c,d,e,f)
}
fn.call(o,3,4,5) // 1 2 3 3 4 5


// 在子構造函數中，可以通過調用父構造函數的 call方法來實現繼承。示例中，使用 Singer和 Writer 構造函數創建的對象實例都會擁有在 Person構造函數定義的 name屬性 和 age屬性，但 skill屬性 是在各自的構造函數中定義的。
function Person(name, age) {
  this.name = name;
  this.age = age;
}

function Singer(name, age) {
  Person.call(this, name, age);
  this.skill = 'sing';
}

function Writer(name, age) {
  Person.call(this, name, age);
  this.skill = 'writing';
}

var ZXY = new Singer('學友', 20);
var LX = new Writer('樹人', 30);

 

2、apply() : 調用一個具有給定this值的函數，以及作為一個數組（或類似數組對象）提供的參數。

語法：function.apply(thisArg, [argsArray])
參數：

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

返回值：調用有指定this值和參數的函數的結果。

示例：

// apply的基本用法與 call一樣，不同在第二部分參數：
// fn.apply 第一個參數指向o，所以前三個參數this.a、this.b、this.c分別對應o的a、b、c，
// fn.apply 的第二部分參數（除第一個參數以外的參數）是一個數組或類數組對象，數組里面每個元素分別對應fn函數原本的參數，示例中3，4，5分別對應d、e、f
var o = {a:1,b:2,c:3}
function fn(d,e,f) {
    console.log(this.a,this.b,this.c,d,e,f)
}
var args = [3,4,5]
fn.apply(o,args) // 1 2 3 3 4 5

// 合並數組
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

 

3、bind() : 創建一個新的函數，在 bind() 被調用時，這個新函數的 this 被指定為 bind() 的第一個參數，而其余參數將作為新函數的參數，供調用時使用。

語法：function.bind(thisArg[, arg1[, arg2[, ...]]])
參數：

• thisArg：
  • 調用綁定函數時作為 this 參數傳遞給目標函數的值。
  • 如果使用new運算符構造綁定函數，則忽略該值。
  • 當使用 bind 在 setTimeout 中創建一個函數（作為回調提供）時，作為 thisArg 傳遞的任何原始值都將轉換為 object。
  • 如果 bind 函數的參數列表為空，或者thisArg是null或undefined，執行作用域的 this 將被視為新函數的 thisArg。
• arg1, arg2, ...：
  • 當目標函數被調用時，被預置入綁定函數的參數列表中的參數。

返回值：返回一個原函數的拷貝，並擁有指定的 this 值和初始參數。

示例：

// bind 的基本用法：fn.bind第一個參數指向o，所以前三個參數this.a、this.b、this.c分別對應o的a、b、c，
// fn.bind的第二部分參數（除第一個參數以外的參數）分別是fn函數原本的參數，對應d、e、f
// 需要注意的是bind返回一個未立即執行的函數，需要接收調用
var o = {a:1,b:2,c:3}
function fn(d,e,f) {
    console.log(this.a,this.b,this.c,d,e,f)
}
var nfn = fn.bind(o,3,4,5); // nfn接收返回的函數
nfn() // 1 2 3 3 4 5

 

 

 

JavaScript 中的三大對象 (本地對象、內置對象、 宿主對象)

本地對象

• Object 對象屬性和方法
• String 對象屬性和方法
• Array 對象屬性和方法
• Date 對象屬性和方法
• Number 對象屬性和方法
• RegExp 對象屬性和方法
• Function 對象屬性和方法
• Boolean 對象屬性和方法
• Error 對象屬性和方法

 

內置對象

• Global 對象屬性和方法
• Math 對象屬性和方法
• JSON 對象屬性和方法

 

宿主對象

• DOM 對象屬性和方法
• BOM 對象屬性和方法