JavaScript中的原型鏈舉例說明
阿新 • • 發佈:2018-11-10
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小節)