码迷,mamicode.com
首页 > Web开发 > 详细

React:JS中的this和箭头函数

时间:2018-02-13 23:40:44      阅读:527      评论:0      收藏:0      [点我收藏+]

标签:int   pre   target   导致   style   作用域   image   font   问题   

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和箭头函数

标签:int   pre   target   导致   style   作用域   image   font   问题   

原文地址:https://www.cnblogs.com/doudoublog/p/8447631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!