javascript this变量

作者: zzzabc | 来源:发表于2016-10-26 17:17 被阅读37次

JS的基本语法--变量及类型
7 js 变量
Javascript 变量、函数的声明
JavaScript 变量作用域和内存问题
javascript学习思维导图
JavaScript函数闭包
js语法难点
js归纳总结——各种思维导图
js语法
变量

最近在练习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 (
            <View style={{paddingTop: 22}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <Text onPress={this._onPress}>{rowData}</Text>}
                />
            </View>
        );
    }
}

// 注册应用(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高级程序设计.png

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

  <Text onPress={this._onPress}>{rowData}</Text>}

相当于

   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也不会被改变

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