DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談Javascript中的函數、this以及原型
淺談Javascript中的函數、this以及原型
編輯:關於JavaScript     

關於函數

在Javascript中函數實際上就是一個對象,具有引用類型的特征,所以你可以將函數直接傳遞給變量,這個變量將表示指向函數“對象"的指針,例如:

function test(message){
     alert(message);
   }
   var f = test;
   f('hello world');

你也可以直接將函數申明賦值給變量:

var f = function(message){
     alert(message);   
   };
f('hello world');

在這種情況下,函數申明中可以省略函數名稱,因為此時名稱已經沒有任何意義,我們可直接通過變量f來調用函數。

通過Function類型,我們可以更好地理解函數即對象:

var f = new Function("message","alert(message);");
f('hello world');

關於this

this可以看成調用函數的實際作用域上下文。比較以下函數的執行結果:

function test(){
     this.property = 'hello world';

   }
   test();
   alert(window.property);  //由於在全局范圍內調用,test函數中的this實際指向全局對象(window)

   var obj = {};
   test.call(obj);   //通過call第一個參數指定執行上下文范圍,所以test函數中this指向obj實例。
   alert(obj.property);   

   var obj2 = {};
   obj2.test2 = test;   //將obj2實例方法test指向 全局test方法
   obj2.test2();      //由於是在obj2上調用test方法,所以test函數中的this也指向了obj2實例
   alert(obj2.property);

定義類型

在Javascript中可以定義構造函數,構造函數與一般函數沒有任何區別,在創建實例時,如果我們使用了new關鍵字,那麼這個函數就具有構造函數的特性,否則就是一般函數,如下所示,我們定義了一個Person類型:

function Person(){
   this.name = 'xfrog';
   this.Say = function(){
     alert(this.name);
   };
}

當使用new關鍵字時,可以創建一個新的Person對象實例:

var p1 = new Person();
p1.Say();

如果不使用new關鍵字,將直接執行Person函數,由於執行上下文為全局范圍,故name屬性和Say方法將被添加到window對象:

Person();
Say();
window.Say();

原型

注意上述Person的定義方式,當使用new來創建Person實例時,將會執行Person構造函數,也就是會聲明name屬性和Say方法,這樣可能產生效率問題,注意以下代碼:

var p1 = new Person();
var p2 = new Person();
var test = p1.Say == p2.Say;

比較p1和p2兩個Say函數指針,返回false,表示每個Person實例中的Say方法都是獨立的,而事實上Say函數的功能是完全一樣的,我們完全沒有必要為每個對象重新分配Say函數”對象“,如果Person實例很多,將會造成大量的內存耗用。

如果將Say函數提取出來放入全局執行范圍,似乎可解決次問題:

function Person(){
     this.name = 'xfrog';
     this.Say = say;   
   }

   function say(){
     alert(this.name);   
   }

   var p1 = new Person();
   var p2 = new Person();
   alert(p1.Say == p2.Say);
   p1.name = 'wang';
   p1.Say();

由於this始終和執行上下文相關,p1和p2實例中的Say方法中會正確地返回對應實例的name屬性。但是,使用此方式有違面向對象的思想,也失去了類型密封的原則。還會造成大量的全局函數。

為了解決這些缺點,Javascript引出了原型的概念,簡單理解,原型可以看成是類型的共享區,原型本身是一個對象,而對象中的屬性對於類型來說是共享的。Javascript中每個類型通過prototype屬性來表示原型,通過這個屬性可指定共享方法:

function Person(){

   }
   Person.prototype.name = 'xfrog';
   Person.prototype.Say = function(){
     alert(this.name);
   };

   var p1 = new Person();
   var p2 = new Person();
   alert(p1.Say == p2.Say);   //返回true

為什麼這裡可以通過p1.Say來訪問Say方法呢?這是因為ECMAScript標准規定了類型屬性的查找順序:先在類型的實例上查找,如果沒有則繼續在類型原型上查找,這一查找路徑采用短路算法,即找到首個後即返回,考慮如下代碼:

function Person(){
     this.name = 'wang';
   }

   Person.prototype.name = 'xfrog';
   Person.prototype.Say = function(){
     alert(this.name);
   }

   var p1 = new Person();
   p1.Say();   //將返回wang

上面提到prototype實際上是一個對象,那麼我們是否可以直接訪問呢? 在一些浏覽器實現(如Chrome、Fixfox等)的確可通過實例的__proto__屬性來訪問內部的prototype對象,這種特征表明Javascript引擎在每個對象的內部都是通過一個變量來保存對prototype的引用,這保證了prototype對應整個類型的實例來說是共享的,例如,你可在Chrome浏覽器內使用如下方式來訪問Say方法:

p1.__proto__["Say"]();

由於原型是一個對象,我們可以直接將一個對象賦值給prototype:

function Person(){

   }

   Person.prototype = {name:'xfrog', Say:function(){
     alert(this.name);
   }};

注意這個方式下,實際上是完全替換了Person的prototype,這與上面Person.prototype.name方式還是有細微差異的,這是因為任何類型,Javascript引擎都會添加默認的prototype,在這個prototype中包含一個對構造函數的引用,即原型對象屬性constructor,所以通常使用替代prototype方式時,我們需要手動加上constructor屬性:

Person.prototype = { 
     constructor: Person,
     name :'xfrog',
     Say:function(){
        alert(this.name);
     }
   }

注意,由於prototype對於整個類型是共享的,那麼在prototype中的引用類型可能會存在問題,前面的Say函數作為一個對象,也是引用類型,所以每個實例中的Say都指向原型對象中的同一個函數,這本身沒有問題,也是我們使用原型的初衷,但對於其他引用對象,可能結果並不是我們想要的:

function Person(){
   }

   Person.prototype = {
     name: 'xfrog',
     obj : { age: 18 },
     Say : function(){
        alert(this.obj.age);
     }
   };

   var p1 = new Person();
   var p2 = new Person();
   p1.obj.age = 20;
   p1.Say();
   p2.Say();

p2.Say返回的是20,這是因為obj屬性作為原型屬性是共享的,在內存中只存在一個實例,所以通過p1修改後,p2只能得到修改後的狀態。如果要避免此情況,可將obj屬性放到實例中:

function Person(){
     this.obj = { age: 18 };
   }

以上就是小編為大家帶來的淺談Javascript中的函數、this以及原型全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved