详解JavaScript中的函数、对象

详解JavaScript中的函数

JavaScript中的函数是非常重要的一个概念，它不仅仅可以完成一些基本的计算和逻辑操作，还可以使用函数作为参数、返回值或者构造函数。以下是详细讲解函数的内容。

函数声明

在JavaScript中，函数的声明可以使用function关键字，其后跟随函数名、参数列表和函数体。

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

上面的代码定义了一个名为add的函数，它接受两个参数a和b，然后返回它们的和。函数的调用方式如下：

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

我们可以将函数声明保存到变量中，这样我们就可以像使用一个普通的变量一样使用函数。

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

函数作为参数

函数可以作为另一个函数的参数传递。这个特性非常有用，可以实现很多复杂的程序逻辑。

function operation(a, b, fn) {
  return fn(a, b);
}

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

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

在上面的例子中，函数operation接受三个参数：两个操作数和一个函数fn。函数fn在调用operation时传递进来，并在函数内部调用。

匿名函数

函数的声明可以不使用函数名，这种函数就称为匿名函数。匿名函数可以保存到变量中，也可以作为参数传递。

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

operation(2, 3, function(a, b) {
  return a / b;
})

函数级作用域

JavaScript中的函数有自己的作用域，局部变量只能在函数中访问。如果全局变量和局部变量同名，函数内部会优先使用局部变量。

var x = 1;
function add(a, b) {
  var x = a + b;
  console.log(x); // 3
}
add(1, 2);
console.log(x); // 1

闭包

闭包是指函数访问外部变量的能力，它可以读取父级函数内部的变量，即使父级函数已经执行完毕。

function counter() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

var increment = counter();
increment(); // 1
increment(); // 2

在上面的例子中，函数counter返回一个内部函数，该内部函数增加to一个局部变量count，每次调用该内部函数时，局部变量count都会累加并输出到控制台上，不管外部函数是否已经执行完毕，变量count都可以被内部函数访问。

详解JavaScript中的对象

JavaScript中的对象是一种非常有用的数据类型，它可以保存一组相关的数据和函数，并且可以通过点操作符访问属性和方法。以下是详细讲解对象的内容。

对象的声明

在JavaScript中，对象可以使用对象字面量（object literal）语法声明，语法格式如下

var person = {
  name: '张三',
  age: 18,
  sayHello: function() {
    console.log('你好，我叫' + this.name + '，今年' + this.age + '岁。');
  }
};

上面的代码定义了一个名为person的对象，该对象包含了三个属性和一个方法。属性可以使用点操作符访问。

console.log(person.name); // 张三
console.log(person.age); // 18
person.sayHello(); // 你好，我叫张三，今年18岁。

对象属性的增删改查

对象的属性可以通过点操作符或者中括号操作符进行访问、增加、删除和修改。

var person = {
  name: '张三',
  age: 18
};

console.log(person.name); // 张三

person.gender = '男';
console.log(person.gender); // 男

delete person.age;
console.log(person.age); // undefined

person.name = '李四';
console.log(person.name); // 李四

this关键字

JavaScript中的this关键字指代当前对象。在一个函数内部，this指代的是调用该函数的对象。如果函数作为一个全局函数调用，this指代的是window对象。

var person = {
  name: '张三',
  sayHello: function() {
    console.log('你好，我叫' + this.name);
  }
};

person.sayHello(); // 你好，我叫张三

var sayHello = person.sayHello;
sayHello(); // 你好，我叫undefined

在上面的例子中，函数sayHello作为person对象的方法调用，this指代的是person对象。当把该函数保存到变量中之后再次调用，因为此时this的上下文关系已经变化，this指代的是window对象。因此，在输出信息时，对象的name属性由于没有正确指定this，所以值为undefined。

构造函数

构造函数是一种特殊的函数，用于创建和初始化一个对象。构造函数通常首字母大写，这是为了和普通函数区分。

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHello = function() {
    console.log('你好，我叫' + this.name + '，今年' + this.age + '岁，性别' + this.gender);
  }
}

var person1 = new Person('张三', 18, '男');
person1.sayHello(); // 你好，我叫张三，今年18岁，性别男

var person2 = new Person('李四', 20, '女');
person2.sayHello(); // 你好，我叫李四，今年20岁，性别女

在上面的例子中，我们使用了构造函数来创建两个Person对象，它们各自有自己的属性和方法。注意，在构造函数内部，this关键字的含义指代正在创建的实例对象。