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