javascript学习笔记（四）function函数部分

下面是JavaScript学习笔记（四）Function函数部分的完整攻略。

一、函数的定义

JavaScript中的函数使用function关键字来定义，函数中的代码块可以在任何时间被调用多次。函数可以带着参数来进行运算，也可以返回值（有时不返回值，而是引起副作用）。

1. 基本语法

function functionName(parameters){
  // 函数执行的代码
  return returnValue;
}

• functionName: 函数名，变量名规则适用。
• parameters：参数列表，用逗号分隔多个参数。
• returnValue：函数的返回值，在函数里使用return语句返回。

2. 示例

function add(x, y){
  return x + y;
}

var result = add(2, 3);
console.log(result); // 输出 5

二、函数的参数

1. 默认参数

默认参数用于在没有传递值或传递undefined时使用默认值。

function add(x = 0, y = 0) {
  return x + y;
}

console.log(add()); // 0
console.log(add(1)); // 1
console.log(add(1, 2)); // 3

2. 不定参数

在ES6中，我们可以使用不定参数来接收不确定数量的实参。语法如下：

function sum(...numbers) {
  let total = 0;
  for(let number of numbers){
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

三、函数的调用方式

JavaScript中的函数调用方式有4种。

1. 函数式调用

这种方式我们最常用到，即直接调用函数。

function add(x, y) {
  return x + y;
}

console.log(add(1, 2)); // 输出3

2. 方法式调用

我们可以使用对象调用方法，这时函数中的this关键字指向该对象。

let obj = {
  x : 1,
  y : 2,
  add: function(){
    return this.x + this.y;
  }
};

console.log(obj.add()); // 输出3

3. 构造函数模式调用

使用new操作符和构造函数来创建一个新对象，通过this关键字来设置属性。

function Person(name, age) {
  this.name = name;
  this.age = age;
 }

let person = new Person('张三', 24);
console.log(person.name, person.age); // 输出张三 24

4. apply/call调用

我们可以使用apply和call方法来改变函数的this指向：

function add(x, y){
   return x + y;
}

console.log(add.apply(null, [1, 2])); // 输出3
console.log(add.call(null, 1, 2)); // 输出3

apply的第一个参数是改变后的this值，第二个参数是一个数组，其中的元素将作为参数传递给函数。

call的使用方式和apply类似，不同的是call的形参需要一个一个传递，而apply可以使用数组。

四、函数的作用域

作用域是指变量的可见范围，它决定了部分代码可以访问哪些变量。JavaScript有两种主要的作用域：全局作用域和函数作用域。

1. 全局作用域

在所有函数以外定义的变量拥有全局作用域，即在脚本的任何位置可被调用。

var name = "张三"; // 全局作用域

function greetings() {
  console.log('您好，' + name);
}

greetings(); // 输出您好，张三

2. 函数作用域

函数作用域简单来说就是指由变量声明在函数内，仅在函数内部可见。

function greetings(name) {
  var message = '您好，' + name; // 函数作用域(局部作用域)
  console.log(message);
}

greetings('张三'); // 输出您好，张三
// console.log(message); // 抛出 "ReferenceError"

3. 块级作用域

在ES6中，我们可以使用let和const关键字，通过将变量声明位于块级作用域中。

if (true) {
  let name = '张三';
  console.log(name); // 输出张三
}
// console.log(name); // 抛出 "ReferenceError"

五、函数的返回值

1. 返回值类型

一个函数可以返回一个值，或者不返回值(undefined)。

function add(x, y) {
  return x + y;
}
console.log(add(2, 3)); // 输出5

function welcome(name) {
  console.log('您好，' + name);
}
console.log(welcome('张三')); // 输出undefined

2. 返回多个值

在JavaScript中，函数只能返回一个值，但是我们可以使用数组或对象的方式返回多个值。

function getPerson() {
  return {
    name: '张三',
    age: 24,
  };
}
console.log(getPerson()); // 输出 { name: '张三', age:24 }

六、总结

上述内容是JavaScript学习笔记（四）的Function函数部分的完整攻略，涵盖了函数的定义、参数、调用方式、作用域和返回值，其中还提供了不少示例。掌握这些内容可以帮助你更好地使用JavaScript中的函数。