微信小程序之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
}