1. 程式人生 > 實用技巧 >JavaScript-Runoob-JS 高階教程 :JavaScript prototype(原型物件)

JavaScript-Runoob-JS 高階教程 :JavaScript prototype(原型物件)

ylbtech-JavaScript-Runoob-JS 高階教程 :JavaScript prototype(原型物件)

1.返回頂部
1、

JavaScript prototype(原型物件)

所有的 JavaScript 物件都會從一個 prototype(原型物件)中繼承屬性和方法

在前面的章節中我們學會了如何使用物件的構造器(constructor):

例項

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  
this.age = age; this.eyeColor = eyecolor; } var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green");
嘗試一下 »

我們也知道在一個已存在的物件構造器中是不能新增新的屬性的:

例項

Person.nationality = "English";
嘗試一下 »

要新增一個新的屬性需要在在構造器函式中新增:

例項

function Person(first, last, age, eyecolor) {
  
this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; this.nationality = "English"; }
嘗試一下 »

prototype 繼承

所有的 JavaScript 物件都會從一個 prototype(原型物件)中繼承屬性和方法:

  • Date物件從Date.prototype繼承。
  • Array物件從Array.prototype繼承。
  • Person物件從Person.prototype繼承。

所有 JavaScript 中的物件都是位於原型鏈頂端的 Object 的例項。

JavaScript 物件有一個指向一個原型物件的鏈。當試圖訪問一個物件的屬性時,它不僅僅在該物件上搜尋,還會搜尋該物件的原型,以及該物件的原型的原型,依次層層向上搜尋,直到找到一個名字匹配的屬性或到達原型鏈的末尾。

Date物件,Array物件, 以及Person物件從Object.prototype繼承。

新增屬性和方法

有的時候我們想要在所有已經存在的物件新增新的屬性或方法。

另外,有時候我們想要在物件的建構函式中新增屬性或方法。

使用 prototype 屬性就可以給物件的建構函式新增新的屬性:

例項

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";
嘗試一下 »

當然我們也可以使用 prototype 屬性就可以給物件的建構函式新增新的方法:

例項

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};
嘗試一下 » 2、
2.返回頂部
3.返回頂部
4.返回頂部
5.返回頂部
1、 https://www.runoob.com/js/js-object-prototype.html 2、
6.返回頂部
作者:ylbtech
出處:http://ylbtech.cnblogs.com/
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。