首页手记 Js调用模式

Js调用模式

标签：

JavaScript

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

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