好程序員web前端培訓分享詳解JavaScript學習筆記構造函數

　　好程序員web前端培訓分享詳解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
缺點： 一摸一樣的函數出現了兩次，佔用了兩個空間地址

怎麼解決這個問題呢？
就需要用到一個東西，叫做 原型