1. 程式人生 > >js的作用域

js的作用域

修改 保持 訪問 target 使用 一個 www. 實例變量 我們

私有變量、函數(註意沒有用this)

在具體說prototype前說幾個相關的東東,可以更好的理解prototype的設計意圖。之前寫的一篇JavaScript 命名空間文章中提到過JavaScript的函數作用域,在函數內定義的變量和函數如果不對外提供接口,那麽外部將無法訪問到,也就是變為私有變量和私有函數。

function Obj(){
                var a=0; //私有變量
                var fn=function(){ //私有函數

                }
            }

這樣在函數對象Obj外部無法訪問變量a和函數fn,它們就變成私有的,只能在Obj內部使用,即使是函數Obj的實例仍然無法訪問這些變量和函數

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

靜態變量、函數

當定義一個函數後通過 “.”為其添加的屬性和函數,通過對象本身仍然可以訪問得到,但是其實例卻訪問不到,這樣的變量和函數分別被稱為靜態變量和靜態函數,用過Java、C#的同學很好理解靜態的含義。

function Obj(){

            }

            Obj.a=0; //靜態變量

            Obj.fn=function(){ //靜態函數
} console.log(Obj.a); //0 console.log(typeof Obj.fn); //function var o=new Obj(); console.log(o.a); //undefined console.log(typeof o.fn); //undefined

實例變量、函數

在面向對象編程中除了一些庫函數我們還是希望在對象定義的時候同時定義一些屬性和方法,實例化後可以訪問,JavaScript也能做到這樣

function Obj(){
                
this.a=[]; //實例變量 this.fn=function(){ //實例方法 } } console.log(typeof Obj.a); //undefined console.log(typeof Obj.fn); //undefined var o=new Obj(); console.log(typeof o.a); //object console.log(typeof o.fn); //function
function Obj(){
                this.a=[]; //實例變量
                this.fn=function(){ //實例方法

                }
            }

            var o1=new Obj();
o1.a.push(
1); o1.fn={}; console.log(o1.a); //[1] console.log(typeof o1.fn); //object var o2=new Obj(); console.log(o2.a); //[] console.log(typeof o2.fn); //function

上面的代碼運行結果完全符合預期,但同時也說明一個問題,在o1中修改了a和fn,而在o2中沒有改變,由於數組和函數都是對象,是引用類型,這就說明o1中的屬性和方法與o2中的屬性與方法雖然同名但卻不是一個引用,而是對Obj對象定義的屬性和方法的一個復制。

這個對屬性來說沒有什麽問題,但是對於方法來說問題就很大了,因為方法都是在做完全一樣的功能,但是卻又兩份復制,如果一個函數對象有上千和實例方法,那麽它的每個實例都要保持一份上千個方法的復制,這顯然是不科學的,這可腫麽辦呢,prototype應運而生。

prototype

無論什麽時候,只要創建了一個新函數,就會根據一組特定的規則為該函數創建一個prototype屬性,默認情況下prototype屬性會默認獲得一個constructor(構造函數)屬性,這個屬性是一個指向prototype屬性所在函數的指針,有些繞了啊,寫代碼、上圖!

function Person(){

            }

技術分享圖片

根據上圖可以看出Person對象會自動獲得prototyp屬性,而prototype也是一個對象,會自動獲得一個constructor屬性,該屬性正是指向Person對象。

當調用構造函數創建一個實例的時候,實例內部將包含一個內部指針(很多瀏覽器這個指針名字為__proto__)指向構造函數的prototype,這個連接存在於實例和構造函數的prototype之間,而不是實例與構造函數之間。

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

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person(‘Byron‘);
            var person2=new Person(‘Frank‘);

技術分享圖片

Person的實例person1中包含了name屬性,同時自動生成一個__proto__屬性,該屬性指向Person的prototype,可以訪問到prototype內定義的printName方法,大概就是這個樣子的

技術分享圖片

js的作用域