Javascript 中 Function 的屬性與方法

1. Function 建構函式的屬性與方法

1. Function.arguments （不建議使用）

代表傳入函式的實參，是一個類陣列物件，這個屬性已經廢棄，當前普遍使用的是：在 函式中直接使用 arguments 物件，如果使用 es6 建議使用 ... 操作符獲取傳入實參

function a(arg1, arg2) {
    console.log(arguments);
    console.log(a.arguments);
}

a(1, 2, 3, 4, 5);
/*
   { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
   { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
*/
 


// es6
function b(...args) {
    console.log(args);
}

b(1, 2, 3, 4); // [ 1, 2, 3, 4 ]

2. Function.length

指明函式的形參個數

function a(arg1, arg2) {}

function b(...args) {}

const c = function(arg1) {};

const d = () => {};

const e = function(arg1 = 22, arg2) {};

const e2 = function(arg1, arg2 = 333)
 
 {};

console.log(a.length); // 2
console.log(b.length); // 0 ...args 形式的形參個數為 0
console.log(c.length); // 1
console.log(d.length); // 0
console.log(e.length); // 0 設定預設值後 形參個數只計算到含有預設值的引數前一個
console.log(e2.length); // 1

const f = function fff(arg1, arg2, arg3) {
    console.log('fff', fff.length); // fff 3
    console.log('f'
 
, f.length); // f 3
};
f();

3. Function.name

返回函式宣告的名稱

function a() {}

console.log(a.name); // a

const b = new Function();

console.log(b.name); // anonymous

const c = function() {};

console.log(c.name); // c

const d = function dd() {};

console.log(d.name); // dd

const obj = {
    e: function() {}
};

console.log(obj.e.name); // e

function f() {}
const ff = f.bind(null);

console.log(ff.name); // bound f  繫結函式的名稱前加上"bound "

2. Function.prototype Funciton 的原型物件或者例項上的屬性與方法

1. bind()

用於建立一個新的函式，當被呼叫時，將其函式的 this 關鍵字指向 .bind(thisArg, ...) 的第一個引數，並且 bind() 方法的其餘引數都會在新函式呼叫時作為引數優先傳遞給被繫結的方法

.bind() 最簡單的用法就是，建立一個函式，使得這個函式無論怎麼呼叫都有同樣的 this 值

function initialFn(...args) {
    console.log(args);
    console.log(this.name);
}

const obj = {
    name: 'obj name'
};

this.name = 'global name';

// 繫結 this 並且傳入引數
const newFn = initialFn.bind(obj, 'bind1', 'bind2');

// 執行時傳入引數
newFn('normal1', 'normal2');
/*
   [ 'bind1', 'bind2', 'normal1', 'normal2' ] // bind 的引數會優先傳入
   obj name // this 指向是傳入的第一個引數
*/
const globalFn = initialFn.bind(this, 'bind1', 'bind2');

globalFn('global1', 'global2');
/*
   [ 'bind1', 'bind2', 'global1', 'global2' ]
   global name
*/

2. call() apply()

兩個方法都是呼叫一個函式，其具有一個指定的 this，call() 與 apply() 非常相似，不同之處在於提供的引數的方式 apply 使用引數陣列而不是一組引數列表，call()方法接受的是若干個引數的列表，返回值是是呼叫方法的返回值

function initialFn(...args) {
    console.log(args);
    console.log(this.name);
}

const obj = {
    name: 'obj name'
};

this.name = 'global name';

initialFn.call(obj, 'call1', 'call2');
/*
   [ 'call1', 'call2' ]
   obj name
*/
initialFn.call(this, 'call1', 'call2');
/*
   [ 'call1', 'call2' ]
   global name
*/

initialFn.apply(obj, ['apply1', 'apply2']);
/*
   [ 'apply1', 'apply2' ]
   obj name
*/

initialFn.apply(this, ['apply1', 'apply2']);
/*
   [ 'apply1', 'apply2' ]
   global name
*/

3. bind() apply() call() 三者區別

• 三個函式都可以用來繫結函式的 this 指標
• bind() 方法的返回值是一個繫結過 this 並且預先傳入引數的函式，這個函式要再次呼叫才會執行
• apply() call() 兩個方法繫結函式後就會執行這個函式，返回值是被繫結函式的返回值
• apply() call() 兩者只是傳入引數方式不同

4. toString()

返回一個表示當前函式原始碼的字串

function initialFn(...args) {
    console.log(args);
    console.log(this.name);
}

console.log(initialFn.toString());
/*
   function initialFn(...args) {
      console.log(args);
      console.log(this.name);
   }
*/

參考

• MDN