一文搞懂JavaScript面向?qū)ο?/h1>

作者：不學(xué)巫術(shù)的O小文 2022-08-15 15:39:23

面向?qū)ο笫浅绦蛑幸粋€(gè)重要的思想，就是程序中所有的操作都是通過對(duì)象完成的。

舉例來說：

操作瀏覽器要使用window對(duì)象
操作網(wǎng)頁要使用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ì)象中被稱為性，而功能就被稱為方法。所以簡而言之，在程序中一切皆是對(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: ?}