Javascript 中 Function的属性与方法

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