bind()使用

2017-12-28  本文已影响8人  lltree

官方API到底还是比较靠谱的

bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数

提炼:

首先看一段简单代码:

function add(a,b){    
    return a + b;
}
var a = 3;
var b = 4;var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

首先看一段RN代码:

_renderImages = (imgDataList) =>{

        let allImage = [];
        for (let i = 0 ; i < imgDataList.length ; i++){

            let  itemUrl = imgDataList[i];
            allImage.push(
                <TouchableWithoutFeedback key = {i} onPress={this._onPressImage(i,imgDataList)}>
                    <Image  source={{uri: itemUrl ,cache: 'force-cache'}} style={styles.imageStyle}/>
                </TouchableWithoutFeedback>
            );
        }
        allImage.push(

            <View key = {imgDataList.length} style={{height:56,width:20}}/>//解决右侧靠边问题
        );
        return allImage;
    }
    _onPressImage = (i,imgDataList) =>{

        NativeModules.HSLooKBigImg.lookBigImg(i.toString(), imgDataList.toString());
    }

这段代码会出现_onPressImage 方法中接受的i会随着for循环中的i变化而变化,所谓为了解决此问题,引入bind()方法,如下:

 _renderImages = (imgDataList) =>{

        let allImage = [];
        for (var i = 0 ; i < imgDataList.length ; i++){

            let  itemUrl = imgDataList[i];
            allImage.push(
                <TouchableWithoutFeedback key = {i} onPress={this._onPressImage.bind(this,i,imgDataList)}>
                    <Image  source={{uri: itemUrl ,cache: 'force-cache'}} style={styles.testimageStyle}/>
                </TouchableWithoutFeedback>
            );
        }
        allImage.push(

            <View key = {imgDataList.length} style={{height:56,width:20}}/>//解决右侧靠边问题
        );
        return allImage;
    };
    _onPressImage = (i,imgDataList) =>{

        AlertIOS.prompt(i.toString());

       // NativeModules.HSLooKBigImg.lookBigImg(i.toString(), imgDataList.toString());
    }

引入bind()方法后,在创建每个{this._onPressImage.bind(this,i,imgDataList)}代码块的时候传入其中的参数 都是for循环期间的当前值,不会随着for遍历而比那话

上一篇下一篇

猜你喜欢

热点阅读