首頁 > web前端 > js教程 > 什麼是JavaScript對象?如何建立物件程式碼詳解

什麼是JavaScript對象?如何建立物件程式碼詳解

伊谢尔伦
發布: 2017-07-24 15:36:36
原創
1370 人瀏覽過

物件是什麼

從JavaScript定義上講物件是無序屬性的集合,其屬性可以包含基本值、物件或函數。也就是說物件是一組沒有特定順序的屬性,每個屬性會對應到一個值上,是一組鍵值對,值可以是資料或物件。

最簡單的物件
JavaScript的一對花括號{}就可以定義一個對象,這樣的寫法實際上和呼叫Object的建構子一樣

var obj={};
var obj2=new Object();
登入後複製

這樣建構出來的物件只包含一個指向Object的prototype的指針,可以使用一些valueOf、hasQwnProperty等方法,沒有多大實際作用,自訂物件嘛總是要有一些自訂的屬性、方法神馬的。

var obj={};
            obj.a=0;
            obj.fn=function(){
                alert(this);
            }
            var obj2={
                a:0,
                fn:function(){
                    alert(this);
                }
            }
登入後複製

可以在定義完對象後通過”.”為其添加屬性和方法,也可以使用字面量賦值方法在定義對象的時候為其添加屬性和方法,這樣創建的對象,其方法和屬性可以直接使用物件引用,類似於類別的靜態變數和靜態函數,這樣創建物件有一個明顯缺陷——在定義大量物件的時候很費力,要一遍遍的寫入幾乎是重複的程式碼。

又是function登場的時候,JavaScript中function就是個對象,在創建對象的時候打可以拋開上面createObj方法,直接使用function作為對象,怎麼實現復用呢,這就在於function作為對象的特殊性了。

1. function可以接受參數,可以根據參數來建立相同類型不同值的物件

2. function作為建構子(透過new運算子呼叫)的時候會傳回一個對象,在貧下中農版jQuery中提到一些建構子的基本知識,簡單複製一下

建構子的回傳值分為兩種情況,當function沒有return語句或return回一個基本型別(bool, int,string,undefined,null)的時候,返回new 創建的一個匿名對象,該對象即為函數實例;如果function體內return一個引用類型對象(Array,Function,Object等)時,該對象會覆蓋new創建的匿名物件作為傳回值。

3. 那麼使用function怎麼解決類型識別問題呢,每個function實例物件都會有一個constructor屬性(也不是“有”,而是可以對應),這個屬性就可以指示其構造是誰,也可以使用instanceof 操作符來做判斷物件是否為XXX的實例。

程式碼如下:

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            console.log(person1.constructor==Person);//true
            console.log(person1 instanceof Person); //true
登入後複製

這樣就完美了吧,也不是!雖然建構子可以是物件有型,但物件的每個實例中的方法都要重複一遍!

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.fn==person2.fn);//false
登入後複製

看看看,雖然兩個實例的fn一模一樣,但是卻不是一回事兒,這如果一個function物件有一千個方法,那麼它的每個實例都要包含這些方法的copy,很讓內存無言。

究竟有沒有一種近乎完美的建構物件的方式,及不用做重複工作,又有型,物件通用方法又不必重複?其實可以發現使用function已經距離要求和接近了,只差那麼一點兒——需要一個所有function對象的實例共享的容器,在這個容器內存發實例需要共享的屬性和方法,正好這個容器是現成的— —prototype,不了解prototype的同學可以看看JavaScript prototype

function Person(name){
                this.name=name;
            }
            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.printName==person2.printName);//true
登入後複製

這樣每個Person的實例都有自己的屬性name,又有所有實例共享的屬性share和方法printName,基本問題都解決了,對於一般的物件處理就可以始終這個有型又有愛的創建物件模式了。

以上是什麼是JavaScript對象?如何建立物件程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板