JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控制台的输出):

//在控制台先输入这个函数,
function Person(){
this.age = 0;
setInterval(function growUp() {
//此时的this时指向window,并不指向上面的this.age
this.age++;
},1000)
} >var p = new Person()
>p
//因为this时指向window,并不指向上面的this.age,所以没有变
<Person {age: 0}
//age是全局变量,没有给初始值,++后就变成Not a Number
>age
NaN
//给age赋初值,下面就开始++le
age = 0
0
age
5
age
8
age
10
age
14
age
16

以前流行的一种解决方法

//在控制台先输入这个函数,
function Person(){
//定义一个局部变量把当前的this放在里面,下面函数就可以使用了
let that = this;
this.age = 0;
setInterval(function growUp() {
//此时的this时指向window,并不指向上面的this.age
that.age++;
},1000)
}
//一切正常
>let p = new Person();
>p
<Person {age: 0}
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}

只有这一种解决方法?这时候箭头函数该登场了,箭头函数不会创建自己的this;它使用封闭执行上下文的this值。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同,简单来说,箭头函数没有自带this,他的this是来自上一级,所以刚刚好解决这个问题:

function Person(){
this.age = 0; setInterval(() => {
this.age++; // |this| 正确地指向person 对象
}, 1000);
}
undefined
>let p = new Person();
<undefined
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}

我们再看写栗子:

function f(){console.log(this.a)}
>f()
<undefined
//此时call传入参数,这个参数可以理解为this,但对this不造成影响
>f.call({a:1})
<1
>f.apply({a:1})
<1

还有个要记的,当箭头函数要返回一个对象时,{}要用小括号括起来,比如:f = () => ({}) ,大括号表示一个对象

更多箭头函数例子:API

React:JS中的this和箭头函数的更多相关文章

  1. 在react jsx中,为什么使用箭头函数和bind容易出现问题

    在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...

  2. js中的this和箭头函数中的this

    一.ES6 允许使用"箭头"(=>)定义函数. // var f = v => v;// 上面的箭头函数等同于: // var f = function(v) {// ...

  3. js中this指向、箭头函数

    普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = ne ...

  4. 如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?

    React绑定onClick为什么要用箭头函数? https://segmentfault.com/q/1010000010918131 如何优雅地在React中处理事件响应 https://segm ...

  5. 深入理解 React JS 中的 setState

    此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...

  6. 从源码的角度看 React JS 中批量更新 State 的策略(下)

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...

  7. 从源码的角度看 React JS 中批量更新 State 的策略(上)

    在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步 ...

  8. 从源码的角度再看 React JS 中的 setState

    在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...

  9. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

随机推荐

  1. delphi基础篇之数据类型之一:1.简单类型(Simple)

    1.简单类型(Simple) 简单类型包括实数类型(Real)和有序类型(Ordinal).有序类型又包括整数类型.字符类型.布尔类型.枚举类型和子界类型等. 1-1.有序类型 有序类型是一个有序数的 ...

  2. unzip失败,unzip:报错End-of-central-directory signature not found、scp:报错no space left on device

    文章目录 问题 解决 拓展 问题 通过rz命令传本地文件到本地服务器,失败. 通过scp命令尝试报错: no space left on device 意思是目的机器内存不够用了,但是传过去了,但是没 ...

  3. 7、Appium常用API

    嗯,官网已经介绍的很全了.会选几个常用API后期整理. Appium常用API地址:http://appium.io/docs/cn/writing-running-appium/appium-bin ...

  4. PAT_A1012#The Best Rank

    Source: PAT A1012 The Best Rank (25 分) Description: To evaluate the performance of our first year CS ...

  5. playbackRate控制音频播放倍速

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 剑指offer——71扑克牌中的顺子

    题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...

  7. next()nextLine()以及nextInt()的区别及用法【转载】

    next().nextLine().nextInt()作为scanner内置的方法,常常让人傻傻分不清楚,今天在这里记下他们的区别以及以此区别为出发点的用法:他们的区别在于对于空格的处理方式不同,以及 ...

  8. 第十五章 例行性工作(crontab)--循环执行的例行性工作调度 crontab(定时任务)

    循环执行的例行性工作调度 crontab(定时任务) 15.1 例行性工作调度 不考虑硬件与服务器的链接状态,Linux帮助提醒很多任务. Linux例行性工作是如何进行调度的? Linux调度就是通 ...

  9. 高程(三)--- Date

    Date类型使用UTC(国际协调时间)1970年1月1日0时0分始到现在的毫秒数来保存日期的. 所以当我们知道毫秒数时,还需要通过计算才能获取年月日时分秒. 一.获取时间对象 Date提供了2个方法: ...

  10. 49-Ubuntu-其他命令-1-文件软链接

    序号 命令 作用 01 ln -s 被链接的原文件 链接文件 建立文件的软链接,用通俗的方式讲类似于Windows下的快捷方式 注意: 没有-s选项建立的是一个硬链接文件--->>两个文件 ...