JavaScript教程全套影片合集：建構函式內容講解

JavaScript 是世界上最流行的指令碼語言。 JavaScript 是屬於 web 的語言，它適用於 PC、膝上型電腦、平板電腦和行動電話。 JavaScript 被設計為向 HTML 頁面增加互動性。 許多 HTML 開發者都不是程式設計師，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段新增到網頁中。下面給大家分享下JavaScript教程全套影片合集：建構函式內容講解。

物件導向

首先，我們要明確，物件導向不是語法，是一個思想，是一種 程式設計模式。

面向： 面（臉），向（朝著）

程式導向： 臉朝著過程 =》 關注著過程的程式設計模式

物件導向： 臉朝著物件 =》 關注著物件的程式設計模式

實現一個效果

在程式導向的時候，我們要關注每一個元素，每一個元素之間的關係，順序，。。。

在程式導向的時候，我們要關注的就是找到一個物件來幫我做這個事情，我等待結果

例子 ： 我要吃麵條

程式導向

用多少麵粉

用多少水

怎麼和麵

怎麼切面條

做開水

煮麵

吃麵

物件導向

找到一個麵館

叫一碗麵

等著吃

物件導向就是對程式導向的封裝

我們以前的程式設計思想是，每一個功能，都按照需求一步一步的逐步完成

我們以後的程式設計思想是，每一個功能，都先創造一個 麵館，這個 麵館 能幫我們作出一個 面（完成這個功能的物件），然後用 麵館 創造出一個 面，我們只要等到結果就好了

插個小訊息，也方便想學習入行成為程式設計師的同學，在文章下方留言即可試聽課程外加領取千鋒HTML5、UI互動設計、PHP、Java+雲資料、大資料開發、VR/AR/Unity遊戲開發、Python人工智慧、Linux雲端計算、全棧軟體測試、網路安全等全部的影片學習教程。

建立物件的方式

因為物件導向就是一個找到物件的過程

所以我們先要了解如何建立一個物件

呼叫系統內建的建構函式建立物件

js 給我們內建了一個 Object 建構函式

這個建構函式就是用來創造物件的

當 建構函式 和 new 關鍵字連用的時候，就可以為我們創造出一個物件

因為 js 是一個動態的語言，那麼我們就可以動態的向物件中新增成員了

// 就能得到一個空物件

var o1 = new Object()

// 正常操作物件

o1.name = 'Jack'

o1.age = 18

o1.gender = '男'

字面量的方式建立一個物件

直接使用字面量的形式，也就是直接寫 {}

可以在寫的時候就新增好成員，也可以動態的新增

// 字面量方式建立物件

var o1 = {

name: 'Jack',

age: 18,

gender: '男'

}

// 再來一個

var o2 = {}

o2.name = 'Rose'

o2.age = 20

o2.gender = '女'

使用工廠函式的方式建立物件

先書寫一個工廠函式

這個工廠函式里面可以創造出一個物件，並且給物件新增一些屬性，還能把物件返回

使用這個工廠函式創造物件

// 1. 先建立一個工廠函式

function createObj() {

// 手動建立一個物件

var obj = new Object()

// 手動的向物件中新增成員

obj.name = 'Jack'

obj.age = 18

obj.gender = '男'

// 手動返回一個物件

return obj

}

// 2. 使用這個工廠函式建立物件

var o1 = createObj()

var o2 = createObj()

使用自定義建構函式建立物件

工廠函式需要經歷三個步驟

手動建立物件

手動新增成員

手動返回物件

建構函式會比工廠函式簡單一下

自動建立物件

手動新增成員

自動返回物件

先書寫一個建構函式

在建構函式內向物件新增一些成員

使用這個建構函式創造一個物件（和 new 連用）

建構函式可以建立物件，並且建立一個帶有屬性和方法的物件

物件導向就是要想辦法找到一個有屬性和方法的物件

物件導向就是我們自己製造 建構函式 的過程

// 1. 先創造一個建構函式

function Person(name, gender) {

this.age = 18

this.name = name

this.gender = gender

}

// 2. 使用建構函式建立物件

var p1 = new Person('Jack', 'man')

var p2 = new Person('Rose', 'woman')

建構函式詳解

我們瞭解了物件的建立方式

我們的物件導向就是要麼能直接得到一個物件

要麼就弄出一個能創造物件的東西，我們自己創造物件

我們的建構函式就能創造物件，所以接下來我們就詳細聊聊 建構函式

建構函式的基本使用

和普通函式一樣，只不過 呼叫的時候要和 new 連用，不然就是一個普通函式呼叫

function Person() {}

var o1 = new Person() // 能得到一個空物件

var o2 = Person() // 什麼也得不到，這個就是普通函式呼叫

注意： 不寫 new 的時候就是普通函式呼叫，沒有創造物件的能力

首字母大寫

function person() {}

var o1 = new person() // 能得到一個物件

function Person() {}

var o2 = new Person() // 能得到一個物件

注意： 首字母不大寫，只要和 new 連用，就有創造物件的能力

當呼叫的時候如果不需要傳遞引數可以不寫 ()，建議都寫上

function Person() {}

var o1 = new Person() // 能得到一個空物件

var o2 = new Person // 能得到一個空物件

注意： 如果不需要傳遞引數，那麼可以不寫 （），如果傳遞引數就必須寫

建構函式內部的 this，由於和 new 連用的關係，是指向當前例項物件的

function Person() {

console.log(this)

}

var o1 = new Person() // 本次呼叫的時候，this => o1

var o2 = new Person() // 本次呼叫的時候，this => o2

注意： 每次 new 的時候，函式內部的 this 都是指向當前這次的例項化物件

因為建構函式會自動返回一個物件，所以建構函式內部不要寫 return

你如果 return 一個基本資料型別，那麼寫了沒有意義

如果你 return 一個引用資料型別，那麼建構函式本身的意義就沒有了

使用建構函式建立一個物件

我們在使用建構函式的時候，可以透過一些程式碼和內容來向當前的物件中新增一些內容

function Person() {

this.name = 'Jack'

this.age = 18

}

var o1 = new Person()

var o2 = new Person()

我們得到的兩個物件裡面都有自己的成員 name 和 age

我們在寫建構函式的時候，是不是也可以新增一些方法進去呢？

function Person() {

this.name = 'Jack'

this.age = 18

this.sayHi = function () {

console.log('hello constructor')

}

}

var o1 = new Person()

var o2 = new Person()

顯然是可以的，我們的到的兩個物件中都有 sayHi 這個函式

也都可以正常呼叫

但是這樣好不好呢？缺點在哪裡？

function Person() {

this.name = 'Jack'

this.age = 18

this.sayHi = function () {

console.log('hello constructor')

}

}

// 第一次 new 的時候， Person 這個函式要執行一遍

// 執行一遍就會創造一個新的函式，並且把函式地址賦值給 this.sayHi

var o1 = new Person()

// 第二次 new 的時候， Person 這個函式要執行一遍

// 執行一遍就會創造一個新的函式，並且把函式地址賦值給 this.sayHi

var o2 = new Person()

這樣的話，那麼我們兩個物件內的 sayHi 函式就是一個程式碼一摸一樣，功能一摸一樣

但是是兩個空間函式，佔用兩個記憶體空間

也就是說 o1.sayHi 是一個地址，o2.sayHi 是一個地址

所以我們執行 console.log(o1 === o2.sayHi) 的到的結果是 false

缺點： 一摸一樣的函式出現了兩次，佔用了兩個空間地址