學習目標：
- 掌握深入對象
學習內容：
- 創建對象三種方式
- 構造函數
- 實例成員&靜態成員
創建對象三種方式：
- 利用對象字面量創建對象
const o = {name: '佩奇'}
- 利用
new Object創建對象
const obj = new Object({ uname: '雪碧寶寶' })console.log(obj)
- 利用構造函數創建對象
<title>自己定義構造函數創建對象</title>
</head><body><script>//創建一個豬 構造函數function Pig(uname, age) {this.uname = unamethis.age = age}// console.log(new Pig('佩奇', 6))// console.log(new Pig('喬治', 3))const p = new Pig('佩奇', 6)console.log(p)// const pepa = { uname: '佩奇', age: 6 }// const obj = new Object()</script></body>
構造函數：
構造函數：是一種特殊的函數，主要用來初始化對象。
使用場景：常規的{...}語法允許創建一個對象。比如我們創建了佩奇的對象，繼續創建喬治的對象還需要重新寫一遍，此時通過構造函數來快速創建多個類似的對象。
//創建一個豬 構造函數function Pig(uname, age) {this.uname = unamethis.age = age}// console.log(new Pig('佩奇', 6))// console.log(new Pig('喬治', 3))const p = new Pig('佩奇', 6)const Georage = new Pig('喬治', 3)console.log(p)
注意：
構造函數在技術上是常規函數。
不過有兩個約定：
- 它們對的命名以大寫字母開頭。
- 它們只能由
new操作符來執行。
說明：
3. 使用new關鍵字調用函數的行為被稱為實例化。
4. 實例化構造函數時沒有參數時可以省略( )。
5. 構造函數內部無需寫return，返回值即為新創建的對象。
6. 構造函數內部的return返回的值無效，所以不要寫return。
7. new Object( )、new Date( )也是實例化構造函數。
- 小結：
- 構造函數的作用是什么？怎么寫呢？
構造函數是來快速創建多個類似的對象。
大寫字母開頭的函數。
- new關鍵字調用函數的行為被稱為？
實例化。
- 構造函數內部需要寫return嗎，返回值是什么？
不需要。
構造函數自動返回創建的新的對象。
- 練習：
<title>練習-利用構造函數創建多個對象</title>
</head><body><script>function Goods(name, price, count) {this.name = namethis.price = pricethis.count = count}const mi = new Goods('小米', 1999, 20)console.log(mi)const hw = new Goods('華為', 3999, 59)console.log(hw)const vv = new Goods('vivo', 1888, 100)console.log(vv)// const date = new Date('2024-7-9')// console.log(data)</script></body>
- 實例化執行過程
說明：
- 創建新對象。
- 構造函數
this指向新對象。 - 執行構造函數代碼，修改
this，添加新的屬性。 - 返回新對象。
//創建一個豬 構造函數function Pig(uname, age) {this.uname = unamethis.age = age}// console.log(new Pig('佩奇', 6))// console.log(new Pig('喬治', 3))const p = new Pig('佩奇', 6)const Georage = new Pig('喬治', 3)console.log(p)
實例成員&靜態成員：
- 實例成員
通過構造函數創建的對象稱為實例對象，實例對象中的屬性和方法稱為實例成員。
說明：
- 實例對象的屬性和方法即為實例成員。
- 為構造函數傳入參數，動態創建結構相同但值不同的對象。
- 構造函數創建的實例對象彼此獨立互不影響。
//實例成員和靜態成員//1.實例成員：實例對象上的屬性和方法屬于實例成員function Pig(name) {this.name = name}const peiqi = new Pig('佩奇')const qiaozhi = new Pig('喬治')//構造函數創建的實例對象彼此獨立互不影響peiqi.name = '小豬佩奇' //實例屬性peiqi.sayHi = () => { //實例方法console.log('hi~')}console.log(peiqi)console.log(qiaozhi)//為構造函數傳入參數，動態創建結構相同但值不同的對象console.log(peiqi === qiaozhi) //false
- 靜態成員
構造函數的屬性和方法被稱為靜態成員（靜態屬性和靜態方法）。
說明：
- 靜態成員只能構造函數來訪問。
- 靜態方法中的
this指向構造函數。
比如Date.now( )、Math.PI、Math.random( )
//2.靜態成員：構造函數上的屬性和方法稱為靜態成員function Pig(name) {this.name = name}Pig.eyes = 2 //靜態屬性Pig.sayHi = function () { //靜態方法console.log(this)}Pig.sayHi()console.log(Pig.eyes) //2
- 小結：
- 實例成員（屬性和方法）寫在誰身上？
實例對象的屬性和方法即為實例成員。
實例對象相互獨立，實例成員當前實例對象使用。
- 靜態成員（屬性和方法）寫在誰身上？
構造函數的屬性和方法被稱為靜態成員。
靜態成員只能構造函數訪問。
修改時區為東八區)
)