1. 程式人生 > >JS中的原型--Prototypes

JS中的原型--Prototypes

開發 調用 ava 可見 通過 屬性綁定 color prop 因此

一、對象中的原型_proto_

  JavaScript中的對象是基於原型的。原型是其他對象的基礎,它定義並實現了一個新創建的對象必須包含的成員列表。原型對象為所有對象實例所共享

對象通過一個內部屬性綁定到它的原型。在FireFox、Safari、和Chrome瀏覽器中,這個屬性_proto_對開發者可見。一旦你創建一個內置對象(比如Object和Array)的實例,它們就會自動擁有一個Object實例作為原型。

因此,對象可以擁有兩種成員類型:實例成員和原型成員。實例成員直接存於對象實例中,原型對象則從對象原型繼承而來。

技術分享圖片

這就是為什麽明明沒有為對象定義 toString 方法,但是卻可以在對象上調用此方法的原由。因為toString()是由對象person繼承來的原型成員。

同樣可以用 hasOwnProperty() 方法來判斷對象是否包含特定的實例成員。要確定對象是否包含特定屬性,可以用 in 操作符。

var book = {
    title: "High Performance JavaScript",
    author: "Nicholas C.Zakas"
}

console.log(book.hasOwnProperty(‘title‘)); //true
console.log(book.hasOwnProperty(‘toString‘)); //false

console.log("title" in book); //true
console.log("toString" in
book); //true

使用 in 操作符時,兩種情況都會返回true,因為它既會搜索實例也會搜索原型

二、函數中的原型prototype

  每個函數創建後都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,這個對象包含了基於此函數創建的所有實例共享的屬性和方法。換句話說,不必在構造函數中定義對象實例的信息,而是可以將這些信息直接添加到原型對象中。(若原型對象中的值發生變化,繼承了此原型對象的實例的對應值也會發生變化。不過如果該實例的某個繼承來的屬性被已經被重新賦值的話,便不會變化)。

//構造函數的兩種寫法
//1. 構造函數中的 this 綁定的是實例化後的對象,否則指向的是全局變量window
var Person = function(){ this.name = ‘Kuro-P‘; this.age = 22; this.say = function(){ console.log(‘Hello‘); } } var p1 = new Person(); console.log(p1.name); //Kuro-P Person(); console.log(name); //Kuro-P //2.寫到原型對象上,與第一種寫法作用相同,只不過是不實例化時,全局中不存在對應屬性 var Person = function(){ }
Person.prototype.name
= ‘Kuro-P‘; Person.prototype.age = 22; Person.prototype.say = function(){ console.log(‘Hello‘); } var p2 = new Person(); console.log(p2.name); //Kuro-P Person(); console.log(name); //undefined

*註:本篇總結是基於《JavaScript高級程序設計》中第六章和《高性能JavaScript》中第二章

JS中的原型--Prototypes