1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var test1=()=>{
console.log(this.name,this);
}
window.name = "obj window";
class {
constructor(){
this.name = "class p";
}
func(){
var test2 = () =>{
console.log(this.name,this);
};
function test3(大专栏  es6this箭头函数 class="params">){
console.log(this);
}
test1();
test2();//class p
test3();//undefined
}
}
var p = new P();
p.func();
</script>
</body>
</html>

js中函数作用域属于静态作用域,就是函数作用域的嵌套关系在函数定义时确定了,废话不多说直接上例子

1
2
3
4
5
6
7
8
9
10
[javascript] view plain copy
var a='out a';
function test(){
console.log(a); // out a
}
function outer(){
var a="in a";
test()
};
outer();

ok,接下来就是箭头函数的this,

以下为我的理解,如有不正之处,望指点。

箭头函数不能用于构造函数,在上面的例子中,test1箭头函数定义在最外面,当test1函数打印this对象时会根据定义时决定的作用域嵌套关系逐级向上查找,因此查找的是window对象,在test2箭头函数中,由于test2定义在类P的func函数中,test2箭头函数打印this时,会先去func方法查找,找到了,然后打印。test3中,类中的方法默认开启了严格模式 所以test3中this为undefined。 可以将箭头函数中的this类比为函数中定义的变量,使用时按照定义时决定的作用域逐级查找直到找到为止。

原文地址

es6this箭头函数的更多相关文章

  1. 区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题

    ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () { this.a = 'a', this.b = 'b', this.c = { a: ...

  2. ES6 箭头函数中的 this?你可能想多了(翻译)

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  3. ES6箭头函数与展开运算符

    箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...

  4. 箭头函数和Buffer对象

    一.箭头函数 普通函数1 var add = function (a, b) { return a + b; } 普通函数2 function add (a, b) { return a + b; } ...

  5. 深入理解this机制系列第三篇——箭头函数

    × 目录 [1]痛点 [2]解决 [3]基本用法[4]回调函数[5]注意事项 前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将 ...

  6. Es6 箭头函数

    1.单参数function cheng(a=3){    return a*a;}let cheng= (a=3)=>a*a;console.log(cheng(9));2.多参数functio ...

  7. 【javascript】箭头函数

    ES6标准新增了一种新的函数:Arraw Function(箭头函数). x => x * x 这个函数相当于 function (x){ return x * x; } 题外话:user st ...

  8. JS中generater和箭头函数

    generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返 ...

  9. 箭头函数 Arrow Functions/////////////////////zzz

    箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...

随机推荐

  1. CF 1096D Easy Problem [动态规划]

    题目链接:http://codeforces.com/problemset/problem/1096/D 题意: 有一长度为n的字符串,每一字符都有一个权值,要求现在从中取出若干个字符,使得字符串中没 ...

  2. div 命名规范! (野路子出来的好好看看)

    DIV命名规范   DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头:  ...

  3. JavaScript可以做嵌入式开发了

    JS怎么可能搞嵌入式开发? TESSEL这个工具可直接在设备上运行JS,无需服务端支持. 百闻不如一见,请查看官网介绍吧:http://technical.io/ 网页内还有一个示例,点击会看到LED ...

  4. drf框架概况-resful接口规范-请求模块-渲染模块-Postman-drf请求生命周期

    drf框架 全称:django-rest- framework 知识点: """ 1.接口:什么是接口.restful接口规范 2.CBV生命周期源码-基于restful ...

  5. python机器学习(2:KNN算法)

    1.KNN 简介:knn算法是监督学习中分类方法的一种.它又被叫k近邻算法,是一个概念极其简单而分类效果又很优秀的分类算法. 核心思想:在训练集中选出离输入的数据最近的k个数据,根据这k个数据的类别判 ...

  6. sockaddr_in 转成string

    string strAcceptIp = inet_ntoa(remoteAddr.sin_addr);

  7. Monkey通过安装包获取包名

    在monkey命令中,包名常作为一个参数.但我们经常知道apk文件,却不知道包名. 如何获取包名呢? 方法一:AAPT 在SDK的build-tools目录下,aapt工具可以查看,创建,更新zip格 ...

  8. 谈谈有关 Python 的GIL 和 互斥锁

    转载:https://blog.csdn.net/Amberdreams/article/details/81274217 有 Python 开发经验的人也许听说过这样一句话:Python 不能充分利 ...

  9. excle导出、导入、下载_jeesite注解@ExcelField

    介绍:对Apache POI 3.9的简单封装,实现Excel的导出导入功能.使用Annotation定义导出导入字段. 优点:1.简单易用,支持大数量导出,配置简单,代码量少. 2.支持Excel ...

  10. mysql数据库-索引-长期维护

    ###############    索引介绍    ############## """ 1. 索引介绍 需求: 一般的应用系统,读写比例在10:1左右,而且插入操作和 ...