箭头函数的this指向

raoyi 发布于2019-08-23 12:00 / 2844人阅读

摘要：箭头函数的指向箭头函数的指向的地方并不是函数调用的词法作用域，而是声明时的词法作用于。基于这个新的改变，可以看出在改变以往的不合理的地方下足了功夫。试图希望让变成一门面向对象的强语言的决心。

箭头函数的this指向 this

箭头函数的this指向的地方并不是函数调用的词法作用域，而是声明时的词法作用于。详情请看下例：

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

var obj = {
    prop : fn
}

obj.prop()  //{prop: ƒn}

var fn = () => {
    console.log(this);
}

var obj = {
    prop : fn
}

obj.prop()  //Window

上面两段代码中，不同的仅仅是function的声明方式，一个沿用传统的function关键字声明，一个使用了新的 => 箭头函数进行声明，然后这两个this指向的结果完全不同，一个按照传统的方式，指向了被调用的词法作用域，也就是obj，所以this指向了obj，而另一个则是直接指向了声明fn方法的词法作用域，也就是Window。

基于这个新的改变，可以看出ES6在改变javascript以往的不合理的地方下足了功夫。试图希望让javascript变成一门面向对象的强语言的决心。

需要注意的地方

基于新特性，以往在使用匿名函数的时候，不能再随意使用this了，如：

elem.addEventListener("click",function(){
    //this ==> elem 
},false)

elem.addEventListener("click",() => {
    //this ==> 该代码的词法作用域 如 Window 
},false)

这里如果直接按原来的模式将function 替换成 => 的话就会出现上述问题，需要注意。

GPU云服务器云服务器 this的指向改变this指向指向函数的指针箭头函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97827.html

论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

摘要：第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局，使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API...

paulquei 2019-08-23 16:15 评论0 收藏0
ES6精解：箭头函数

摘要：基本用法在中允许使用来定义函数，如下就等同于从上面可以看出，在箭头左侧的是代表参数，若参数只有一个，可以省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则可以省略不写无参数情况若箭头函数不需要参数，则左侧用代替，如下无参数情况无参数基本用法在ES6中允许使用 => 来定义函数，如下： var f = a => a; console.log(f(1)); //1 就...

HackerShell 2019-08-22 18:18 评论0 收藏0
ES6箭头函数体中this指向哪里？

摘要：注意因为箭头函数内部的是指向外层代码块的最近的，例中的函数的，所以我们可以通过改变外层代码块的的指向从而改变箭头函数中的指向例中使用了函数的方法。一、this关键字小测试 ES6箭头函数体中的this指向哪里？在回答这个问题之前先来揣揣你对this关键字的了解程度：（让我们回到ES6之前）题： var obj = { a: function() { cons...

Half 2019-08-22 15:48 评论0 收藏0
ES6 - 箭头函数、箭头函数与普通函数的区别总结

摘要：但是因为箭头函数没有自己的，它的其实是继承了外层执行环境中的，且指向永远不会随在哪里调用被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用调用时会报错报错箭头函数没有自己的箭头函数没有自己的对象。这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简单介绍即可。之后，我们重点来讨论一下...

scola666 2019-08-23 16:32 评论0 收藏0
es6箭头函数

摘要：但是箭头函数并没有自己的其是继承了外层执行环境的，且不能改变，因此不能作为构造函数，此时，引擎会在报错。不能作为事件的回调在中，事件的回调函数中，会动态的指向监听的对象，但是由于监听是一个全局函数，所以箭头函数的回调中指向。箭头函数 es6中添加了函数新的定义语法——箭头函数，当有大于一个形参的时候，必须使用()代表部分参数，函数体大于一行时，必须使用{}将函数体括起来，并使用ret...

UnixAgain 2019-08-26 10:59 评论0 收藏0
关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0