目的

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

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

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

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

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

基于對象概念的編程模式

這些對象是由類創(chuàng)建的，我們可以把類想象成一個藍圖，把這些對象叫做類的實例

盡量讓類抽象化和模塊化

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

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

1. 創(chuàng)建對象

想象我們要創(chuàng)建一些house對象,他們都有 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個房子 復(fù)制代碼

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

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

讓我們使用一個函數(shù)作為每個房子應(yīng)該是什么的藍圖——我們把這些函數(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)建的對象，我們該如何做呢?

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

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ū)⑺旁诼暶鞯膶ο笾小＿@意味著關(guān)鍵字“This”的值將是全局對象，這不是我們想要的!

解決辦法 使用關(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)建了一個新的空對象
• 然后，它把關(guān)鍵字this設(shè)置到了這個空對象上
• 添加一條 ‘return this’ 在函數(shù)的末尾
• 執(zhí)行原型連接操作 {它將一個屬性添加到名為“proto”的空對象上，這個空對象將構(gòu)造函數(shù)上的prototype屬性鏈接到空對象上(后面會詳細介紹)}

練習 為Dog創(chuàng)建一個構(gòu)造函數(shù),每個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òu)造函數(shù)

分別為 Car 和 Motorcycle 創(chuàng)建一個構(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基于對象被一種藍圖構(gòu)建的模式，我們使用面向?qū)ο髮懜嗄K化和可共享的代碼
• 在支持OOP的語言中，我們將這些藍圖稱為“類”，而從它們創(chuàng)建的對象稱為“實例”
• 由于我們在JavaScript中沒有內(nèi)置的類支持，所以我們使用函數(shù)來模擬類。這些構(gòu)造函數(shù)通過使用new關(guān)鍵字創(chuàng)建對象
• 我們可以通過call或apply來避免多個構(gòu)造函數(shù)中的重復(fù)

總結(jié)

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

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