#yyds干货盘点#今天聊聊JS的Function

时间:2022-10-14 12:10:59

Object.prototype 是原型的创造者,任何原型都源自它;而 Function.prototype 是仅次于 Object.prototype 的存在,它是内置构造函数的创建者,任何构造函数都源自它。

​Function(构造函数) 与 Function.prototype(原型)又是相生相伴的关系,从构造函数层面,它已经比 Array、String、Number 等重要了,虽然比不上 Object,但也是仅次于它的存在

不仅如此,函数还能做很多事情。首先,它是个对象,所以它和对象一样,也有属性,也可以赋值给变量。除此之外,函数可以自身当作参数传递,也具有返回值的特性。


属性和方法

我们用函数声明的形式创建了一个普通函数 func,打印它。虽然我们没有对其进行任何的赋值操作,但它自身自带了各种属性,很显然,Function 是没有静态方法的,它只有实例属性和实例方法,都继承自 Function.prototype。我们看到函数 func 上有 arguments、caller、length、name ,这些都是继承自 Function.prototype,在 func.proto 中你能找到同样的属性,这其中的秘密是Function.proto === Function.prototype


实例属性

  • ​Function.prototype.arguments​​:对应传递给函数的参数数组
  • ​Function.prototype.constructor​​:指向构造函数
  • ​Function.prototype.length​​:参数数量

实例方法

  • ​Function.prototype.apply(thisArg [, argsArray])​​:调用一个函数并将其​​this​​ 值设置为提供的传参,第二个参数以数组对象传入
  • ​Function.prototype.call(thisArg [, arg1, arg2, ...argN])​​:调用一个函数并将其​​this​​ 值设置为提供的传参,也可以选择传输新参数
  • ​Function.prototype.bind(thisArg[, arg1[, arg2[, ...argN]])​​:创建一个新函数,该函数在调用时,会将 this 设置为提供的​​thisArg​​。在调用新绑定的函数时,可选的参数序列(​​[, arg1[, arg2[, ...argN]]]​​)会被提前添加到参数序列中
  • ​Function.prototype.toString()​​​:返回表示函数源码的字符串。覆盖了​​Object.prototype.toString​​ 方法


创建函数

创建函数有四种方法:函数构建函数、函数声明、函数表达式、箭头函数

// 函数构造函数:最后一个参数为函数逻辑,之前的都是参数
var add = new Function('x', 'y', 'return x + y');

// 函数声明
function add2(x, y) {
return x + y;
}
// 函数表达式
var add3 = function (x, y) {
return x + y;
};
// 箭头函数
var add4 = (x, y) => x + y

这里需要说明的是,在正常开发中,函数构造函数基本用不到。开发中用的比较多的是函数声明、函数表达式、箭头函数,那么三者有什么区别呢?

先对比函数声明和函数表达式

  • 函数声明会引起函数提升(且优先级比变量提升高),再对比箭头函数与普通函数
  • 没有 this,函数体内的 this 需在外部词法环境中查找
  • 没有 arguments
  • 不可以当作构造函数。也就是说,箭头函数不能使用 new 命令,否则会抛出一个错误
  • 没有 super
  • 不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数
  • 返回对象时必须在对象外面加上括号

创建函数就是如此,创建了如何调用函数呢?


调用函数

在不同的场景下,调用函数各显不同,以下几种为调用函数的方式

  • 作为函数
  • 作为方法
  • 作为构造函数
  • 使用 call/apply/bind
  • 自调用函数
// 作为函数
var func1 = function () {
return 'foo';
};
console.log(func1); // foo

// 作为方法,即对象中的函数被称为方法
var obj1 = {
func2: function () {
return 'bar';
},
};
console.log(obj1.func2()); // bar

// 作为构造函数
function Person() {
this.name = 'johnny'
this.age = 28;
this.gender = 'female';
this.getName = function () {
return this.name;
};
}
var cody = new Cody(); // 调用构造函数
console.log(cody);

// 使用 call/apply 调用
var obj2 = {
sayHello: function () {
console.log(this.name, arguments[0], arguments[1]);
},
};
var johan = { name: 'johan' };
var elaine = { name: 'elaine' };

// 在 johan 对象上调用 sayHello
obj2.sayHello.call(johan, 'foo', 'bar'); // johan, foo, bar

obj2.sayHello.apply(elaine, ['foo', 'bar']); // elaine, foo, bar

// 自调用
(function() {
console.log('自调用函数');
})();

无论是创建函数,还是调用函数,能有什么用,能证明函数是一等公民吗?


函数为什么是一等公民

接下来,我们来解释为什么说函数是一等公民?

首先,函数是对象,这意味着函数可以存储在一个变量、数组或对象中。其次,因为是对象,所以它也拥有对象的特性,即它拥有属性。除了对象的特征外,作为函数本身,它可以作为参数传递,也可以作为返回值返回。如此,这些因素就构成了函数成为 JavaScript 中的”一等公民“

// 作为变量保存变量、数组、对象
var funcA = function () {} // 作为变量
var funcB = [function(){}] // 作为数组变量
var funcC = { method: function() {} } // 作为对象方法

// 函数也是对象,意味着可以拥有属性
var funcD = function () {}
funcD.name = 'funcD' // 赋值name

console.log(funcD.name) // funcD

// 作为参数
var funcE = function(func) {
func()
}
funcE(function () {
console.log('函数作为参数传递')
})

// 作为函数返回值
var funcF = function (x, y) {
return x + y // 函数特性,有返回值
}
console.log(funF(1,2)) // 3