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

ES6 专栏收录该内容
1 篇文章 1 订阅

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表达式中会默认使用严格模式。
  • 5
    点赞
  • 4
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值