bind()使用

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

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

提炼:

  • 第一个参数是上下文中的this
  • 第二个及以后的参数是作为新函数的参数出入新函数中的
  • 捆绑上下文(this关键字)和一系列参数到原来的函数(传入的参数是值传递到函数中)

首先看一段简单代码:

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遍历而比那话

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,270评论 0 4
  • //Clojure入门教程: Clojure – Functional Programming for the J...
    葡萄喃喃呓语阅读 3,776评论 0 7
  • 双手绕手腕,右边的没有左边的灵活。 右边整条手臂、手腕特别怕冷。 右侧位睡姿,醒来时,右手经常会感到麻。 平躺睡时...
    若水柳柳柳阅读 268评论 1 0