JavaScript之class中的箭头函数和普通函数

1. 前言

class是ES6中的新语法，本质上并不是功能，只是对象原型的语法糖。让对象原型的写法更接近传统的面向对象语言（比如Java）。

在使用React框架开发前端项目的过程中频繁使用到了class，当时就很好奇class类中普通函数形式的方法和箭头函数形式的方法有什么不同呢？之前在掘金上发表过相关文章，今天重新整理一下。

2. 示例代码

class Foo {
  	constructor(obj) {
  		this.state = {
  			name: obj.name,
        	age: obj.age
      	};
	}

	getName = () => {
		console.log('arrow function:', this);
		console.log('name:', this.state.name);
    }

    getAge() {
		console.log('function:', this);
		console.log('age:', this.state.age);
    }
}
// 创建Foo实例foo
let foo = new Foo({name: foo, age: 2});

3 通过实例调用方法

3.1 调用箭头函数方法

foo.getName();

控制台打印结果：

3.2 调用普通函数方法

foo.getAge();

控制台打印结果：

3.3 小结

1. class中的方法如果是普通函数方法，该方法会绑定在构造函数的原型上；
2. 如果方法是箭头函数方法，该方法会绑定在构造函数上；
3. 通过上述方式调用class中的方法，无论是箭头函数方法还是普通函数方法，方法中的this都指向实例对象。

4. 通过方法的引用调用方法

4.1 调用箭头函数方法

let getName = foo.getName;
getName();

控制台打印结果：

4.2 调用普通函数方法

let getAge = foo.getAge;
getAge();

控制台打印结果：

4.3 小结

1. 通过引用来调用箭头函数方法，方法中的this依然指向创建的实例对象。
   原因：箭头函数中的this，只和定义该箭头函数的位置有关系，即，箭头函数中的this始终是该箭头函数所在作用域中的this。而箭头函数所在的作用域中的this指向foo实例对象。
2. 通过引用调用普通函数方法，方法中的this会指向undefined。
   原因：因为普通函数中的this是动态绑定的，始终指向函数的执行环境，上面的例子中在全局环境中调用getAge方法，但是this却是undefined而不是window。原因在于class声明和class表达式中会默认使用严格模式。