javascript 中function(){},new function(),new Function(),Function 摘錄

笠航發表於2018-09-07
JavaScriptFunction

函式是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

相關文章