JavaScript进阶之函数和对象知识点详解

前言

JavaScript 是一门多范式的编程语言，而函数和对象是 JavaScript 语言的两个重要组成部分。了解 JavaScript 函数和对象的知识点是非常重要的，对 JavaScript 程序的编写和效率优化都有着重要的影响。

本篇文章将从概念、语法用法、应用等角度详细讲解 JavaScript 函数和对象的所有知识点，为广大开发者提供一份完整的函数和对象知识攻略。

函数

函数是 JavaScript 中最重要、最灵活的对象之一。在 JavaScript 中，函数也是一种对象，可以作为一个变量值，保存在变量中或对象的属性中。函数可以被访问、传递、赋值、调用、拼接等一系列操作。

函数的定义

函数可以使用函数声明或者函数表达式两种形式来进行定义。其中函数声明比较常见，代码如下：

function functionName(param1, param2){
    // 函数体代码
    return returnValue;
}

• 函数声明以 function 关键字开头，后跟函数名和函数参数列表。
• 函数体中的代码是函数所要执行的操作。
• return 语句可选，用于返回函数执行结果；如无此语句，则函数返回了 undefined。

函数表达式是定义函数的另一种方法。代码如下：

const functionName = function(param1, param2){
    // 函数体代码
    return returnValue;
}

• 函数表达式定义了一个匿名函数，并将其赋值给一个变量。
• 这种方式定义的函数没有函数名，通常称为匿名函数。

函数的调用

可以通过函数名和参数列表来调用函数，示例代码如下：

function sum(a, b){
    return a + b;
}

const result = sum(1, 2);
console.log(result); // 3

函数的参数

函数可以接收零个、一个或多个参数值。JavaScript 中函数的参数非常灵活，可以接受任何类型的参数，也可以传递给其他函数。函数参数的定义方式有两种：

普通参数

普通参数就是在函数定义中声明的那些参数。它们的值在函数被调用时传递给函数，并在函数中使用。普通参数可以是任何数据类型，如字符串、数字、对象等，传递参数时可以使用这些类型的变量、字面量或表达式。

function welcome(name){
    console.log(`Welcome ${name} to our website!`);
}

welcome("Alice"); // Welcome Alice to our website!

默认参数

ES6 引入了默认参数，可以为函数指定参数的默认值。这样的话，在调用函数时，如果没有提供该参数的值，则会使用指定的默认值。默认参数的定义方式如下：

function welcome(name = "Jack"){
    console.log(`Welcome ${name} to our website!`);
}

welcome(); // Welcome Jack to our website!

函数的返回值

函数可以使用 return 语句来返回结果，如果没有 return 语句，则返回 undefined。下面是一个带有返回值的函数示例：

function multiply(a, b){
    return a * b;
}

const result = multiply(2, 3);
console.log(result); // 6

函数的作用域

JavaScript 中的作用域分为全局作用域和局部作用域。在函数内部定义的变量和函数只能在函数内部访问，这些变量和函数的作用域称为函数的局部作用域。

function outer(){
    const a = 1;

    function inner(){
        const b = 2;

        console.log(a + b); // 3
    }

    inner();
}

outer();

函数的高阶用法

回调函数

回调函数是指把一个函数作为另一个函数的参数传递，然后在函数内部调用这个函数。回调函数通常用于异步编程。

function loadImage(src, callback){
    const img = new Image();
    img.onload = function(){
        callback(img);
    }
    img.src = src;
}

loadImage('http://www.example.com/image.jpg', function(img){
   console.log('Image loaded!');
});

匿名函数

在 JavaScript 常常会使用匿名函数。匿名函数可以直接赋值给变量，也可以作为函数调用的参数。它通常用于临时需要一个函数的场合，而不需要单独定义并命名。

const result = (function(){
    const a = 1;
    const b = 2;
    return a + b;
})();

console.log(result); // 3

对象

对象是 JavaScript 中最重要的数据类型之一，用于表示多个值的集合。对象可以保存和有序管理多个数据值，包括属性和方法。常见的对象有数组对象、函数对象、日期对象、正则对象等，也可以自定义对象。

对象的定义

对象通常使用对象字面量或者 new 关键字创建。

对象字面量创建对象：

const person = {
    name: "Alice",
    age: 18,
    sayHello: function(){
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old.`);
    }
};

console.log(person.name); // Alice
person.sayHello(); // Hello, my name is Alice, I am 18 years old.

使用 new 关键字创建对象：

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old.`);
    }
}

const person = new Person("Alice", 18);
console.log(person.name); // Alice
person.sayHello(); // Hello, my name is Alice, I am 18 years old.

对象属性

对象属性分为数据属性和访问器属性两种类型。

数据属性

数据属性包含一个属性值，它可以是任何 JavaScript 数据类型。对象属性的值可以被修改或删除。

const person = {
    name: "Alice",
    age: 18
};

console.log(person.name); // Alice

// 修改属性值
person.name = "Bob";
console.log(person.name); // Bob

// 删除属性
delete person.age;
console.log(person.age); // undefined

访问器属性

访问器属性不能使用字面量定义，它需要使用 Object.defineProperty 或 Object.defineProperties 方法定义。

const person = {
    _name: "Alice",
    get name(){
        return this._name;
    },
    set name(value){
        this._name = value;
    }
};

console.log(person.name); // Alice

person.name = "Bob";
console.log(person.name); // Bob

对象方法

对象方法就是一个定义在对象上的函数，对象方法可以访问对象属性。对象方法通常用于实现对象的某些操作，并与对象的数据属性和访问器属性密切相关。

const person = {
    name: "Alice",
    age: 18,
    sayHello: function(){
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old.`);
    }
};

person.sayHello(); // Hello, my name is Alice, I am 18 years old.

对象方法也可以使用对象展开运算符 ... 进行拓展。

const person = {
    name: "Alice",
    age: 18,
    sayHello: function(){
        console.log(`Hello, my name is ${this.name}, I am ${this.age} years old.`);
    }
};

const student = {
    ...person,
    grade: 5
};

console.log(student.name); // Alice
console.log(student.grade); // 5

示例一：使用匿名函数实现累加器

下面的代码示例展示了如何使用匿名函数实现一个简单的累加器。

const accumulator = (function(){
    let sum = 0;
    return function(num){
        sum += num;
        return sum;
    }
})();

console.log(accumulator(1)); // 1
console.log(accumulator(2)); // 3
console.log(accumulator(3)); // 6

这里使用一个立即执行函数来创建一个保存累加结果的变量，同时返回一个匿名函数。匿名函数就是累加器函数，它每次调用时都会将传入的值加到变量中并返回结果。

示例二：实现一个圆形对象

下面的代码示例展示了如何使用对象字面量定义一个圆形对象。

const circle = {
    x: 0,
    y: 0,
    radius: 5,
    get area(){
        return Math.PI * this.radius * this.radius;
    }
};

console.log(circle.area); // 78.53981633974483

这里使用对象字面量创建了一个圆形对象。圆形对象有三个数据属性 x、y 和 radius，还有一个访问器属性 area，用于计算圆形的面积。在代码中，使用圆形对象的 area 属性来计算圆形的面积并输出结果。