js原型鏈與繼承解析(初體驗)
首先定義一個對象obj,該對象的原型為obj._proto_,我們可以用ES5中的getPrototypeOf這一方法來查詢obj的原型,我們通過判斷obj的原型是否與Object.prototype相等來證明是否存在obj的原型,答案返回true,所以存在。然后我們定義一個函數(shù)foo(),任何一個函數(shù)都有它的prototype對象,即函數(shù)的原型,我們可以在函數(shù)的原型上添加任意屬性,之后通過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函數(shù)的prototype屬性,foo.prototype的原型指向Object.prototype,原型鏈的末端則為null,通過hasOwnProperty來查看z屬性是否是obj上的,顯示false,則obj上本沒有z屬性,但通過查找其原型鏈,發(fā)現(xiàn)在foo.prototype上有,所以obj.z=3,并且對于首例上obj.valueOf()以及toString都是Object.prototype上的,所以任何一個對象都有這兩個屬性,因為任何一個對象的原型都是Object.prototype.當然除了以下一個特例,
var obj2 = Object.create(null);obj2.valueOf(); //undefined
Object.create()為創(chuàng)建一個空對象,并且此對象的原型指向參數(shù)。下面一個綜合實例向大家展示一下如何實現(xiàn)一個class來繼承另外一個class
//聲明一個構造函數(shù)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; } //創(chuàng)建一個空對象 Student.prototype = Object.create(Person.prototype); //constructor指定創(chuàng)建一個對象的函數(shù)。 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
構造函數(shù)Person與Student的this指向實例化的對象(Bosn),并且此對象的原型指向構造器的prototype。
我們用Object.create()方法來創(chuàng)建一個空對象,此對象的原型事項Person.prototype,這樣寫的好處是我們可以在不影響Person.prototype屬性的前提下可以自己創(chuàng)建Studnet.prototype的任意屬性,并且可以繼承Person.prototype上原有的屬性,因為子類Student是繼承基類Person的。如果直接寫Person.prototype = Student.prototype,那他兩同時指向一個對象,在給Student.prototype添加屬性的同時,Person的原型鏈上也會增加同樣的屬性。
對于構造函數(shù)Student里面的call方法,里面的this指向新創(chuàng)建的Student的實例化的對象,并通過call來實現(xiàn)繼承。
Student.prototype.constructor = Student,這句話的含義是指定Student為創(chuàng)建Student.prototype這個對象的函數(shù),如果不寫這句話,該對象的函數(shù)還是Person。
對于繼承,一共有三種方式來實現(xiàn),
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原型鏈與繼承解析(初體驗)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
javascript基于定時器實現(xiàn)進度條功能實例
這篇文章主要介紹了javascript基于定時器實現(xiàn)進度條功能,簡單分析了javascript定時器的功能、使用方法并給出了基于定時器實現(xiàn)的進度條功能實例,需要的朋友可以參考下2017-10-10headjs實現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS
本文主要介紹如何使用head.js實現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS,提高網(wǎng)站加載速度。需要的朋友可以看下2016-11-11JS中實現(xiàn)函數(shù)return多個返回值的實例
下面小編就為大家?guī)硪黄狫S中實現(xiàn)函數(shù)return多個返回值的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02