JavaScript 函数

JavaScript 函数是参数化的。函数的定义会包括一个形参的标识符列表**(arguments),这些参数在函数体中像局部变量一样工作。函数调用会为形参提供实参的值。函数使用它们实参的值来计算返回值,成为该函数调用表达式的值。每次的函数调用都会拥有本次调用上下文(context)**,即 this 关键字的值。

在 JavaScript 里,函数即对象,程序可以随意操控它们。

JavaScript 可以把函数赋值给变量,或作为参数传递给其他函数(回调函数)。因为函数就是对象,所以可以给它们设置属性,甚至调用它们的方法。

function func() {
    func.method(func.attr);
}
func.attr = 'a';
func.method = function (a) {
    console.log(a);
}

func(); // a

JavaScript 的函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所出的作用域中的任何变量**(闭包)**。

function func() {
    const x = 'can you see me?'
    return function innerFunc() {
        console.log(x);
    }
}

func()(); // can you see me?

如果函数挂载在一个对象上,作为对象的一个属性,就称它为对象的方法。用于初始化一个新建对象的函数成为构造函数(constructor)

JavaScript 函数调用的四种方式:

  • 作为函数

  • 作为方法

  • 作为构造函数

  • 通过call或者apply方法间接调用

几种方式调用最主要的区别,就是函数内部上下文的区别。

function func(x, y, z) {
    console.log(this, x, y, z);
}

func(1, 2, 3); // window or undefined (取决于是否启用·严格模式·), 1, 2, 3

const obj = {
    func,
}
obj.func(1, 2, 3); // obj, 1, 2, 3

func.call(obj, 1, 2, 3); // obj, 1, 2, 3
func.apply(obj, [1, 2, 3]); // obj, 1, 2, 3

不过,构造函数调用和普通的函数调用以及方法调用在实参处理、调用上下文和返回值方面都有不同。

作为构造函数调用时,会创建一个新的空对象,这个对象继承自构造函数的prototype属性。构造函数会试图初始化这个新创建的对象,并将其作为上下文。

function func() {
    'use strict'
    this.args = [...arguments];
}
func.prototype.a = '123';
const obj = {
    func,
}

const f1 = new func(1);
const f2 = new func; // 作为构造函数调用时,允许没有形参和圆括号
const f3 = new obj.func(1);

console.log(f1.args, f1.a); // [1], '123'
console.log(f2.args, f2.a); // [], '123'
console.log(f3.args, f3.a, obj.args); // [], '123', undefined

方法链

当方法的返回值是一个对象,这个对象还可以在调用它的方法。这种方法调用序列通常称为**“链”或者“级联”**。这个序列中每一次调用的结果都是另一个表达式的组成部分

[1, 2, 3, 4, 5, 6, 7, 8, 9]
    .map(item => item * 3)
    .filter((item) => item > 10); // 常见的方法的链式调用

方法的链式调用和构造函数的链式调用不等价

补充说明

通过bind函数绑定上下文后的函数,无法再次通过bind 函数绑定上下文

function func() {
 console.log(this)
}

const newFunc = func.bind([]).bind({});
newFunc(); // []

最后更新于