频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
ES6箭头函数中的this指向介绍
2018-03-08 14:37:47         来源:u012443286的博客  
收藏   我要投稿

一般函数的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是保持一致的。

点击复制链接 与好友分享!回本站首页
上一篇:web前端中div和span标签介绍
下一篇:box-shadow的强大功能介绍:用box-shadow画一个机器猫
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站