TypeScript学习总结（3）

        在学到函数的时候发现了一个以前没见过的函数写法=>箭头函数

一、什么是箭头函数

在TypeScript中箭头函数的基本语法是类似于这样的：

const functionName = (parameter1: type1, parameter2: type2, ..., parameterN: typeN) => {
  // 函数体
}

如果箭头函数只有一个参数，可以省略括号：

const functionName = parameter => {
  // 函数体
}

 如果箭头函数的函数体只有一个表达式，可以省略花括号和return关键字：

const functionName = (parameter1: type1, parameter2: type2, ..., parameterN: typeN) => expression;

 下面是普通函数和箭头函数的区别

普通函数

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

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

箭头函数

const add = (a, b) => a + b;

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

 据我查询资料箭头函数实际的写法是这样的

( param:type,...):return_type =>{函数内容}

        只不过经常用const声明一个包含箭头函数的变量（其实这也就是匿名函数，哈哈，后来才知道的），当然了包含箭头函数的变量不一定要用const声明，用let或var来声明也可以，但通常推荐使用const来声明。这是因为箭头函数没有自己的this值，它会捕获其所在上下文的this值，这意味着箭头函数的this值在定义时就已经确定，不会在运行时改变。因此，使用const可以确保箭头函数的this值不会被重新赋值。

二、箭头函数与普通函数的区别

1. this的绑定

普通函数：

普通函数有自己的this值，它的this值是在函数调用时确定的，取决于函数的调用方式（例如，作为方法调用、作为构造函数调用等）。

function outer() {
  const inner = function() {
    console.log(this);
  };
  inner();
}

outer(); // 输出: Window对象（在浏览器中）

在这个例子中，普通函数被定义在outer函数中，所以它有自己的this值。由于outer函数的this值是全局对象（在浏览器中是Window对象），所以普通函数的this值也是全局对象。 

箭头函数：

箭头函数没有自己的this值，它会捕获其所在上下文的this值，并在函数体内使用该值。这意味着箭头函数的this值是在定义时确定的，而不是在调用时确定的。

const obj = {
  name: 'TypeScript',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

obj.greet(); // 输出: Hello, TypeScript

在这个例子中，箭头函数被定义在greet方法中，所以它捕获了greet方法中的this值。由于greet方法的this值是obj对象，所以箭头函数的this值也是obj对象。 

 2. 构造函数

 普通函数：

可以使用new关键字调用普通函数，将其作为构造函数使用，创建一个新的对象实例。

箭头函数：

箭头函数不能用作构造函数，即不能使用new关键字调用。如果尝试使用new关键字调用箭头函数，JavaScript会抛出一个错误。

3. arguments对象

（这个还没学过，先放这，以后回来再补）

普通函数： 

普通函数有自己的arguments对象，它是一个类数组对象，包含了函数调用时传递的所有参数。

箭头函数：

箭头函数没有arguments对象，但可以使用剩余参数（rest parameters）来获取函数的参数。