1.为什么要用箭头函数

  • 简洁 易用
  • 固定this 指向(箭头函数在this定义时候生效)

2.箭头函数分析this指向

1.this指向调用函数的对象

  • 情况1

    var obj={
    a:"1",
    b:function(){//this指向这个function局部作用域 这个作用域的调用对象是obj 所以this指向obj
    return ()=>{
         console.log(this); //obj
         console.log(this.a) //'1'
    }
    }
    }
    obj.b()();

      

  • 情况2
function a(){
return ()=>{ //因为箭头函数和a函数有相同的对象 被window调用则指向window对象
console.log(this)//window
}
}
a()();

2.this指向window

var a=2;//这里不能换成let a=2 因为window.获取不到a的值
var obj={
a:"1",
b:()=>{//由于对象不是作用域 所以作用域指向 全局window
console.log(this)//window
console.log(this.a)//2
}
}
obj.b();

总结:1. 箭头函数在定义的时候生效 而普通函数则在调用的时候生效

2.箭头函数没有自己的this,所以它总是指向外层代码块的this   (全局作用域,局部作用域)

3.当箭头函数所在的代码块为函数时候 则谁调用这个函数this就指向谁

箭头函数 this指向问题的更多相关文章

  1. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  2. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  3. 箭头函数this指向问题

    this指向本质 箭头函数this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this ...

  4. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  5. 5. 箭头函数_this 指向_es6 常用语法

    1. 箭头函数 函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回  () = ...

  6. typescript 属性默认值使用箭头函数 this指向问题

    今天注意到前端小伙伴用react 定义component class的方法的时候是通过箭头函数的方式,表示好奇. class Test extends React.Component { public ...

  7. ES6箭头函数this指向

    普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'us ...

  8. 箭头函数中可改变this作用域,回调函数用箭头函数this指向page,自定义事件用箭头函数this指向undefined

    1.回调函数中,用箭头函数改变this的作用域 success: (res)=>{ this.setData({ //此时,this指向page页面 ... }) } 2.自定义事件中,如果使用 ...

  9. js中箭头函数 及 针对箭头函数this指向问题引出的单体模式

    ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...

  10. ES6 箭头函数this指向

    箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使 ...

随机推荐

  1. python3练习100题——032

    链接:http://www.runoob.com/python/python-exercise-example32.html 题目:按相反的顺序输出列表的值. 我的代码: for i in li[:: ...

  2. 158.Clickjacking点击劫持攻击实现和防御措施

    clickjacking攻击: clickjacking攻击又称为点击劫持攻击,是一种在网页中将恶意代码等隐藏在看似无害的内容(如按钮)之下,并诱使用户点击的手段. clickjacking攻击场景: ...

  3. AntDesign(React)学习-14 使用UMI提供的antd模板

    1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后 ...

  4. 【Python】循环控制保留字

  5. [SHOI2016] 黑暗前的幻想乡 - 矩阵树定理,容斥

    #include <bits/stdc++.h> using namespace std; #define int long long const int N = 20; const in ...

  6. PCB主线布线规范—高速线之DDR2

    一.DDR2时钟线走线规则a)时钟线包括 MEM_CLKOUT#0.MEM_CLKOUT0.MEM_CLKOUT#1.MEM_CLKOUT1,MEM_CLKOUT#2.MEM_CLKOUT2: MEM ...

  7. ORM表单操作

    准备工作: 1.在orm操作表单之前需要先修改下django中连接的数据库,默认连接的是SQLit3,这里我们修改成mysql 2.mysql使用的版本是5.6,已经安装好了,直接连接就可以使用 创建 ...

  8. 链接测试工具:Xenu

    Xenu 是一款深受业界好评,并被广泛使用的死链接检测工具.时常检测网站并排除死链接,对网站的 SEO(搜索引擎优化) 非常重要,因为大量死链接存在会降低用户和搜索引擎对网站的信任. 最大支持100线 ...

  9. rancher布控集群启动失败的猜测

    rancher布控集群启动失败的猜测 待办 报告缺少某个文件.多线程启动任务部署的时候某些线程跑在前边了, 导致问题出现 或者 网络问题出现超时,导致出现此类报错 或者 内存不足导致问题出现报错 或者 ...

  10. 2.17NOIP模拟赛(by hzwer) T2 小奇的序列

    [题目背景] 小奇总是在数学课上思考奇怪的问题. [问题描述] 给定一个长度为 n 的数列,以及 m 次询问,每次给出三个数 l,r 和 P, 询问 (a[l'] + a[l'+1] + ... + ...