理解Javascript的原型鏈
要理解原型鏈,首先要清楚理解以下幾點:
1.所有函數都事Function的實例化,都包含prototype屬性,即原型對象。
2.所有對象都有__proto__屬性,該屬性指向對象構造函數的prototype原型對象。
3.prototype原型對象的constructor屬性指向它所在的構造函數,即構造函數本身。
4.prototype是針對函數說的,__proto__是針對對象說的。
5.函數本身也是對象。
認識到以上幾點,我們先看一下原型鏈:
function setName() { this.name = ‘mark‘; } functionsetAge() { this.age = 20; } setAge.prototype = new setName(); var obj = new setAge(); console.log(obj.name,obj.age);//mark 20 console.log(obj.constructor === setName);//true
上面代碼我們使用構造函數setAge()實例化一個對象obj,其中,age由構造函數寫入,而name屬性是有setAge的原型對象setName寫入的。obj.constructor === setName 返回true是因為,在obj對象的構造函數中,並沒有直接的consructor,它的constructor屬性是通過__proto__屬性繼承的,而__proto__指向obj的構造函數的prototype對象,即setAge.prototype,也就是setName,所以會返回true。
那麽,最簡單的一條原型鏈就應該為,實例對象《== 構造函數 《== 構造函數原型對象 《== Object 《== Object.prototype 《== null,而原型對象中的構造函數(constructor屬性)都等於它所在的構造函數。
function createO() { this.x = 1; } var o = new createO(); console.log(o.__proto__);//createO.prototype console.log(o.__proto__.__proto__);//Object console.log(o.__proto__.__proto__.__proto__);//null
那麽說白了,原型鏈的本質就是實例化對象和原型對象(prototype)之間形成的繼承鏈條。
再說一下繼承:
使用原型鏈最常用的繼承方式:
復制代碼 1 function Person(name){ 2 this.name = name; 3 } 4 Person.prototype.showName = function(){ 5 console.log(this.name); 6 } 7 function Student(name,age){ 8 Person.call(this,name); 9 this.age = age; 10 } 11 Student.prototype = new Person(); 12 Student.prototype.contructor = Student; 13 Student.prototype.showAge = function(){ 14 console.log(this.age); 15 } 16 var stu = new Student(‘張三‘,12); 17 stu.showName(); 18 stu.showAge();
參考文獻:https://www.cnblogs.com/DF-fzh/p/5619319.html
https://www.cnblogs.com/Yirannnnnn/p/4896542.html#undefined
理解Javascript的原型鏈