江苏龙网

  1. 首页 > 生活 > >

javascript函数的调用模式有哪几种

函数是JavaScript世界里的第一公民，换句话来说，就是我们如果可以精通JavaScript函数的使用，那么对JavaScript的运用可以更游刃有余了。熟悉JavaScript的人应该都知道，同样的函数，以不同的方式调用的话，受影响最大的应该是 this 。下面我们来说说JavaScript函数的各种调用模式。
一、普通函数的调用模式
　　所谓普通函数的调用模式，也是JavaScript函数的最简单的一种调用模式，直接就是函数名后接一个 () 实现调用，看下面代码：
function func(){ console.log(this === window); //true}func();　　上面代码，我们用function关键字声明了一个 func 函数，并且在函数体内打印 this===window，然后我们直接调用函数func，我们可以看到控制台是直接打印出 true ，也就是说，函数的这种普通调用模式，函数体内的 this 是指向全局环境 window 的。不清楚这点的同学，可以能会遇到这样的一个bug：
var color = \u0026#39;gg\u0026#39;;var obj = { color : \u0026#39;red\u0026#39;, show : function(){ function func1(){ console.log(this.color); //gg } func1(); }}obj.show();　　我们在全局环境下声明了一个变量 color 和一个对象 obj ，在对象 obj 里面我们还声明了一个 color 属性 为 \u0026#39;red\u0026#39;，一个 show 方法。而且在 show 方法里面呢，我们还声明了一个函数 func1 并且调用了 func1，func1 的作用是打印 this.color。最后我们运行代码 obj.show(); 调用obj里面的show方法。不清楚函数的普通调用模式的特点的同学可能会认为此时在控制台答应出来的会是 \u0026#39;red\u0026#39; 。实际上此时在控制台答应出来的应该是 gg 。因为函数 func1 的调用模式是 普通函数调用模式（即使它是在 obj 的 show 方法里面调用的），所以此时函数体内的 this 是指向 全局环境window 的，所以就打印了全局环境下的变量 color 。
　　可能有些同学会问：如果我们希望 func1 函数打印出来的是 \u0026#39;red\u0026#39; 呢，应该怎么改？其实很简单，因为 obj.color 才是 \u0026#39;red\u0026#39; ，所以我们只需要把 指向 obj 的 this 引入到函数 func1 里面就行了：
var color = \u0026#39;gg\u0026#39;;var obj = { color : \u0026#39;red\u0026#39;, show : function(){ var that = this; function func1(){ console.log(that.color); //red } func1(); }}obj.show();　在上面的代码中，因为 show 里面的 this 指向 obj 的，所以我们在 show 里面声明一个变量 that = this;用来把指向 obj 的 this 引入到 func1 中，然后再把 func1 函数体内的 this.color 改为 that.color ,此时在控制台打印出来的就是我们想要的 \u0026#39;red\u0026#39; 了。
　　可能现在又有同学会问：为什么 show 里面的 this 是指向 obj 的呢？这就是我们要说的JavaScript函数的第二种调用模式：方法调用模式
二、方法调用模式
　　方法调用模式，简单来说就是把一个 JavaScript函数作为一个对象的方法来调用，当一个函数被保存为一个对象的属性是，我们就把它称为方法，例如上文的 obj 对象里的 show ，当一个方法被调用时，函数体里面的 this 就会绑定到这个对象，例如上文的 show 里面的 this 。方法调用模式也很容易辨别：obj.show()，对象名 . 属性名 () ；代码的话可以参考上文的 obj 代码 ，博主就不多写了。记住：方法的调用是可以在函数体内通过 this 访问自己所属的那个对象的。


推荐阅读


上一篇：怎样在上海流浪

下一篇：怎样评价准星云学这家公司?