摘要:原型要掌握這三者之間的關(guān)系,通過代碼例子記錄一下自身屬性的這里就是通過代碼看一下做了什么默認(rèn)情況下,將的所有屬性包括繼承的賦值給有什么東西呢自己的原型鏈,添加一個(gè)屬性,用來指明對(duì)象的誰構(gòu)造的自身全部屬性,這邊構(gòu)建一個(gè)空對(duì)象原型,所以沒有自有
原型
要掌握這三者之間的關(guān)系prototype,constructor,__proto__
通過代碼例子記錄一下
function F() { this.a = 123; // this : { //自身屬性 a :123, //this的.__proto__ Object.creat(F.prototype), // } }; var o = new F(); //這里o就是this
通過代碼看一下
prototype做了什么
默認(rèn)情況下,將F.prototype的所有屬性包括繼承的賦值給o.__proto__
prototype有什么東西呢?
自己的原型鏈,F(xiàn).prototype.__proto__
prototype添加一個(gè)constructor屬性,用來指明對(duì)象的誰構(gòu)造的
F.prototype自身全部屬性,(這邊構(gòu)建一個(gè)空對(duì)象原型,所以沒有自有屬性)
constructor,默認(rèn)指向prototype對(duì)象所在的構(gòu)造函數(shù),必須從對(duì)象的原型鏈上去找也就是F.prototype上去找
對(duì)于__proto__,o對(duì)象得到了__proto__,這樣也就形成了對(duì)象之間的鏈接,構(gòu)成了原型鏈,能通過原型鏈訪問繼承的屬性和方法;當(dāng)然o還有自身屬性a
注意點(diǎn):當(dāng)我們自定義了F的原型
function F() {}; F.prototype = {a : 1}; //因?yàn)樵椭赶虻母淖?,需要加上?gòu)造器的正確值 F.prototype.constructor = F; var o = new F(); console.log(o.constructor);
手動(dòng)改變?cè)椭赶颍瑫?huì)導(dǎo)致constructor的變更,我們需要手動(dòng)添加
這種手動(dòng)添加的constructor是可遍歷的,一般這么修改F.prototype.a = 1;
默認(rèn)constructor在F.prototype中找
F.prototype = {a : 1};賦值是引用地址的賦值
function F() {}; function G() {}; var o = new F(); F.prototype.a = 2; //修改的還是new時(shí)創(chuàng)建的指針指向上的內(nèi)容 //F.prototype = {a : 2}; //F.prototype得到新指針,所以new時(shí)的指針上的內(nèi)容不受影響 console.log(o);繼承
繼承要實(shí)現(xiàn)的效果是:
子類和父類存在繼承關(guān)系
function F() { this.f = "f" } function Son() { this.s = "s" } var po = {a : 1}; F.prototype = po; //第一種,是錯(cuò)誤的 //Son.prototype = F.prototype; //兩者是同輩分,之間不存在繼承,是兄弟 //第二種 Son.prototype = Object.create(F.prototype); //Son.prototype.__proto__ = F.prototype 這個(gè)就是存在上下輩分,有繼承關(guān)系 //第三種 //Son.prototype = new F(); 與第二種一樣,有繼承關(guān)系,但是這種會(huì)進(jìn)行一次F構(gòu)造函數(shù)的構(gòu)建,消耗性能
所以我們采用Son.prototype = Object.create(F.prototype);
擁護(hù)父類自身的屬性及方法
利用call加this機(jī)制完成子類對(duì)父類自身方法屬性的繼續(xù)
function F() { this.f1 = "1", this.fn = function () { console.log(this) } } function Son() { F.call(this); } var son = new Son(); console.log(son.fn())
構(gòu)造器的修改Son.prototype.constructor = Son;使得son知道由Son構(gòu)建自己
整合一下
function F() { this.f1 = "1"; } function Son() { F.call(this); } F.prototype.fn = function () {}; var inherit = (function (){ return function inherit(Target, Origin){ Target.prototype = Object.create(Origin.prototype); //create等價(jià)于 // function F() {}; // F.prototype = Origin.prototype; // new F() Target.prototype.constructor = Target; } }()); inherit(Son, F); var son = new Son(); console.log(Object.getPrototypeOf(son));
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/98215.html
摘要:繼承是面向?qū)ο缶幊陶Z言中的一個(gè)重要的概念,繼承可以使得子類具有父類的屬性和方法或者重新定義追加屬性和方法等。但是在中沒有類的概念,是基于原型的語言,所以這就意味著對(duì)象可以直接從其他對(duì)象繼承。 繼承是面向?qū)ο缶幊陶Z言中的一個(gè)重要的概念,繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。但是在Javascript中沒有類的概念,是基于原型的語言,所以這就意味著對(duì)象可以直接...
摘要:它不區(qū)分該屬性是對(duì)象自身的屬性,還是繼承的屬性。那么我們要遍歷對(duì)象所有屬性,包括繼承以及不可遍歷的屬性,用加原型遍歷實(shí)現(xiàn)類似的用遞歸 Object靜態(tài)方法 Object自身方法,必須由Object調(diào)用,實(shí)例對(duì)象并不能調(diào)用 Object.getPrototypeOf() 作用是獲取目標(biāo)對(duì)象的原型 function F() {}; var obj = new F(); console.lo...
摘要:命令作用作用是執(zhí)行構(gòu)造函數(shù),返回實(shí)例對(duì)象上面例子是自定義一個(gè)構(gòu)造函數(shù),其最大的特點(diǎn)就是首字母大寫,用執(zhí)行構(gòu)造函數(shù)其中,在的執(zhí)行下,代表了實(shí)例化后的對(duì)象,這個(gè)也就有屬性注意點(diǎn)如果不用執(zhí)行構(gòu)造函數(shù),那么指向的是全局有兩種方式可以避免內(nèi)部定義嚴(yán)格 new命令 new作用 作用是執(zhí)行構(gòu)造函數(shù),返回實(shí)例對(duì)象 function F() { this.name = object } var ...
摘要:對(duì)象拷貝可遍歷屬性淺拷貝簡(jiǎn)單的淺拷貝可以用,對(duì)存取器定義的對(duì)象也試用深拷貝屬性描述對(duì)象的拷貝這是個(gè)淺拷貝深拷貝不可遍歷屬性對(duì)象的拷貝例如拷貝獲得共同的原型,與是兄弟關(guān)系說明也繼承了原型,同級(jí)別簡(jiǎn)潔化版 對(duì)象拷貝 可遍歷屬性 淺拷貝 if(typeof Object.prototype.copy != function) { Object.prototype.copy = fun...
摘要:文中的多為構(gòu)造函數(shù)原型對(duì)象屬性為函數(shù)的專屬屬性,表示函數(shù)的原型對(duì)象。關(guān)于各種數(shù)據(jù)類型的屬性的展示對(duì)象的構(gòu)造器函數(shù)該屬性指向創(chuàng)建該對(duì)象原型的構(gòu)造函數(shù)。對(duì)對(duì)象的凍結(jié)狀態(tài)的設(shè)置和判斷,前者讓凍結(jié)對(duì)象,后者判斷對(duì)象是否被凍結(jié)。 前言 上篇文章介紹了JS的對(duì)象,本文將介紹Object這個(gè)基類,主要介紹其屬性和方法(其實(shí)這些在MDN里都有^_^,點(diǎn)擊這里可以直通MDN)。好了廢話不多說了,直接開始...
閱讀 3057·2023-04-25 18:06
閱讀 3367·2021-11-22 09:34
閱讀 2890·2021-08-12 13:30
閱讀 2080·2019-08-30 15:44
閱讀 1698·2019-08-30 13:09
閱讀 1657·2019-08-30 12:45
閱讀 1744·2019-08-29 11:13
閱讀 3637·2019-08-28 17:51