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))

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

关于apply和call

相同点：

• 作用一样：动态改变this

不同点：

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

欢迎技术交流，引用请注明出处。
个人网站：Yuan Xin
Github：godbmw