如何理解JavaScript中構造函數

如何理解JavaScript中構造函數，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

JavaScript學習筆記構造函數，面向對象：

· 　　首先，我們要明確，面向對象不是語法，是一個思想，是一種 編程模式。

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

· 面向過程： 臉朝著過程 =》 關注著過程的編程模式

· 面向對象： 臉朝著對象 =》 關注著對象的編程模式

· 實現一個效果

· 在面向過程的時候，我們要關注每一個元素，每一個元素之間的關系，順序，。。。

· 在面向過程的時候，我們要關注的就是找到一個對象來幫我做這個事情，我等待結果

· 例子 ： 我要吃面條

· 面向過程

· 用多少面粉

· 用多少水

· 怎么和面

· 怎么切面條

· 做開水

· 煮面

· 吃面

· 面向對象

· 找到一個面館

· 叫一碗面

· 等著吃

· 面向對象就是對面向過程的封裝

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

· 我們以后的編程思想是，每一個功能，都先創造一個 面館，這個 面館 能幫我們作出一個 面（完成這個功能的對象），然后用 面館 創造出一個 面，我們只要等到結果就好了

創建對象的方式

· 因為面向對象就是一個找到對象的過程

· 所以我們先要了解如何創建一個對象

調用系統內置的構造函數創建對象

· js 給我們內置了一個 Object 構造函數

· 這個構造函數就是用來創造對象的

· 當 構造函數 和 new 關鍵字連用的時候，就可以為我們創造出一個對象

· 因為 js 是一個動態的語言，那么我們就可以動態的向對象中添加成員了

// 就能得到一個空對象var o1 = new Object() // 正常操作對象o1.name = 'Jack'o1.age = 18o1.gender = '男'

字面量的方式創建一個對象

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

· 可以在寫的時候就添加好成員，也可以動態的添加

// 字面量方式創建對象var o1 = {

 name: 'Jack',

 age: 18,

 gender: '男'}// 再來一個var o2 = {}o2.name = 'Rose'o2.age = 20o2.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 => o1var 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.sayHivar o1 = new Person()

// 第二次 new 的時候， Person 這個函數要執行一遍// 執行一遍就會創造一個新的函數，并且把函數地址賦值給 this.sayHivar o2 = new Person()

· 這樣的話，那么我們兩個對象內的 sayHi 函數就是一個代碼一摸一樣，功能一摸一樣

· 但是是兩個空間函數，占用兩個內存空間

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

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

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

· 怎么解決這個問題呢？

· 就需要用到一個東西，叫做 原型

看完上述內容，你們掌握如何理解JavaScript中構造函數的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！