首頁 > web前端 > js教程 > js原型鏈與繼承解析(初體驗)_javascript技巧

js原型鏈與繼承解析(初體驗)_javascript技巧

WBOY
發布: 2016-05-16 09:00:25
原創
2455 人瀏覽過

先定義一個物件obj,該物件的原型為obj._proto_,我們可以用es5中的getprototypeof這一方法來查詢obj的原型,我們透過判斷obj的原型是否與object.prototype相等來證明是否存在obj的原型,答案回傳true,所以存在。然後我們定義一個函數foo(),任何一個函數都有它的prototype對象,即函數的原型,我們可以在函數的原型上添加任意屬性,之後透過new一個實例化的對象可以共享其屬性(下面的兩個例子會詳細介紹)。

function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
typeof obj.tostring; //function
obj.valueof(); // foo {x: 1, y: 2, z: 3}
obj.hasownproperty('z'); //false
登入後複製

在這裡,obj的原型(_proto_)指向foo函數的prototype屬性,foo.prototype的原型指向object.prototype,原型鏈的末端則為null,透過hasownproperty查看z屬性是否是obj上的,顯示false,則obj上本沒有z屬性,但透過查找其原型鏈,發現在foo.prototype上有,所以obj.z=3,並且對於首例上obj.valueof()以及tostring都是object .prototype上的,所以任何一個物件都有這兩個屬性,因為任何一個物件的原型都是object.prototype.當然除了以下一個特例,

<span>var</span> obj2 = object.create(<span>null</span><span>);obj2.valueof(); </span><span>//</span><span>undefined</span>
登入後複製

object.create()為建立一個空對象,而此對象的原型指向參數。下面一個綜合實例向大家展示如何實作一個class來繼承另外一個class

//声明一个构造函数person
function person(name,age){
  this.name = name;
  this.age = age;
}
person.prototype.hi = function (){
  console.log('hi,my name is ' + this.name +',my age is '+this.age);
};
person.prototype.legs_num=2;
person.prototype.arms_num=2;
person.prototype.walk = function (){
  console.log(this.name+' is walking !');
};
function student(name,age,classnum){
  person.call(this,name,age);
  this.classnum = classnum;
}
//创建一个空对象
student.prototype = object.create(person.prototype);
//constructor指定创建一个对象的函数。
student.prototype.constructor = student;
student.prototype.hi = function (){
  console.log('hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classnum);
};
student.prototype.learns = function (sub){
  console.log(this.name+' is learning '+sub);
};
//实例化一个对象bosn
var bosn = new student('bosn',27,'class 3');
bosn.hi(); //hi,my name is bosn,my age is 27 and my class is class 3
bosn.legs_num; //2
bosn.walk(); //bosn is walking !
bosn.learns('math'); //bosn is learning math
登入後複製

建構函式person與student的this指向實例化的物件(bosn),而此物件的原型指向建構器的prototype。

我們用object.create()方法來建立一個空對象,此物件的原型事項person.prototype,這樣寫的好處是我們可以在不影響person.prototype屬性的前提下可以自己建立studnet .prototype的任意屬性,並且可以繼承person.prototype上原有的屬性,因為子類別student是繼承基底類別person的。如果直接寫person.prototype = student.prototype,那他兩同時指向一個對象,在給student.prototype添加屬性的同時,person的原型鏈上也會增加同樣的屬性。

對於建構子student裡面的call方法,裡面的this指向新建立的student的實例化的對象,並透過call來實現繼承。

student.prototype.constructor = student,這句話的意思是指定student為建立student.prototype這個物件的函數,如果不寫這句話,該物件的函數還是person。

對於繼承,一共有三種方式來實現,

function Person(name,age){
  this.name = name;
  this.age = age;
}
function Student(){

}
Student.prototype = Person.prototype; //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype = new Person(); //3
登入後複製

以上這篇js原型鏈與繼承解析(初體驗)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板