一文搞懂JavaScript面向?qū)ο?/h1>
面向?qū)ο笫浅绦蛑幸粋€(gè)重要的思想,就是程序中所有的操作都是通過對(duì)象完成的。
舉例來說:
- 操作瀏覽器要使用window對(duì)象
- 操作網(wǎng)頁(yè)要使用document對(duì)象
- 操作控制臺(tái)要使用console對(duì)象
一切操作都要通過對(duì)象,也就是所謂的面向?qū)ο螅敲磳?duì)象到底是什么呢?這就要先說到程序是什么,計(jì)算機(jī)程序的本質(zhì)就是對(duì)現(xiàn)實(shí)事物的抽象,抽象的反義詞是具體,比如:照片是對(duì)一個(gè)具體的人的抽象,汽車模型是對(duì)具體汽車的抽象等等。程序也是對(duì)事物的抽象,在程序中我們可以表示一個(gè)人、一條狗、一把槍、一顆子彈等等所有的事物。一個(gè)事物到了程序中就變成了一個(gè)對(duì)象。
在程序中所有的對(duì)象都被分成了兩個(gè)部分?jǐn)?shù)據(jù)和功能,以人為例,人的姓名、性別、年齡、身高、體重等屬于數(shù)據(jù),人可以說話、走路、吃飯、睡覺這些屬于人的功能。數(shù)據(jù)在對(duì)象中被稱為性,而功能就被稱為方法。所以簡(jiǎn)而言之,在程序中一切皆是對(duì)象。
想要面向?qū)ο蠛筒僮鲗?duì)象,首先便要先擁有對(duì)象,所以接下來就是怎么創(chuàng)建對(duì)象。
1、類(class)
要想面向?qū)ο?,操作?duì)象,首先便要擁有對(duì)象,那么下一個(gè)問題就是如何創(chuàng)建對(duì)象。要?jiǎng)?chuàng)建對(duì)象,必須要先定義類,所謂的類可以理解為對(duì)象的模型,程序中可以根據(jù)類創(chuàng)建指定類型的對(duì)象,舉例來說:可以通過Person類來創(chuàng)建人的對(duì)象,通過Dog類創(chuàng)建狗的對(duì)象,通過Car類來創(chuàng)建汽車的對(duì)象,不同的類可以用來創(chuàng)建不同的對(duì)象。
2、面向?qū)ο蟮膭?chuàng)建方式
- 字面量創(chuàng)建缺點(diǎn):適合創(chuàng)建單個(gè)對(duì)象,代碼冗余
- 實(shí)例創(chuàng)建缺點(diǎn):適合創(chuàng)建單個(gè)對(duì)象,代碼冗余
分析:看看字面量創(chuàng)建對(duì)象和new Object創(chuàng)建對(duì)象兩種方式,其實(shí)字面量創(chuàng)建對(duì)象的本質(zhì)就是new Object創(chuàng)建對(duì)象。
// 字面量創(chuàng)建對(duì)象const person2 = {name: '張三', age: 10}console.log(person2) // { name: '林三心', age: 10 }本質(zhì)是// new Object創(chuàng)建對(duì)象const person2 = new Object()person2.name = '張三'person2.age = 10console.log(person2) // { name: '張三', age: 10 }
因?yàn)闃?gòu)造函數(shù)的prototype和其實(shí)例的_proto_是指向同一個(gè)地方的,所以我們來驗(yàn)證一下。
const person2 = {name: '張三', age: 10}const person3 = new Object()person3.name = "張三"person3.age = 10person3._proto == Object.prototype // trueperson2._proto == Object.prototype //true
- 工廠模式創(chuàng)建 函數(shù)的 封裝問題:解決了代碼冗余的問題,但識(shí)別不明。
- 構(gòu)造函數(shù)創(chuàng)建問題:解決了指向不明的問題,但浪費(fèi)內(nèi)存。
其中new操作符都做了什么呢?
//1.聲明構(gòu)造函數(shù) function Student(name, age, sex) { //1.隱式的創(chuàng)建了一個(gè)空對(duì)象,讓this指向這個(gè)空對(duì)象 //this = new Object(); //2.執(zhí)行構(gòu)造函數(shù)中代碼(添加屬性和方法) //添加屬性 this.name = name; this.age = age; this.sex = sex; //添加方法 this.study = function () { console.log("good good study,day day up!!!,好好學(xué)習(xí),天天自閉"); } //4.隱式的返回創(chuàng)建好的對(duì)象 //return this } var s2 = new Student("曾慶文",18,"女"); console.log(s2); // {name: "曾慶文", age: 18, sex: "女", study: ?}
- 原型對(duì)象創(chuàng)建方式問題:解決了浪費(fèi)內(nèi)存的問題,但不能傳參。
- 混合創(chuàng)建 構(gòu)造函數(shù)(可變)+原型(固定的,公共的,共享的)問題:破壞了封裝性,因?yàn)樵椭械膶傩院头椒▽懺诹撕瘮?shù)的外邊。
- 動(dòng)態(tài)混合創(chuàng)建
總結(jié)
咱們平常開發(fā)中,創(chuàng)建一個(gè)對(duì)象,通常會(huì)用以下幾種方法。
- 構(gòu)造函數(shù)創(chuàng)建對(duì)象
- 字面量創(chuàng)建對(duì)象
- new Object創(chuàng)建對(duì)象
- Object.create創(chuàng)建對(duì)象,創(chuàng)建出來的是一個(gè)空原型的對(duì)象
- 原型創(chuàng)建
- 動(dòng)態(tài)混合創(chuàng)建