JavaScript函数、闭包、原型、面向对象学习笔记

JavaScript函数学习笔记

什么是函数

函数是 JavaScript 中的一个代码块，它可以重复执行，并且可通过传入参数和返回值来实现对信息的处理和存储。

函数的定义方式

JavaScript 中有多种定义函数的方式，以下是其中常用的三种方式：

1. 函数声明

使用 function 关键字定义的函数，代码如下：

function functionName (arg1, arg2, ..., argN) {
  // 函数体
  return returnValue;
}

其中 functionName 为函数名，arg1, arg2, ..., argN 为参数列表，return 为返回值关键字，returnValue 为返回值。

2. 函数表达式

可以将函数定义为一个变量，代码如下：

var functionName = function (arg1, arg2, ..., argN ) {
  // 函数体
  return returnValue;
}

其中 functionName 为变量名，arg1, arg2, ..., argN 为参数列表，return 为返回值关键字，returnValue 为返回值。

3. 箭头函数

ES6 引入了箭头函数的概念，代码如下：

var functionName = (arg1, arg2, ..., argN) => {
  // 函数体
  return returnValue;
}

其中 functionName 为变量名，arg1, arg2, ..., argN 为参数列表，return 为返回值关键字，returnValue 为返回值。

函数调用

调用一个函数时，需要将传入的参数放在括号内。代码如下：

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

add(1, 2); // 3

以上代码是调用 add 函数，传入 1 和 2 两个参数，并返回它们的和 3。

闭包学习笔记

什么是闭包

闭包是在一个函数内部定义另一个函数，这个被定义的函数可以使用其外部函数的变量，但是外部函数却无法访问内部函数的变量。

闭包的作用

使用闭包可以在函数内部定义变量，并且可以避免这些变量对外部环境的污染。

闭包的示例

function outerFunction() {
  var a = 0;
  function innerFunction() {
    a++;
    console.log(a);
  }
  return innerFunction;
}

var fn = outerFunction();
fn(); // 1
fn(); // 2
fn(); // 3

以上代码中，我们在外部函数 outerFunction 中定义了变量 a 和内部函数 innerFunction，内部函数 innerFunction 又可以访问外部函数 outerFunction 中的变量 a，通过将内部函数 innerFunction 赋值给变量 fn 并且调用 fn 函数，a 变量的值被每次自增 1，并打印输出。

原型学习笔记

原型是什么

每个 JavaScript 对象都有一个原型对象，原型对象也是一个对象，或者说是当前对象的父对象。如果我们访问一个对象不存在的属性或方法时，JavaScript 就会在原型对象中查找，如果找到了就直接返回对应的值，如果没有找到，则继续在原型对象的原型对象中查找，直到找到或者到达顶层为止。

原型链是什么

JavaScript 对象之间通过原型来相互关联，形成了所谓的原型链。

构造函数与原型

JavaScript 中的每个函数对象都有一个 prototype 属性，这个属性指向了一个对象，这个对象就是实例化之后所有新创建对象的原型。

通过 new 关键字创建对象时，JavaScript 引擎会将对象的原型链接到构造函数的 prototype 属性所指向的对象上。

用一个简单的例子来说明：

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function () {
  console.log('My name is ' + this.name);
}

var cat = new Animal('Tom');
cat.sayName();

以上代码中，我们定义了一个 Animal 构造函数，并在其 prototype 属性上添加了一个 sayName 方法。

我们通过 new 关键字创建了一个 cat 对象，cat 对象继承了 Animal.prototype 对象上的 sayName 方法，所以可以通过 cat.sayName() 来调用该方法，输出 My name is Tom。

面向对象学习笔记

什么是面向对象

面向对象是一种编程思想，其基本概念是将数据和处理数据的方法绑定在一起，形成一个独立的对象。

面向对象的三个特征

1. 封装：将数据和处理数据的方法包装起来，对外部不可见，只提供一些方法供外界使用。
2. 继承：子类继承父类的属性和方法，可以重写父类的方法，子类也可以添加新的属性和方法。
3. 多态：同一方法可以根据不同的对象实现不同的行为。

面向对象的示例

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

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

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayHello = function () {
  console.log('Hello, my name is ' + this.name + ', I am ' + this.age + ' years old, and I am a student in grade ' + this.grade);
}

var person = new Person('John', 30);
person.sayHello();

var student = new Student('Tom', 18, 'Grade 12');
student.sayHello();

以上代码中，我们定义了一个 Person 构造函数，并在其 prototype 属性上添加了一个 sayHello 方法。

通过继承 Person 构造函数，我们又定义了一个 Student 子类，并在子类中重写了 sayHello 方法，sayHello 方法输出了和 Person 类不同的内容。

通过 new 关键字创建了一个 person 对象，和一个 student 对象，并调用它们的 sayHello 方法。