1、介紹

先介紹一下函數的調用模式有哪四種：

• 　函數調用模式，
• 　方法調用模式，
• 　構造函數調用模式，
• 　上下文調用模式；

在這里對于函數的調用模式，主要介紹每種調用模式的this的指向和返回值。

2、代碼分析

①、函數調用模式

下面的調用模式就是大家最熟悉的函數調用模式，而函數調用模式的this指向和返回值是什么呢？

function fn1 () { console.log(this); };fn1(); // 在調用函數fn1時，輸出的this的結果是Window

在上述代碼中，fn1也就是函數調用模式中的this是指向Window的，而返回值是由return決定。

可以得出以下結論(函數調用模式中)：

  a, this是指向Window的　

  b, 返回值是由return語句決定的，如果沒有return則表示沒有返回值

②、方法調用模式

var name = "james";var obj = {　 name : "wade", fn1 : function () {  console.log(this.name); }  };obj.fn1(); // 在調用obj中的fn1方法函數時，輸出的是wade

通過上面的代碼結果分析，會得到以下結論（方法調用模式中）：

  a, this 是指向調用該方法的對象

  b, 返回值還是由return語句決定，如果沒有return表示沒有返回值

③、構造函數調用模式

function Fn () { this.name = "james", this.age = 32, console.log(this)   };var fn1 = new Fn();　　// 在調用這段代碼的時候，輸出的是Fn {name: "james", age: 32}

通過上面的代碼結果分析，會得到以下結論（構造函數調用模式中）：

  a, this是指向構造函數的實例

  b, 如果沒有添加返回值的話，默認的返回值是this

但是如果手動添加返回值之后呢

function Fn1 () { this.name = "james"; return "wade" };var fn1 = new Fn1();console.log(fn1.name); // 這段代碼輸出的是 james;function Fn2 () { this.name = "james"; return [1,2,3]; };var fn2 = new Fn2();console.log(fn2.name); // 而這段代碼輸出的是undefined

而通過上面的代碼結果分析，優(yōu)化上面的結論：

  a, this是指向構造函數的實例

  b, 如果沒有添加返回值的話，默認的返回值是this

  c, 如果有返回值，且返回值是簡單數據類型（Number,String,Boolean??）的話，最后仍回返回this

  d, 如果有返回值，且返回值是復雜數據類型（對象）的話，最終返回該對象，所以上面的fn2是指向數組，所以fn2.name為undefined

④、上下文調用模式

function f1(){ console.log(this);}f1.call(null); // Windowf1.call(undefined); // Windowf1.call(123); // Number的實例f1.call("abc"); // String的實例f1.call(true); // Boolean的實例f1.call([1,2,3]); // Array的實例

通過上面的代碼結果分析，得出以下結論（上下文調用模式中）：

  a, 傳遞的參數不同，this的指向不同，this會指向傳入參數的數據類型

  b, 返回值是由return決定，如果沒有return表示沒有返回值。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！