Js调用模式

js中,一共4中调用方式。需要注意的是,调用方式中,this的指向问题。

函数调用模式

this丢失,debug会提示未定义相应属性。按照规范,需要将this赋值给that

let myObj = {
    value : 1,
    double : function(){
        let that = this
        let _ = function (){
            that.value = that.value *2
            // this.value = this.value *2 // 内部函数的this被绑定错误值
        }
        _() // 函数调用模式
    }
}

myObj.double() // 方法调用模式
console.log(myObj.value) // 输出2

方法调用模式

函数调用模式中的myObj.double()就是方法调用模式,这时,这个函数被保存为对象的一个属性

构造器调用模式

通过new来声明,this会被绑定到一个连接prototype的新对象。结合原型链,可以实现很多有趣用法。

function Myobj(value){ // 注意命名规范
    this.value = value
}

Myobj.prototype.getValue = function(){
    return this.value
}

let myobj = new Myobj(1) // 构造器调用
console.log(myobj.getValue())

apply调用模式

apply:为了动态改变this而出现。结合闭包,可以更方便的实现原型继承

基于上面的例子,我们首先将getValue方法放入单独的文件./util.js下。

./util.js

exports =  module.exports = function getValue(arg){
    return `${this.value} \n我是参数:${arg} `
}

然后再在需要的文件中引入:

'use strict'
function Myobj(value){
    this.value = value
}
Myobj.prototype.getValue = function(arg){
    return require('./util').apply(this,[arg]) // apply调用模式
}

let myobj = new Myobj(1)
console.log(myobj.getValue(-1))

如此,优美地实现了组件化,代码逻辑和架构变得更加清晰。

关于applycall

相同点:

  • 作用一样:动态改变this

不同点:

  • apply调用方式:func.apply(obj,[arg1,arg2,...]),接受数组参数
  • call调用方式:func.call(obj,arg1,arg2,...),接受连续参数

欢迎技术交流,引用请注明出处。
个人网站:董沅鑫的个人网站
Github:godbmw

    原文作者:godbmw
    原文地址: https://www.jianshu.com/p/035f72a48d49
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞