JS-普通函数和箭头函数的this区别

一、普通函数的this

this 永远指向 调用 包含自己（this本身） 的函数对应的对象。

也就是说，包含 this 的函数只在乎是谁调用了它，跟在哪里进行的函数声明没有关系。

function test(){
    var a = 1;
    console.log(this.a);
}

test(); //undefined

如果函数在最外层直接运行，默认绑定的对象是 window，因为 test() 是被window对象调用的，所以这里的 this.a 对应的应该是 全局变量（或者叫window变量） 而不是test函数里的局部变量，由于 在 window 对象中没有声明 变量a，所以输出 undefined。

对代码进行改造一下

var a = 2; //window对象下的变量

function test(){
    var a = 1;
    console.log(this.a);
}

test(); // 2

下面再来分析一个经典的例子

var name = 'China';
var obj = {
    name : 'America',
    show : function() {
        console.log(this.name)
    }
}

obj.show(); // America

从上述代码可以看出，包含 this 的函数是 show（），而show（）函数通过对象obj调用的，所以 this.name 指向 obj 中的 name（America）;

再来对代码进行改造

var name = 'China';
var obj = {
    name : 'America',
    show : function() {
        return function(){
            console.log(this.name);
        }
    }
}

var a = obj.show();
a(); // China

这里的 obj.show（） 返回的是一个匿名函数

function(){
    console.log(this.name);
}

然后赋值给 变量a，等价于：

var a = function(){
    console.log(this.name);
}

或

function a(){
    console.log(this.name);
}

所以 最后执行的 a（）== window.a（）, 函数a 里面的 this.name 指向 window.name(‘China’)，所以最终输出 China。

常用场景

1. 在一般函数方法中使用 this 指代全局对象

function test(){
　　this.x = 1;
　　console.log(this.x);
}
test(); // 1

2. 作为对象方法调用，this 指代上级对象

function test(){
　　console.log(this.x);
}

var obj = {};

obj.x = 1;
obj.m = test;
obj.m(); // 1

3. 作为构造函数调用，this 指向 new 出的对象

function test(){
    this.name = 'China';
}

var t = new test();
console.log(t.name); //'China'

4. apply, call 调用

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

function Cat(){
    Animal.call(this);
}

var cat = new Cat();
console.log(cat.name);// 'animal'

二、箭头函数的this

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}

A.sayHello(); // window

之前提到，“该函数所在的作用域指向的对象”，作用域是指函数内部，这里的箭头函数，也就是sayHello，所在的作用域其实是最外层的js环境，因为没有其他函数包裹；然后最外层的js环境指向的对象是winodw对象，所以这里的this指向的是window对象。

那如何改造成永远绑定A呢：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

这样就做到了永远指向A对象了。我们再根据“该函数所在的作用域指向的对象”来分析一下：

1. 该函数所在的作用域：箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。
2. 作用域指向的对象：A.sayHello指向的对象是A。

所以箭头函数s 中this就是指向A

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

1. 声明方式

• 声明一个普通函数需要使用关键字 function 来完成，并且使用function既可以声明成一个具名函数也可以声明成一个匿名函数。
• 声明一个箭头函数则只需要使用箭头就可以，无需使用关键字function，比普通函数声明更简洁。
• 箭头函数只能声明成匿名函数，但可以通过表达式的方式让箭头函数具名

2. this指向不同

对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。

也就是说，箭头函数内部的this指向是固定的，普通函数的this指向是可变的。

3. 是否可以改变this的指向

箭头函数的this永远不会变，call、apply、bind也无法改变

我们可以用call、apply、bind来改变普通函数的this指向，但是由于箭头函数的this指向在它定义时就已经确定了，永远指向它定义时的上层作用域中的this，所以使用这些方法永远也改变不了箭头函数this的指向。

4. 原型prototype

箭头函数没有原型prototype，而普通函数有原型prototype。

let fn = name => {
    console.log(name)
}
let fn2 = function(name) {
    console.log(name)
}
console.log(fn.prototype) // undefined
console.dir(fn2.prototype) // {constructor: ƒ}

5. 构造函数

箭头函数不能当成一个构造函数。

let fn = name => {
    console.log(name)
}

const f = new fn() // Uncaught TypeError: fn is not a constructor

我们知道new内部实现其实是分为以下四步：

• 新建一个空对象
• 链接到原型
• 绑定this，执行构造函数
• 返回新对象

function myNew() {
	// 1.新建一个空对象
	let obj = {}
	// 2.获得构造函数
	let con = arguments.__proto__.constructor
	// 3.链接原型
	obj.__proto__ = con.prototype
	// 4.绑定this，执行构造函数
	let res = con.apply(obj, arguments)
	// 5.返回新对象
	return typeof res === 'object' ? res : obj
}

因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会变，并且箭头函数没有原型prototype，没法让他的实例的__proto__属性指向，所以箭头函数也就无法作为构造函数，否则用new调用时会报错。

6. arguments

全局作用域

箭头函数处于全局作用域中，则没有arguments

let fn = name => {
    console.log(arguments)
}
let fn2 = function(name) {
    console.log(arguments)
}
fn2() // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
fn()  // 报错 Uncaught ReferenceError: arguments is not defined

函数作用域

箭头函数处于普通函数的函数作用域中，arguments则是上层普通函数的arguments

let fn2 = function(name) {
    console.log('fn2:',arguments)
    let fn = name => {
        console.log('fn:',arguments)
    }
    fn()
}
fn2()
// fn2: // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
// fn: // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]

rest参数

箭头函数没有arguments 但是可以使用rest参数代替

ES6 引入 rest 参数，用于获取函数不定数量的参数数组，这个API是用来替代arguments的，形式为…变量名，rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

let fn3 = (a,...arr) => {
    console.log(a,arr) //1, [2,3,4,5,6]
}

fn3(1,2,3,4,5,6)

rest参数与arguments的比较

• 箭头函数和普通函数都可以使用rest参数，而arguments只能普通函数使用
• 接受参数rest比arguments更加灵活
• rest参数是一个真正的数组，而arguments是一个类数组对象，不能直接使用数组方法

四、遇到的面试题

var a = {
  b: function() {
    console.log(this)
  },
  c: () => console.log(this),
  d: {
    e: function() {
      console.log(this)
    },
    f: () => console.log(this),
  }
}

a.b();
a.c();
a.d.e();
a.d.f();

// a
// window
// d
// window

---

参考链接：
ES6箭头函数的this指向详解
2022年了你还不了解箭头函数与普通函数的区别吗