目的

什么是面向?qū)ο缶幊?/li>

復(fù)習(xí)關(guān)鍵字new并且理解它所做的四件事

在我們的代碼中使用構(gòu)造函數(shù)來優(yōu)化我們得代碼

使用call和apply來重構(gòu)構(gòu)造函數(shù)

面向?qū)ο缶幊痰亩x

基于對(duì)象概念的編程模式

這些對(duì)象是由類創(chuàng)建的，我們可以把類想象成一個(gè)藍(lán)圖，把這些對(duì)象叫做類的實(shí)例

盡量讓類抽象化和模塊化

JavaScript中的面向?qū)ο缶幊?/h2>

JavaScript 中沒有內(nèi)置的類,但是我們可以用函數(shù)和對(duì)象去模擬

1. 創(chuàng)建對(duì)象

想象我們要?jiǎng)?chuàng)建一些house對(duì)象,他們都有 bedrooms, bathrooms, numSqft 屬性

var house = {bedrooms: 2,bathroom: 2,sqFeet: 1000 }var house1 = {bedrooms: 2,bathroom: 2,sqFeet: 1000 }var house2= {bedrooms: 2,bathroom: 2,sqFeet: 1000 } // 想象一下 我們?nèi)绻?1000個(gè)房子 復(fù)制代碼

解決辦法 創(chuàng)建一個(gè)函數(shù)來構(gòu)建這些類似的“房子”對(duì)象，而不是創(chuàng)建無(wú)數(shù)個(gè)不同的對(duì)象

1.構(gòu)造函數(shù)

讓我們使用一個(gè)函數(shù)作為每個(gè)房子應(yīng)該是什么的藍(lán)圖——我們把這些函數(shù)稱為“構(gòu)造函數(shù)”

function House(bedrooms, bathrooms, numSqft){this.bedrooms = bedroomsthis.bathrooms = bathroomsthis.numSqft = numSqft} 復(fù)制代碼

注意一些事:

• 函數(shù)名的大小寫
• 關(guān)鍵字this!!!
• 我們將屬性附加到關(guān)鍵字“this”上。我們希望關(guān)鍵字“this”指的是我們將從構(gòu)造函數(shù)函數(shù)中創(chuàng)建的對(duì)象，我們?cè)撊绾巫瞿?

2.使用構(gòu)造函數(shù)創(chuàng)建對(duì)象

function House(bedrooms,bathrooms,numSqft) {this.bedrooms = bedroomsthis.batnrooms = bathroomsthis.numSqft = numSqft}// testvar firstHouse = Houes(2,2,1000)firstHouse //undefined .... 復(fù)制代碼

為什么不起作用！！

• 我們沒有從函數(shù)中返回任何東西所以我們的House函數(shù)返回沒有定義的
• 我們沒有顯式地綁定關(guān)鍵字'this'或?qū)⑺旁诼暶鞯膶?duì)象中。這意味著關(guān)鍵字“This”的值將是全局對(duì)象，這不是我們想要的!

解決辦法 使用關(guān)鍵字new

function House(bedrooms,bathrooms,numSqft) {this.bedrooms = bedroomsthis.batnrooms = bathroomsthis.numSqft = numSqft}// testvar firstHouse = new House(2,2,1000);firstHouse.bedrooms; // 2firstHouse.bathrooms; // 2firstHouse.numSqft; // 1000 復(fù)制代碼

思考關(guān)鍵字new做了什么

• 首先, 關(guān)鍵字new創(chuàng)建了一個(gè)新的空對(duì)象
• 然后，它把關(guān)鍵字this設(shè)置到了這個(gè)空對(duì)象上
• 添加一條 ‘return this’ 在函數(shù)的末尾
• 執(zhí)行原型連接操作 {它將一個(gè)屬性添加到名為“proto”的空對(duì)象上，這個(gè)空對(duì)象將構(gòu)造函數(shù)上的prototype屬性鏈接到空對(duì)象上(后面會(huì)詳細(xì)介紹)}

練習(xí) 為Dog創(chuàng)建一個(gè)構(gòu)造函數(shù),每個(gè)Dog都有姓名(name),年齡(age)屬性, 還有bark方法

function Dog(name, age) {this.name = name;this.age = age;this.bark = function() {console.log(this.name + ' 汪汪汪')}}// test var dog1 = new Dog("小黃",1)var dog2 = new Dog("小美",2)dog1.bark() // 小黃 汪汪汪dog2.bark() // 小美 汪汪汪 復(fù)制代碼

3.多個(gè)構(gòu)造函數(shù)

分別為 Car 和 Motorcycle 創(chuàng)建一個(gè)構(gòu)造函數(shù)

function Car(make, model, year) {this.make = make;this.model = model;this.year = year;this.numWheels = 4} 復(fù)制代碼 function Motorcycle(make, model, year) {this.make = make;this.model = model;this.year = year;this.numWheels = 2} 復(fù)制代碼

摩托車的功能有重復(fù)。有沒有辦法“借用”汽車功能并在摩托車功能中調(diào)用它? 使call/apply

function Car(make, model, year){this.make = make;this.model = model;this.year = year;this.numWheels = 4;}function Motorcycle(make, model, year){//using callCar.call(this, make, model, year)this.numWheels = 2}function Motorcycle(make, model, year){// using applyCar.apply(this, [make,model,year]);this.numWheels = 2;}function Motorcycle(){ // 我們甚至不需要傳遞參數(shù)!// 更好的用法是使用apply和argumentsCar.apply(this, arguments);this.numWheels = 2;} 復(fù)制代碼

小結(jié)一下

• 面向?qū)ο缶幊淌且环N基于對(duì)象被一種藍(lán)圖構(gòu)建的模式，我們使用面向?qū)ο髮懜嗄K化和可共享的代碼
• 在支持OOP的語(yǔ)言中，我們將這些藍(lán)圖稱為“類”，而從它們創(chuàng)建的對(duì)象稱為“實(shí)例”
• 由于我們?cè)贘avaScript中沒有內(nèi)置的類支持，所以我們使用函數(shù)來模擬類。這些構(gòu)造函數(shù)通過使用new關(guān)鍵字創(chuàng)建對(duì)象
• 我們可以通過call或apply來避免多個(gè)構(gòu)造函數(shù)中的重復(fù)

總結(jié)

以上是生活随笔為你收集整理的Javascript 面向对象编程(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。