資訊專欄INFORMATION COLUMN
摘要：屬性是在實例被的一瞬間建立的，指向原型對象即等同于訪問到的屬性只能在學(xué)習(xí)或調(diào)試的環(huán)境下使用構(gòu)造函數(shù)可以看成一個規(guī)范，并非實際存在的當(dāng)執(zhí)行時，首先開辟一個新的地址空間用來創(chuàng)建并存放對象，再使的指向?qū)ο蟛⑶覉?zhí)行函數(shù)。
簡述
本文是筆者看完《JavaScript面向?qū)ο缶幊讨改稀?/strong>后的一些理解與感悟，僅是對JavaScript原型與多種繼承進行思路上的梳理，并非講解基礎(chǔ)知識，適合了解原型和繼承，卻不夠清晰透徹的開發(fā)者。
希望各位開發(fā)者能夠通過閱讀這篇文章縷清原型和構(gòu)造函數(shù)的脈絡(luò)
實例對象
構(gòu)造函數(shù)
原型對象
觀察以下代碼
function Person (){
this.age = 20;
}
Person.prototype.gender = "male";
var tom = new Person();
tom.name = "tom";
console.log(tom.name); // tom
console.log(tom.age); // 20
console.lot(tom.gender); // male
tom.constructor === Person; // true
tom.__proto__ === Person.prototype; // true
原型陷阱
function Dog(){
this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();
// 給原型添加方法
Dog.prototype.say = function(){
return "woof!";
}
benji.say(); // "woof!"
rusty.say(); // "woof!"
benji.constructor === Dog; // true
rusty.constructor === Dog; // true
// 此時，一切正常
Dog.prototype = {
paws: 4,
hair: true
}; // 完全覆蓋
typeof benji.paws; // "undefined"
benji.say(); // "woof!"
typeof benji.__proto__.say; // "function"
typeof benji.__proto__.paws; // "undefined"
// 原型對象不能訪問原型的"新增屬性"，但依然通過神秘的連接 __proto__ 與原有原型對象保持聯(lián)系
// 新增實例
var lucy = new Dog();
lucy.say(); // TypeError: lucy.say is not a function
lucy.paws; // 4
// 此時 __proto__ 指向了新的原型對象
// 由于constructor是存儲在原型對象中的，所以新實例的constructor屬性就不能再保持正確了，此時它指向了Object()
lucy.constructor; // function Object(){[native code]}
// 舊實例的constructor還是正確的
benji.constructor;
/* function Dog(){
this.tail = true;
}*/
// 若想讓constructor正確，必須在新的原型對象中設(shè)置constructor屬性為Dog
Dog.prototype.constructor = Dog;
原型總結(jié)
constructor屬性在Person.prototype對象中，即原型對象中。
__proto__屬性是在 tom(實例) 被 new 的一瞬間建立的，指向原型對象即 Person.prototype
tom.constructor 等同于 tom.__proto__.constructor 訪問到的
__proto__屬性只能在學(xué)習(xí)或調(diào)試的環(huán)境下使用
構(gòu)造函數(shù)可以看成一個規(guī)范，并非實際存在的
當(dāng)var tom = new Person() 執(zhí)行時，首先開辟一個新的地址空間用來創(chuàng)建并存放tom對象，再使Person的this指向tom對象并且執(zhí)行Person函數(shù)。
不要過分依賴constructor屬性，不可控。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101832.html
摘要：如果重設(shè)構(gòu)造函數(shù)的原型對象，那么，會切斷新的原型對象和任何之前已經(jīng)存在的構(gòu)造函數(shù)實例之間的聯(lián)系，它們引用的仍然是最初的原型。說明返回的對象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性沒有關(guān)系。 說明： 此摘要筆記系列是我最近看《JavaScript高級程序設(shè)計(第3版)》隨手所記。里面分條列舉了一些我認為重要的、需要記下的、對我有幫助的點，是按照我看的順序來的。摘要筆記本身沒有系統(tǒng)性，沒有全面性...
摘要：而原型就是類型對象的一個屬性。在中并沒有定義函數(shù)的原始類型，所以原型可以是任何類型。原型是用于保存對象的共享屬性和方法的，原型的屬性和方法并不會影響函數(shù)本身的屬性和放大。 原型 概述 在JavaScript中，函數(shù)是一個包含屬性和方法的Function類型的對象。而原型（Prototype）就是Function類型對象的一個屬性。在函數(shù)定義時九包含了prototype屬性，他的初始值是...
摘要：三種使用構(gòu)造函數(shù)創(chuàng)建對象的方法和的作用都是在某個特殊對象的作用域中調(diào)用函數(shù)。這種方式還支持向構(gòu)造函數(shù)傳遞參數(shù)。叫法上把函數(shù)叫做構(gòu)造函數(shù)，其他無區(qū)別適用情境可以在特殊的情況下用來為對象創(chuàng)建構(gòu)造函數(shù)。 一、工廠模式 工廠模式：使用字面量和object構(gòu)造函數(shù)會有很多重復(fù)代碼，在此基礎(chǔ)上改進showImg(https://segmentfault.com/img/bVbmKxb?w=456&...
摘要：不理解沒關(guān)系，下面會結(jié)合圖例分析上一篇高級程序設(shè)計筆記創(chuàng)建對象下一篇高級程序設(shè)計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈 文章直接從原型圖解開始的，如果對一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點） function Person() {}; var p = new Person(); showImg(https://s...
今天研究了一下js的原型，把自己的理解寫到這里，如有不正確的地方，還望指出，在此先謝過啦~ 什么是原型？ 原型是一個對象。所有對象都有原型。任何一個對象也都可以成為其他對象的原型。 每個原型都有一個 constructor 屬性指向其構(gòu)造函數(shù)。 怎么訪問原型？ 一個對象的原型被對象內(nèi)部的 [[Prototype]] 屬性所持有。 一句話就是，所有對象都有原型，其原型是該對象的內(nèi)部屬性。那么...
閱讀 4031·2021-11-22 13:53
閱讀 1733·2021-09-23 11:52
閱讀 2449·2021-09-06 15:02
閱讀 965·2019-08-30 15:54
閱讀 913·2019-08-30 14:15
閱讀 2394·2019-08-29 18:39
閱讀 666·2019-08-29 16:07
閱讀 428·2019-08-29 13:13
