1、介紹

先介紹一下函數(shù)的調(diào)用模式有哪四種：

• 　函數(shù)調(diào)用模式，
• 　方法調(diào)用模式，
• 　構造函數(shù)調(diào)用模式，
• 　上下文調(diào)用模式；

在這里對于函數(shù)的調(diào)用模式，主要介紹每種調(diào)用模式的this的指向和返回值。

2、代碼分析

①、函數(shù)調(diào)用模式

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

function fn1 () {
 console.log(this); 
};
fn1(); // 在調(diào)用函數(shù)fn1時，輸出的this的結(jié)果是Window

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

可以得出以下結(jié)論(函數(shù)調(diào)用模式中)：

  a, this是指向Window的　

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

②、方法調(diào)用模式

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

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

  a, this 是指向調(diào)用該方法的對象

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

③、構造函數(shù)調(diào)用模式

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

通過上面的代碼結(jié)果分析，會得到以下結(jié)論（構造函數(shù)調(diào)用模式中）：

  a, this是指向構造函數(shù)的實例

  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

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

  a, this是指向構造函數(shù)的實例

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

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

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

④、上下文調(diào)用模式

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

通過上面的代碼結(jié)果分析，得出以下結(jié)論（上下文調(diào)用模式中）：

  a, 傳遞的參數(shù)不同，this的指向不同，this會指向傳入?yún)?shù)的數(shù)據(jù)類型

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！