函數是JavaScript中很重要的一個語言元素，並且提供了一個function關鍵字和內置對象Function，下麵是其可能的用法和它們之間的關係。

function使用方式

 var foo01 = function() //或 function foo01()
 {  
     var temp = 100;  
     this.temp = 200;  
     return temp + this.temp;  
 }  
 alert(typeof(foo01));  // function 
 alert(foo01());          // 300 

最普通的function使用方式，定一個JavaScript函數。兩種寫法表現出來的運行效果完全相同，唯一的卻別是後一種寫法有較高的初始化優先順序。在大擴號內的變數作用域中，this指代foo01的所有者，即window對象。

new function()使用方式

var foo02 = new function() {  
     var temp = 100;  
     this.temp = 200;  
     return temp + this.temp;  
 }  
 alert(typeof(foo02));    //object 
 alert(foo02.constructor());   //300   

//等價於

var temp =  function() {  
     var temp = 100;  
     this.temp = 200;  
     return temp + this.temp;  
 }  
var foo02 = new temp();    //沒有形參，可以省略圓括弧 var foo02 = new temp;

alert(typeof(foo02));    //object 
alert(foo02.constructor());   //300   

這是一個比較puzzle的function的使用方式，好像是定一個函數。但是實際上這是定一個JavaScript中的用戶自定義對象，不過這裡是個匿名類。這個用法和函數本身的使用基本沒有任何關係，在大擴號中會構建一個變數作用域，this指代這個作用域本身。（理解為實例化匿名類）

new Function()使用方式

var foo3 = new Function('var temp = 100; this.temp = 200; return temp + this.temp;');  

 alert(typeof(foo3));  //object
 alert(foo3());           //300

使用系統內置函數對象來構建一個函數，這和方法一中的第一種方式在效果和初始化優先順序上都完全相同，就是函數體以字元串形式給出。

Function()使用方式

var foo4 = Function('var temp = 100; this.temp = 200; return temp + this.temp;');  

 alert(typeof(foo4));     //function
 alert(foo4());              //300

這個方式是不常使用的，效果和方法三一樣，不過不清楚不用new來生成有沒有什麼副作用，這也體現了JavaScript一個最大的特性：靈活！能省就省。（不推薦）

註：如果構造函數沒有形參，javascript構造函數調用的語法是允許省略實參列表和圓括弧的。凡是沒有形參的構造函數調用都可以省略圓括弧

var o = new Object(); //等價於 var o = new Object;

-------------華麗的分割線-------------

javascript在用到對象時，完全沒有類的概念，但是編程的世界里，無奇不有，我們卻可以通過function構造出一種假想的類，從而實現javascript中類的構造。

比如，我們通過下麵的方法來構造一個類：

//java
class Book {
    private String name;
    private double price;
    public Book(name,price) {this.name=name;this.price=price;}
    public void setName(String name) { this.name = name;}
    public void setPrice(double price) {this.price = price;}
    public String getInfo() {...} 
}
Book book1 = new Book('java',13.3);

//javascript
function Book(name,price) {
    this.name = name;
    this.price = price;
    this.setName = function(name) {this.name = name;};
    this.setPrice = function(price) {this.price = price};
    this.getInfo = function() {return this.name + '  ' + this.price;};
}
var book1 = new Book('java',13.3);

Function是由function關鍵字定義的函數對象的原型

在javascript中，多出了一個原型的概念。所謂原型，其實就是一個對象的本質，但複雜就複雜在，原型本身也是對象，因此，任何一個對象又可以作為其他對象的原型。Function就相當於一個系統原型，可以把它理解為一種“基本對象類型”，是“對象”這個概念範疇類的基本數據類型。除了Function之外，其實還有很多類似的首字母大寫的對象原型，例如Object, Array, Image等等。有一種說法是：javascript中所有的一切都是對象（除了基本數據類型，其他的一切全是對象），所有的對象都是Object衍生出來的。

極其重要的prototype概念

prototype的概念在javascript中極其重要，它是javascript中完成上面說的“一切皆對象”的關鍵。有了prototype，才有了原型，有了原型，才有了javascript五彩繽紛的世界（當然，也有人說是雜亂的）。我們可以這樣去理解prototype：世界上本沒有javascript，上帝說要有Object，於是有了Object，可是要有Function怎麼辦？只需要對Object進行擴展，可是如何擴展？只需要用prototype……當然，這是亂扯的，不過在javascript中，只要是function，就一定會有一個prototype屬性。實際上確實是這樣

1 Function.prototype.show = function() {...}

在原型的基礎上通過prototype新增屬性或方法，則以該對象為原型的實例化對象中，必然存在新增的屬性或方法，而且它的內容是靜態不可重載的。原型之所以被稱為原型，可能正是因為這種不可重載的特質。

比如上面的這段代碼，會導致每一個實例化的function，都會具備一個show方法。而如果我們自己創建了一個類，則可以通過prototype將之轉化為原型：

function Book(name,price) {
    this.name = name;
    this.price = price;
    this.setName = function(name) {this.name = name;};
    this.setPrice = function(price) {this.price = price};
    this.getInfo = function() {return this.name + '  ' + this.price;};
}
Book.prototype.run = function(price) {console.log(this.price)};
var book1 = new Book('java',13.3);
book1.run();

這時，對於book1而言，Book就是原型，而該原型擁有一個run的原始方法，所以無論實例化多少個Book，每一個實例化對象都有run方法，而且該方法是不能被重載的，通過book1.run = function(){}是無效的。

為了和其他語言的類的定義方法統一，我們可以將這種原型屬性在定義類的時候，寫在類的構造裡面：

function Book(name,price) {
    this.name = name;
    this.price = price;
    this.setName = function(name) {this.name = name;};
    this.setPrice = function(price) {this.price = price};
    this.getInfo = function() {return this.name + '  ' + this.price;};
    Book.prototype.run = function(price) {console.log(this.price)};  //寫在類的構造裡面
}
//Book.prototype.run = function(price) {console.log(this.price)};
var book1 = new Book('java',13.3);
book1.run();

new Function()是函數原型的一個實例化

在理解了Function原型的概念之後，再來看new Function()就顯得很容易了。首先來看下我們是怎麼使用這種奇特的寫法的：

var log=new Function('log','console.log(log)');
log('hello javascript');   //hello javascript

其實等價於
function log(log){
     console.log(log);
}
log('hello javascript');//hello javascript

new Function(參數1,參數2,…,參數n,函數體)，它的本意其實是通過實例化一個Function原型，得到一個數據類型為function的對象，也就是一個函數，而該變數(log)就是函數名(理解為：new Function實例化一個Function原型，得到 一個匿名函數 ，然後賦值給變數log)。

this在這類function中的指向

this在javascript中真的是無法讓我們捉摸透徹。但是有一個小竅門，就是：一般情況下，this指向的是當前實例化對象，如果沒有找到該對象，則是指向window。從使用上來講，我們應該排除new Function的討論，因為它和我們常用的函數聲明是一致的。

普通的函數中this的指向

函數聲明的時候，如果使用了this，那麼就要看是把該函數當做一個對象加以返回，還是以僅執行函數體。普通函數執行時，我們完全沒有引入對象、類這些概念，因此，this指向window。通過代碼來看下：

var msg;
function message(msg) {
    this.msg = msg;
}
message('ok');
alert(msg);

首先是聲明一個函數message，在函數中this.msg實際上就是window.msg，也實際上就是代碼開頭的msg。因此，當執行完message(‘ok’)的時候，開頭的全局變數msg也被賦值為ok。

通過function構造類時this的指向

如果function被構造為一個類，那麼必然存在該類被實例化的一個過程，如果沒有實例化，那麼該類實際上並沒有在程式中被使用。而一旦實例化，那麼this將指向實例化的對象。

var age = 3;
var cat1 = new function() {
    this.name = 'Tom';
    this.age = 2;
    this.weight = function(age) {
        var age = age * 2;
        var _age = this.age * 2;
        return 'weight by age:' + age + '; weight by this.age:' + _age;
    }(this.age);
    this.eye = new function() {
        this.size = '1.5cm';
        this.color = 'red';
    };
    this.catching = function(mouse) {
        return this.name + ' is catching ' + mouse;
    };
};
alert(cat1.weight);
alert(cat1.eye.color);
alert(cat1.catching('Jerry'));

上面代碼中標記了4處紅色的this的使用。根據我們的原則，this指向實例化對象，我們來對每一個this進行分解。

首先是cat1.weight，我使用了function(){}()，直接利用貓咪的年齡進行計算得出體重返回給weight屬性。

第一個this.age出現在function(){}(this.age)，這個this.age實際上是一個傳值過程，如果你對我之前分析function(){}()比較瞭解的話，應該知道，this.age實際上是和前面this.age = 2指同一個，這裡的this.age的this，首先要去找它所在的function，然後看這個function是否被實例化，最後確認，確實被實例化為cat1，因此this=cat1。

第二個this.age出現在function(){this.age}()。同樣，你先需要對function(){}()再次深入瞭解，實際上，function(){}()就是執行一個函數而已，我們前面提到了，普通函數執行中this=window，所以，這裡的this.age實際上是var age = 3。

第三個this.color出現在new function(){this.color}，這裡就比較好玩，由於有一個new，實際上也被實例化了，只不過是對匿名類的實例化，沒有類名，而且實例化僅可能出現這一次。因此，this.color的this要去找new function的主人，也就是this.eye，而this.eye的this=cat1，所以cat1.eye.color=’red’。

第四個this.name出現在function(){this.name}，它出現在cacthing方法中，它既不是普通的函數執行，也不是實例化為對象，而是正常的類中的方法的聲明，因此this指向要去找它所在的function被實例化的對象，也就是cat1。

小結

本文雖然講了很多，但核心點實際上還是落在javascript的面向對象這個點上。javascript中雖然沒有明確的class的概念，那是因為它首先基於type這樣的基礎概念，並強調一切皆對象的這種思想。如果從哲學上講，javascript真正符合道生一，一生二，二生萬物的原則。不過本文沒有提到和繼承相關的內容，所有解釋也是我自己的一種理解方式，不代表真正的原理，讀者請自己通過其他途徑進行學習。

下篇轉載自：https://www.cnblogs.com/pizitai/p/6427433.html