1. 程式人生 > >JavaScript中的原型鏈舉例說明

JavaScript中的原型鏈舉例說明

JavaScript中關於原型鏈的概念十分重要。原型鏈,即例項物件與其原型間的關係鏈。

首先,要理解什麼是物件的原型?如何建立物件的原型?

每個物件都有預設的預設屬性prototype,其中包含兩個屬性constructor和_proto_,其中constructor為該物件的型別,一般情況下為函式構造器,_proto_即可理解為該物件的原型,為Object(構造器).prototype。請看舉例:

function Foo(){}
Foo.prototype.a=1;
console.log(Foo.constructor);
console.log(Foo.prototype);

 

 使用new關鍵字建立的物件x,其原型為建立的構造器型別,繼承原構造器的prototype上的屬性a:

var x=new Foo();
console.log(x.constructor);
console.log(x.a);

 

建立對物件原型可用new關鍵字,還可使用Object.creat方法建立,請看舉例:

function Person(name,age){
	this.name=name;
	this.age=age;
	}
	Person.prototype.LEGS_NUM=2;
	Person.prototype.ARMS_NUM=2;
	Person.prototype.hi=function(){
		  console.log(this.name+" is saying hi to you.");
		}
	Person.prototype.walk=function(){
		  console.log(this.name+" is walking.");
		}
	
function Student(name,age,className){
	  Person.call(this,name,age);
	  this.className=className;
	  }
	  
	  Student.prototype=Object.create(Person.prototype);
	  Student.prototype.constructor=Student;
	  
	  Student.prototype.hi=function(){
		    console.log("Student "+this.name+" is saying hi to you.");
		  }
	  Student.prototype.learn=function(a){
		    console.log("Student "+this.name+" is learning "+a+" hardly.");
		  }
	
var Cindy=new Student("Cindy",22,"Lighting");
console.log(Cindy.LEGS_NUM);
console.log(Cindy.ARMS_NUM);
Cindy.learn("Programming");
Cindy.hi();
Cindy.walk();

var Lynn=new Person("Lynn",22);
Lynn.hi();
Lynn.walk();

 

 其中Student.prototype=Object.create(Person.prototype);
      Student.prototype.constructor=Student;

即是將Student的_proto_與Person.prototype連線,也就是將Person型別作為Student型別物件的原型,Student型別物件可間接獲取Person.prototype上的屬性。

這樣,為物件建立原型鏈關係,可便於物件訪問原型的Object.prototype上的相關屬性。

(以上內容參考慕課網Bosn老師的JavaScript深入淺出第8-1,8-2小節)