在react中使用箭头函数引发的对this的思考

[youngwind]

前言

用es6一段时间了，某次想把组件内部的函数都改写成箭头函数。比如

render : function(){
  console.log(this.props);
}

改写成下面这样的

render () => {
  console.log(this.props);  // 报错，this是undefined
}

结果显示this是undefined，我就感觉箭头函数的this有坑，研究了一番，发现还真的不一样。

箭头函数this指向与普通函数不同

箭头函数的this指向函数定义时的作用域，普通函数的this指向函数调用时的作用域。
因为箭头函数没有自己的上下文。
完整地例子参考这里：https://jsbin.com/vetecagupa/edit?js,console
注：在非严格模式执行

这个例子会输出1，因为普通函数的this指向函数被调用时候的作用域，也就是demo

var x = 10;
var demo = {
    x : 1,
    test1 : function() { console.log(this.x); },
    test2 : function() {
        this.test1();
    }
};

demo.test2();  // 1  

这个例子会输出10，因为test1函数在定义的时候处于global作用域，调用的时候this维持不变。

var x = 10;
var demo2 = {
    x : 1,
    test1 : () => { console.log(this.x); },
    test2 : function() {
        this.test1();
    }
};

demo2.test2();  // 10

这个例子会报错，因为函数test2定义的时候处于global作用域，所以调用的时候this指向global，而global中不存在test2方法。

var x = 10;
var demo3 = {
    x : 1,
    test1 : () => { console.log(this.x); },
    test2 : () =>{
        this.test1();
    }
};

demo3.test2();  // error: this.test1 is not a function

回到render函数

搞清楚了箭头函数的this问题，但是由于我还没搞清楚react定义组件的时候作用域的问题，所以暂时没办法搞明白如何在组件中使用箭头函数，以后有时间再研究研究，未完待续。。。。

[cagen]

可能的三种方案

1. ES7 Property Initializers (Babel Stage 0提供):

   Class MyComponent extends React.Component {
     render = () => {
       console.log(this.props);
     }
   }

2. Autobind Decorator:

   import autobind from 'autobind-decorator';
   
   Class MyComponent extends React.Component {
     @autobind
     render () {
       console.log(this.props);
     }
   }

3. 构造函数里头手动绑定:

   Class MyComponent extends React.Component {
     constructor() {
       this.render = this.render.bind(this);
     }
     render() {
       console.log(this.props);
     }
   }

[youngwind]

@cagen thanks!

[ryanzhouff]

@youngwind 谢谢你提出的问题
@cagen 谢谢你的回答
也可以通过安装babel-plugin-transform-class-properties插件解决这个问题

class Header extends React.Component {
    handleClick = (e) => {
        console.log(e);
    }
    render() {
        return (
            <div>
                    <button type="button" onClick={this.handleClick}>点击</button>
            </div>
        )
    }
}

具体使用方法，可以到Babel官网查看

[kangenpingmai]

var demo2 = {
x : 1,
test1 : () => { console.log(this.x); },
test2 : function() {
this.test1();
}
};
这个test1怎么是定义在全局的，这不是再demo2里面定义的吗

[RuinousCheng]

var demo2 = {
x : 1,
test1 : () => { console.log(this.x); },
test2 : function() {
this.test1();
}
};
这个test1怎么是定义在全局的，这不是再demo2里面定义的吗

test1 依然是demo2的属性，但是调用时箭头函数里的this指向的是全局对象。

[sanfengliao]

箭头函数的this指向他所在作用域的this，这个箭头函数所在的作用域是全局作用域，所以this指向window。注意，js只有全局作用域和函数作用域

…

---原始邮件--- 发件人: "RuinousCheng"<[email protected]&gt; 发送时间: 2019年9月28日 19:39:44 收件人: "youngwind/blog"<[email protected]&gt;; 抄送: "Subscribed"<[email protected]&gt;; 主题: Re: [youngwind/blog] 在react中使用箭头函数引发的对this的思考 (#14) var demo2 = { x : 1, test1 : () =&gt; { console.log(this.x); }, test2 : function() { this.test1(); } }; 这个test1怎么是定义在全局的，这不是再demo2里面定义的吗 test1 依然是demo2的属性，但是调用时箭头函数里的this指向的是全局对象。 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.