js關於原型建構函式和原型鏈的理解

2021-06-22 13:34:39 字數 1768 閱讀 6192

js的物件導向方式的函式有很多種方式,其中有兩個比較重要的是兩種方式一是建構函式模式,一是原型模式。

1、建構函式模式如:

function persion(name,age) 

}var person1 = new person("alex",29);

person1.sayname(); //"alex"

var person2 = new person("xiaoming", 28);

person2.sayname(); //"xiaoming"

要建立乙個person的例項,大致分為幾步:

1) 使用new建立乙個新物件

2)將建構函式的作用域賦給新物件(this指向當前物件)

3)執行建構函式中的**

4)返回新物件

優點:結構簡單

缺點:每個方法都要在每個例項上建立一遍

2、原型模式如:

每個函式都有乙個prototype屬性,即原型屬性,它是乙個指標,指向的是乙個可以供函式的例項共享屬性和方法的的物件。

function persion(name,age) 

person.prototype.name = "alex";

person.prototype.age= 29;

person.prototype.sayname = function()

var person1 = new person();

person1.sayname(); //"alex"

var person2 = new person();

person2.sayname(); //"alex"

建立乙個函式就會有乙個prototype的屬性,指向乙個原型物件。而原型物件會有乙個constructor的屬性,包含乙個指標,又指向了prototype所在的函式。如:

因此,基於person的兩個例項物件都共享了person的原型物件的屬性和方法,因為他們指向了同乙個物件。

例項在呼叫屬性的時候首先會在自己的例項中去搜尋,如果沒有找到則繼續去原型物件中搜尋。所以我們給乙個例項增加乙個屬性或者方法時,這個屬性或方法會遮蔽原型物件中同名的屬性或者方法。

原型的另一種簡單寫法:

function person() 

person.prototype =

}

此方法相當於重寫了原型物件,特別需要注意增加constructor屬性。

優點:可以讓所有例項共享屬性和方法

缺點:優點也是缺點,當例項操作某乙個屬性值時,別的例項因為訪問的是同乙個原型物件,所以取到的是變化後的值。

3、組合使用構造模式和原型模式

建構函式模式用於例項的屬性,原型模式用於方法和共享的屬性。這樣,每個例項有乙份例項屬性的副本,同時共享方法的引用。

function person(name,age) 

person.prototype =

}var person1 = new person("alex",29);

var person2 = new person("xiaoming",28);

person1.sayname();//"alex";

person2.sayname();//"xiaoming"

js的原型 原型鏈 建構函式

js裡一切皆物件。有js自己內部的物件,還有使用者自定義的物件。所有的物件都是從原型上衍生出來的。原型本身也是物件,原型鏈的最高層就是object。兩個重要的屬性 prototype,proto 所有的物件都有 proto 屬性,通過.proto 一層一層,最後到達object,object的 pr...

js 建構函式和原型鏈

比較new和object.create 建構函式 new 保留原建構函式屬性 object.create 丟失原建構函式屬性 原型鏈new 原建構函式prototype屬性 object.create 原建構函式 物件 本身 作用物件 new function object.create funct...

javascript原型和原型鏈,建構函式和例項

原型 建構函式 就是工廠,原型的例項就是工廠按照圖紙生成的工具 比如汽車 原型鏈 隱式的 就是生成的工具所具有的功能,而功能是工具的屬性,生成什麼樣的工具是由工廠 建構函式 決定的,圖紙是有工廠和客戶共同決定的 var ca ctory function options this.stop func...