2018-05-25 | UNLOCK

Js调用模式

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

  • 函数调用模式
  • 方法调用模式
  • 构造器调用模式
  • apply调用模式

函数调用模式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的新对象。结合原型链,可以实现很多有趣用法。

1
2
3
4
5
6
7
8
9
10
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

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

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

1
2
3
4
5
6
7
8
9
10
'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,...),接受连续参数

请针对 Disqus 开启代理