首頁  >  文章  >  web前端  >  對Js OOP程式設計 創建物件的詳細解讀

對Js OOP程式設計 創建物件的詳細解讀

亚连
亚连原創
2018-05-19 16:33:231310瀏覽

下面我就為大家帶來一篇對Js OOP程式設計 創建物件的一些全面理解。現在就分享給大家,也給大家做個參考。

物件導向是一種對現實世界理解和抽象的方法,是電腦程式設計技術發展到某個階段後的產物。

物件的意思

物件可以是汽車,人,動物,文字,表單或任何存在的事物等等。

物件有:

  屬性-------物件的某些特定的性質。
  方法-------物件能做的事情。
  事件-------能回應發生在物件上的事情。

我們可以透過創造一個人的物件來理解物件導向

人:

  兩手,兩腳,一個頭,還可以跑動。

  手,腳,頭,是人的屬性,跑動是人的方法。

首先,我們來用最簡單的方法創建一個對象

var person = {
      head: "one",
      hand: "two",
      foot: "two",
      run : function(){
        console.log("running");
      }
    }

這個方法一點都不實用,因為它是創建一個單獨的對象,,而這個對象和任何常見的數據結構沒有任何聯繫。

然後,我們用建構函式的方式建立一個物件

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two",
      this.run = function(){
        alert("running");
      }
    }
    var Joan = new Person();
    document.write(Joan.run())// "running"

這是用建構函式建立的對象,然後我們再加上一行程式碼看看

var Niki = new Person();
    alert(Joan==Niki) //false;

是的,現在創建了是兩個不同的物件實例。

在JavaScript中的每個函數都有一個prototype的屬性.如果某個函數被用作構造函數,則這個屬性會被自動透過new呼叫建立物件的原型

console.log(Joan)

可以看到有一個__proto__:Person,其中__proto__是Joan的原型鏈.它是指向Person的原型.

JS在創建物件(不論是普通物件還是函數物件)的時候,都有一個叫做__proto__的內建屬性,用來指向創建它的函數物件的原型物件prototype。

關於原型鏈的一些理解,在JavaScript高級程式設計 一書中寫的非常詳細。有興趣的可以去看看,網路上也有pdf的文件可以找到。不過建議還是買本書,支持原版嘛。

然後對prototype這個原型屬性的任何更改能夠應用於用new Person()構造的每一個實例對象,不管它是在更改之前還是更改後創建.為Person.prototype 添加新函數.具體如下:

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two"
    }
    Person.prototype.run = function(){
      alert("running");
    }
    var Joan = new Person();
    Joan.run()// "running"
    alert(Joan.__proto__===Person.prototype)//'true'

可以看到,在原型中建立方法是可以呼叫的,同時Joan的原型鍊是指向Person的原型的。

再看:

var Niki = new Person();//"runing"
     Person.prototype.run = function(){
       alert("running running")
     }
     Joan.run()//"running running"
     Niki.run()//"running running"

看,修改Person的原型方法,所有被new Person()創建的物件實例中的方法都被修改了,因為所有實例中共用的是同一個原型方法run。這就是原型的一種應用。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

javascript判斷回文數詳解及實作程式碼(圖文教學)

詳細為你解讀JavaScript字元集編碼與解碼(圖文教學)

原生js實作節日時間倒數功能(附上程式碼)

#

以上是對Js OOP程式設計 創建物件的詳細解讀的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn