ES6箭头函数中的this指向介绍
程序员文章站
2022-03-13 12:21:05
一般函数的this
为了搞清楚箭头函数中的this指向,我们需要先清楚一般函数中的this指向。
假如,我们在浏览器中输入:
function o(){
thi...
一般函数的this
为了搞清楚箭头函数中的this指向,我们需要先清楚一般函数中的this指向。
假如,我们在浏览器中输入:
function o(){ this.a=5; } o(); console.log(window.a);//5
我们会发现,window环境中多了一个变量a,并且其值为5。这是因为作为一般函数的o函数,其中的this指向window。当执行o函数的时候,就给window对象增加了一个a属性。
但是,如果我们在函数内部使用严格模式:
function o(){ 'use strict'; this.a=5; }
则会报错:
Uncaught TypeError: Cannot set property 'a' of undefined
意思是不能给undefined设置a属性。显然严格模式下,一般函数中的this指向了undefined。
ES6箭头函数的this指向
在箭头函数出现之前,每个新定义的函数都有其自己的this值。比如,典型的如下:
(1)构造函数的this指向了一个新的对象;
(2)严格模式下的函数的this值为undefined;
(3)如果函数是作为对象的方法被调用,则其this指向了那个调用它的对象。
在箭头函数中呢?
我们先看一个实例:
function s(){ this.a=5; o=()=>{this.b=6;}; o(); } s(); window.a;//5 window.b;//6
这里箭头函数中的this还是指向了window,不过它所在的执行环境即s函数中的this也指向window。
如果我们改一下代码:
function s(){ this.a=5; o=()=>{this.b=6;}; o(); } var s1=new s(); s1;//{a: 5, b: 6} window.a;//undefined window.b;//undefined
我们看到箭头函数的执行环境s函数中this指向新创建的对象,箭头函数中的this便也指向新创建的对象。
由此,我们可以得出猜测:箭头函数的this指向和它执行环境中的this保持一致。
如果我们查阅资料就会发现:
箭头函数会捕获其所在上下文的this作为自己的this,也就是说,箭头函数内部与其外部的this是保持一致的。
上一篇: 设置table表格后边框单线讲解
下一篇: 说一说吃了不长脂肪的食物都有哪些