bind用原生JS实现详细解释

个人对bind方法的一点理解,说的比较详细,希望和我一样的初学者能看懂

Function.prototype.Bind = function(index){
            var that = this;
            alert(that);//我们如果输出就发现是调用bind的函数对象
            var arg = Array.prototype.slice.call(arguments,1)
            return function(){
                var arg1 = Array.prototype.slice.call(arguments);
                that.apply(index,arg.concat(arg1))
            }
          }
   //下面是一个例子     
 var obj = { value: []};

var a = function(){ console.log(arguments)
for( var i = 0; i < arguments.length; i++ ){

this.value.push(arguments[i]);
}

return this.value;
}.Bind( obj,4,5,6 ); //这里把参数4,5,6一起传入绑定给了函数a,但是这里并不会执行a中的语句,要在下面调用a才能得到结果
  console.log(a());

index就是我们要绑定的参数,设置一个this指针为that,为的是指向调用bind方法的函数对象
var arg = Array.prototype.slice.call(arguments,1)//这里体现的是bind的预设参数功能,我们在绑定函数的时候可以传入多个参数,这里从第二个开始取,因为第一个参数是我们绑定的对象,后面是预设值的参数,但是还不会调用。

return function(){//我们这里返回的是一个函数,这也是为什么bind只是绑定但是还没有调用方法,而call和apply则是会直接调用方法

var arg1 = Array.prototype.slice.call(arguments);//这里的arguments是我们在绑定之后再去调用已经绑定好的函数时传入的参数

that.apply(index,arg.concat(arg1))//that就是调用bind方法的函数对象,我们将上面预设参数和调用函数时传入的参数拼接起来形成真正传入的参数

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 中实现 js 原生轮播图的方法如下: 1. 在 Vue 组件中引入轮播图需要的图片,可以使用 require/import 等方式进行引入。 2. 在 Vue 组件中定义一个变量,用于存储当前轮播图的索引值。 3. 在 Vue 组件的 mounted 钩子函数中,使用 setInterval 函数定时更新当前轮播图的索引值。 4. 在 Vue 组件中使用计算属性或者 watch 监听当前轮播图的索引值,根据索引值切换轮播图。 5. 在 Vue 组件中使用 v-for 指令渲染轮播图列表,并使用 v-bind 绑定图片地址和样式。 下面是一个简单的示例代码: ```html <template> <div class="slider"> <div class="slider-container" v-bind:style="{ 'transform': 'translateX(' + (-currentIndex * 100) + '%)' }"> <div class="slider-item" v-for="(item, index) in sliderList" v-bind:key="index"> <img v-bind:src="item.url" v-bind:alt="item.title"> <div class="slider-title">{{ item.title }}</div> </div> </div> </div> </template> <script> export default { data() { return { currentIndex: 0, sliderList: [ { url: require('@/assets/images/slider-1.jpg'), title: 'Slider 1' }, { url: require('@/assets/images/slider-2.jpg'), title: 'Slider 2' }, { url: require('@/assets/images/slider-3.jpg'), title: 'Slider 3' } ] } }, mounted() { setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.sliderList.length }, 3000) } } </script> <style scoped> .slider { width: 100%; overflow: hidden; position: relative; } .slider-container { width: 300%; display: flex; transition: transform 0.5s ease-in-out; } .slider-item { width: 33.33%; display: flex; justify-content: center; align-items: center; } .slider-item img { width: 100%; } .slider-title { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; font-size: 14px; } </style> ``` 这是一个简单的轮播图组件示例,你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值