微信小程序之apply和call ( 附示例代码和注释讲解) apply call  bind

微信小程序开发交流qq群   173683895

 

相同点:作用是一样的,它们能劫持另外一个对象的方法,继承另外一个对象的属性;

js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改变函数运行时上下文,最终的返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined。

具体情况下如何选用bind()、call()、apply()  呢?

(1)如果不需要关心具体有多少参数被传入函数,选用apply();

(2)如果确定函数可接收多少个参数,并且想一目了然表达形参和实参的对应关系,用call();

(3)如果我们想要将来再调用方法,不需立即得到函数返回结果,则使用bind();

call()、apply() 、bind() 的区别:

(1)call()、apply()和bind()都是用来改变函数执行时的上下文,可借助它们实现继承;

(2)call()和apply()唯一区别是参数不一样,call()接收的是参数列表,而apply()则接收参数数组

(3)bind()是返回一个新函数,供以后调用,而apply()和call()是立即调用。

主要区别是call()和apply()在调用函数之后会立即执行,

而bind()方法调用并改变函数运行时上下文后,返回一个新的函数,供我们需要时再调用。

 

使用示例场景: apply和call在小程序中可以实现在公共方法js里面修改当前js的AppData的数据;

代码示例:

示例一: call使用  

const app = getApp()
var group = require('../group-template/group-template.js');
Page({
  onLoad: function (options) {
    var countDown_time = '00:21:03'
    group.Init.call(this, countDown_time); //登录
  }
})

注释:使用call把onLoad的this(当前对象)和 countDown_time 变量传给了 group-template.js 文件的Init函数里面。

//group-template.js

function Init(countDown_time) {
  var that = this;
  // 倒计时
  var time = countDown_time.split(':')
  var hhh = parseInt(time[0])
  var mmm = parseInt(time[1])
  var sss = parseInt(time[2])
  var Interval = setInterval(function () {
    if (sss > 0) {
      sss--
    } else {
      console.log('时间到')
      clearInterval(Interval)
    }
    if (sss == 0) {
      if (mmm > 0) {
        mmm--
        sss = 59;
      }
      if (mmm == 0 && hhh > 0) {
        hhh--
        sss = 59;
        mmm = 59;
      }
    }
    that.setData({
      sss: (sss < 10) ? '0' + sss : sss,
      mmm: (mmm < 10) ? '0' + mmm : mmm,
      hhh: (hhh < 10) ? '0' + hhh : hhh
    })
  }, 1000)
}
module.exports = {
  Init: Init
}

实现功能:通过setInterval和call实现了一个倒计时功能

 

示例一: apply使用 

const app = getApp()
var group = require('../group-template/group-template.js');
Page({
  data: {
    countDown_time: '00:21:03'
  },
  onLoad: function (options) {
    group.Init.apply(this, []); //登录
  }
})

//group-template.js

function Init() {
  var that = this;
  // 倒计时
  var time = that.data.countDown_time.split(':')
  var hhh = parseInt(time[0])
  var mmm = parseInt(time[1])
  var sss = parseInt(time[2])
  var Interval = setInterval(function () {
    if (sss > 0) {
      sss--
    } else {
      console.log('时间到')
      clearInterval(Interval)
    }
    if (sss == 0) {
      if (mmm > 0) {
        mmm--
        sss = 59;
      }
      if (mmm == 0 && hhh > 0) {
        hhh--
        sss = 59;
        mmm = 59;
      }
    }
    that.setData({
      sss: (sss < 10) ? '0' + sss : sss,
      mmm: (mmm < 10) ? '0' + mmm : mmm,
      hhh: (hhh < 10) ? '0' + hhh : hhh
    })
  }, 1000)
}
module.exports = {
  Init: Init
}

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗?打赏鼓励一下?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值