資訊專欄INFORMATION COLUMN
摘要：語(yǔ)言使用構(gòu)造函數(shù)作為對(duì)象的模板。構(gòu)造函數(shù)就是一個(gè)普通的函數(shù)，為了與普通函數(shù)區(qū)別，構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫。構(gòu)造函數(shù)的特點(diǎn)有兩個(gè)。命令命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個(gè)實(shí)例對(duì)象。將這個(gè)空對(duì)象的原型，指向構(gòu)造函數(shù)的屬性。
一、數(shù)據(jù)類型
JavaScript的數(shù)據(jù)類型可以分為基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。
基本數(shù)據(jù)類型(6種)
String
Number
Boolean
null
undefined
Symbol(ES6)
引用數(shù)據(jù)類型
Object
二、面向?qū)ο缶幊?/strong>構(gòu)造函數(shù)
面向?qū)ο缶幊痰牡谝徊?，就是要生成?duì)象。前面說(shuō)過(guò)，對(duì)象是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板，表示某一類實(shí)物的共同特征，然后對(duì)象根據(jù)這個(gè)模板生成。
JavaScript 語(yǔ)言使用構(gòu)造函數(shù)（constructor）作為對(duì)象的模板。所謂”構(gòu)造函數(shù)”，就是專門用來(lái)生成實(shí)例對(duì)象的函數(shù)。它就是對(duì)象的模板，描述實(shí)例對(duì)象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)實(shí)例對(duì)象，這些實(shí)例對(duì)象都有相同的結(jié)構(gòu)。
構(gòu)造函數(shù)就是一個(gè)普通的函數(shù)，為了與普通函數(shù)區(qū)別，構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫。
構(gòu)造函數(shù)的特點(diǎn)有兩個(gè)。
函數(shù)體內(nèi)部使用了this關(guān)鍵字，代表了所要生成的對(duì)象實(shí)例。
使用new命令生成對(duì)象。
2. new命令
new命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個(gè)實(shí)例對(duì)象。
new 命令的原理
創(chuàng)建一個(gè)空對(duì)象，作為將要返回的對(duì)象實(shí)例。
將這個(gè)空對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性。
將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字。
開(kāi)始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼。
如果構(gòu)造函數(shù)內(nèi)部有return語(yǔ)句，而且return后面跟著一個(gè)對(duì)象，new命令會(huì)返回return語(yǔ)句指定的對(duì)象；否則，返回this對(duì)象。
var Fn=function(){
this.name="xxx";
this.old=18;
}
var f1=new Fn();
console.log(f1.name);//xxx
console.log(f1.old);//18
上面代碼通過(guò)new命令，讓構(gòu)造函數(shù)Fn生成一個(gè)實(shí)例對(duì)象，保存在變量f1中。這個(gè)新生成的實(shí)例對(duì)象，從構(gòu)造函數(shù)Fn得到了name和old屬性。new命令執(zhí)行時(shí)，構(gòu)造函數(shù)內(nèi)部的this，就代表了新生成的實(shí)例對(duì)象,this.name和this.old是實(shí)例對(duì)象的屬性。
var Fn2=function(){
name="xxx";
old=18;
}
var f2=new Fn2();
console.log(f2.name);//undefined
console.log(f2.old);//undefined
f2.name="yyy";
console.log(f2.name);//yyy
三、原型與原型鏈
對(duì)象是函數(shù)創(chuàng)建的，而函數(shù)卻又是一種對(duì)象。也是屬性的集合，可以對(duì)函數(shù)進(jìn)行自定義屬性。
每個(gè)函數(shù)都有一個(gè)屬性叫做prototype。
這個(gè)prototype的屬性值是一個(gè)對(duì)象，默認(rèn)的只有一個(gè)叫做constructor的屬性，指向這個(gè)函數(shù)本身。
var Fn=function(){
this.name="xxx";
this.old=18;
}
回到上面new命令的原理的第二條，從這張圖可以看到對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性。
f1.__proto__指向構(gòu)造函數(shù)的prototype屬性,就是對(duì)象的原型。所以f1.__proto__===Fn.prototype為true
prototype的屬性值是一個(gè)對(duì)象，默認(rèn)的只有一個(gè)叫做constructor的屬性，指向這個(gè)函數(shù)本身。
左邊為Fn函數(shù)，右邊就是它的原型
在上面可以看到f1.__proto__===Fn.prototype的結(jié)果為true
__proto__就是指向構(gòu)造函數(shù)的prototype屬性，Fn.prototype就是對(duì)象的原型
即,每個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都有一個(gè)__proto__屬性，指向創(chuàng)建該對(duì)象的函數(shù)的prototype。
基于以上，我們得到一個(gè)重要的公式
var 對(duì)象名 = new 函數(shù)名()
對(duì)象名.__proto__=== 函數(shù)名.prototype
小結(jié)
自定義函數(shù).__proto__指向Function.prototype
Object.__proto__指向Function.prototype即Object.__proto__ === Function.prototype//true
Function.__proto__指向Function.prototype:Function也是一個(gè)函數(shù)，函數(shù)是一種對(duì)象，也有__proto__屬性。既然是函數(shù)，那么它一定是被Function創(chuàng)建。所以Function是被自身創(chuàng)建的。所以它的__proto__指向了自身的Prototype。
Function.prototype.__proto__===Object.prototype//true
Object.prototype的__proto__指向的是null
總結(jié)對(duì)象是函數(shù)創(chuàng)建的，而函數(shù)卻又是一種對(duì)象。也是屬性的集合
每個(gè)函數(shù)都有一個(gè)屬性叫做prototype。
對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性。
prototype的屬性值是一個(gè)對(duì)象，默認(rèn)的只有一個(gè)叫做constructor的屬性，指向這個(gè)函數(shù)本身。
原型既然作為對(duì)象，屬性的集合，可以自定義的增加許多屬性。
總之記住下面這幾個(gè)要點(diǎn)
Object對(duì)象是由Function函數(shù)創(chuàng)建的
所有函數(shù)都是由Function創(chuàng)建的,函數(shù)也是對(duì)象
重要的公式
var 對(duì)象名 = new 函數(shù)名()
對(duì)象名.__proto__=== 函數(shù)名.prototype
普通函數(shù)的prototype屬性值是一個(gè)對(duì)象
Function.prototype有__proto__這個(gè)屬性
Object.prototype.__proto__===null結(jié)果為true
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94395.html
摘要：不理解沒(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...
摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過(guò)這個(gè)問(wèn)題。 前言 作為前端高頻面試題之一，相信很多小伙伴都有遇到過(guò)這個(gè)問(wèn)題。那么你是否清楚完整的了解它呢？ 國(guó)際慣例，讓我們先拋出問(wèn)題： 什么是原型、原型鏈 它們有什么特點(diǎn) 它們能做什么 怎么確定它們的關(guān)系 或許你已經(jīng)有答案，或許你開(kāi)始有點(diǎn)疑惑，無(wú)論是 get 新技能或是簡(jiǎn)單的溫習(xí)一次，讓我們一起去探究一番吧 如果文章中有出現(xiàn)紕...
摘要：每一個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)默認(rèn)的連接到該神秘對(duì)象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實(shí)例與對(duì)象實(shí)例一般是指某一個(gè)構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象，我們稱為構(gòu)造函數(shù)的實(shí)例實(shí)例就是對(duì)象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來(lái)的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問(wèn)題 一些相關(guān)概念 認(rèn)識(shí)原型 構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖 對(duì)象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說(shuō)明什么...
摘要：既然構(gòu)造函數(shù)有屬于自己的原型對(duì)象，那么我們應(yīng)該能讓另一個(gè)構(gòu)造函數(shù)來(lái)繼承他的原型對(duì)象咯我們?cè)跇?gòu)造函數(shù)內(nèi)部執(zhí)行了函數(shù)并改變了函數(shù)內(nèi)部的指向其實(shí)這個(gè)指向的是實(shí)例化之后的對(duì)象。 我們?cè)谟懀╩ian）論（shi）JavaScript這門語(yǔ)言時(shí)，總是繞不過(guò)的一個(gè)話題就是繼承與原型鏈。那么繼承與原型鏈到底是什么呢？ 我很喜歡的一個(gè)聊天模式是：我不能說(shuō)XX是什么，我只能說(shuō)XX像什么。也就是說(shuō)我不直接跟...
摘要：綜上所述有原型鏈繼承，構(gòu)造函數(shù)繼承經(jīng)典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優(yōu)點(diǎn)于一身是實(shí)現(xiàn)基于類型繼承的最有效方法。 一、前言 繼承是面向?qū)ο螅∣OP）語(yǔ)言中的一個(gè)最為人津津樂(lè)道的概念。許多面對(duì)對(duì)象（OOP）語(yǔ)言都支持兩種繼承方式:：接口繼承 和 實(shí)現(xiàn)繼承 。 接口繼承只繼承方法簽名,而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。由于js中方法沒(méi)有簽名...
摘要：探索是如何判斷的表達(dá)式如果函數(shù)的顯式原型對(duì)象在對(duì)象的隱式原型鏈上，返回，否則返回是通過(guò)自己產(chǎn)生的實(shí)例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測(cè)試題測(cè)試題報(bào)錯(cuò)對(duì)照下圖理解 原型與原型鏈深入理解（圖解） 原型（prototype） 函數(shù)的 prototype 屬性（圖） 每個(gè)函數(shù)都有一個(gè)prototype屬性，它默認(rèn)指向一個(gè)Object空對(duì)象（即稱為：原型對(duì)象） 原型對(duì)象中有...
閱讀 2125·2021-11-16 11:45
閱讀 1217·2021-10-22 09:53
閱讀 4018·2021-09-07 10:26
閱讀 1224·2021-09-06 15:00
閱讀 2081·2019-08-28 18:09
閱讀 2811·2019-08-26 14:06
閱讀 3979·2019-08-26 13:48
閱讀 1307·2019-08-26 12:11
