javascript this变量

最近在练习react native,碰到一个坑。程序一直报this.setState is not a function

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';

class ListViewBasics extends Component {
    // 初始化模拟数据
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows([
                'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
            ]),
            test: 'test'
        };
        // 少了这一行,就会报错
        this._onPress.bind(this);
    }

    _onPress() {
        this.setState({test: '11111'});
    }

    render() {
        return (
            
                 {rowData}}
                />
            
        );
    }
}

// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent('test', () => ListViewBasics);

主要原因是没有调用bind函数,其实在示例代码也看到过需要调用this._onPress.bind(this),只是不理解原因,所以印象不深刻,自己再敲一遍就忘了。

翻了下this相关的资料
JavaScript 中的作用域 scope 和上下文 context 是这门语言的独到之处,每个函数有不同的变量上下文和作用域。这些概念是 JavaScript 中一些强大的设计模式的后盾。在ES5规范里,我们可以遵循一个原则——每个 function 内的上下文 this 指向该 function 的调用方。

var Module = {
    name: 'Jafeney',
    first: function() {
        console.log(this);   // this对象指向调用该方法的Module对象
        var second = (function() {
            console.log(this)  // 由于变量提升,this对象指向Window对象
        })()
    },
    init: function() {
        this.first()
    }
}

Module.init()

类似的还有这样的(截图原自《Javascript高级程序设计》):

javascript this变量_第1张图片
Javascript高级程序设计.png

回到上面最开始的那个React例子在render函数里面

  {rowData}}

相当于

   var onpress = this._onPress;
   // 在onclick的时候,调用
   onpress();   // this指向其他环境,而不是之前的类对象

至于 this._onPress = this._onPress.bind(this); 其实等价于:

    //  相当于用了类原型生成了一个bind到当前对象的函数
    //  再覆盖当前函数,来保证这个函数的this永远不会被改变
    this._onPress = this.protoType._onPress.bind(this);
    var onpress = this._onPress;
    // 组件被click的时候
   onpress();  //即使在全局环境调用,this也不会被改变

至于箭头操作符,作用域的规则不一样,具体可以看资料的链接。
好多不懂的,继续学习吧。

参考资料

深入理解React中的上下文this
ECMAScript 6 入门 class

你可能感兴趣的:(javascript this变量)