【JavaScript筆記】面對(duì)對(duì)象與構(gòu)造函數(shù)

這篇具有很好參考價(jià)值的文章主要介紹了【JavaScript筆記】面對(duì)對(duì)象與構(gòu)造函數(shù)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

筆記作用

了解面向?qū)ο缶幊讨械囊话愀拍?/p>
能夠基于構(gòu)造函數(shù)創(chuàng)建對(duì)象
理解 JavaScript 中一切皆對(duì)象的語(yǔ)言特征
理解引用對(duì)象類(lèi)型值存儲(chǔ)的的特征
掌握包裝類(lèi)型對(duì)象常見(jiàn)方法的使用

一、深入對(duì)象

了解面向?qū)ο蟮幕A(chǔ)概念，能夠利用構(gòu)造函數(shù)創(chuàng)建對(duì)象。

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

構(gòu)造函數(shù)是專(zhuān)門(mén)用于創(chuàng)建對(duì)象的函數(shù)，如果一個(gè)函數(shù)使用 new 關(guān)鍵字調(diào)用，那么這個(gè)函數(shù)就是構(gòu)造函數(shù)。

<script>
 ?// 定義函數(shù)
 ?function foo() {
 ? ?console.log('通過(guò) new 也能調(diào)用函數(shù)...');
  }
 ?// 調(diào)用函數(shù)
 ?new foo;
</script>

總結(jié)：

使用 new 關(guān)鍵字調(diào)用函數(shù)的行為被稱為實(shí)例化
實(shí)例化構(gòu)造函數(shù)時(shí)沒(méi)有參數(shù)時(shí)可以省略 ()
構(gòu)造函數(shù)的返回值即為新創(chuàng)建的對(duì)象
構(gòu)造函數(shù)內(nèi)部的 return 返回的值無(wú)效！

注：實(shí)踐中為了從視覺(jué)上區(qū)分構(gòu)造函數(shù)和普通函數(shù)，習(xí)慣將構(gòu)造函數(shù)的首字母大寫(xiě)。

2. 實(shí)例成員

通過(guò)構(gòu)造函數(shù)創(chuàng)建的對(duì)象稱為實(shí)例對(duì)象，實(shí)例對(duì)象中的屬性和方法稱為實(shí)例成員。

<script>
 ?// 構(gòu)造函數(shù)
 ?function Person() {
 ? ?// 構(gòu)造函數(shù)內(nèi)部的 this 就是實(shí)例對(duì)象
 ? ?// 實(shí)例對(duì)象中動(dòng)態(tài)添加屬性
 ? ?this.name = '小明'
 ? ?// 實(shí)例對(duì)象動(dòng)態(tài)添加方法
 ? ?this.sayHi = function () {
 ? ? ?console.log('大家好~')
 ?  }
  }
 ?// 實(shí)例化，p1 是實(shí)例對(duì)象
 ?// p1 實(shí)際就是 構(gòu)造函數(shù)內(nèi)部的 this
 ?const p1 = new Person()
 ?console.log(p1)
 ?console.log(p1.name) // 訪問(wèn)實(shí)例屬性
 ?p1.sayHi() // 調(diào)用實(shí)例方法
</script>

總結(jié)：

構(gòu)造函數(shù)內(nèi)部 this 實(shí)際上就是實(shí)例對(duì)象，為其動(dòng)態(tài)添加的屬性和方法即為實(shí)例成員
為構(gòu)造函數(shù)傳入?yún)?shù)，動(dòng)態(tài)創(chuàng)建結(jié)構(gòu)相同但值不同的對(duì)象

注：構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象彼此獨(dú)立互不影響。

3. 靜態(tài)成員

在 JavaScript 中底層函數(shù)本質(zhì)上也是對(duì)象類(lèi)型，因此允許直接為函數(shù)動(dòng)態(tài)添加屬性或方法，構(gòu)造函數(shù)的屬性和方法被稱為靜態(tài)成員。

<script>
 ?// 構(gòu)造函數(shù)
 ?function Person(name, age) {
 ? ?// 省略實(shí)例成員
  }
 ?// 靜態(tài)屬性
 ?Person.eyes = 2
 ?Person.arms = 2
 ?// 靜態(tài)方法
 ?Person.walk = function () {
 ? ?console.log('^_^人都會(huì)走路...')
 ? ?// this 指向 Person
 ? ?console.log(this.eyes)
  }
</script>

總結(jié)：

靜態(tài)成員指的是添加到構(gòu)造函數(shù)本身的屬性和方法
一般公共特征的屬性或方法靜態(tài)成員設(shè)置為靜態(tài)成員
靜態(tài)成員方法中的 this 指向構(gòu)造函數(shù)本身

二、內(nèi)置構(gòu)造函數(shù)

掌握各引用類(lèi)型和包裝類(lèi)型對(duì)象屬性和方法的使用。

在 JavaScript 中最主要的數(shù)據(jù)類(lèi)型有 6 種，分別是字符串、數(shù)值、布爾、undefined、null 和對(duì)象，常見(jiàn)的對(duì)象類(lèi)型數(shù)據(jù)包括數(shù)組和普通對(duì)象。

其中字符串、數(shù)值、布爾、undefined、null 也被稱為簡(jiǎn)單類(lèi)型或基礎(chǔ)類(lèi)型，對(duì)象也被稱為引用類(lèi)型。

在 JavaScript 內(nèi)置了一些構(gòu)造函數(shù)，絕大部的數(shù)據(jù)處理都是基于這些構(gòu)造函數(shù)實(shí)現(xiàn)的，JavaScript 基礎(chǔ)階段學(xué)習(xí)的 Date 就是內(nèi)置的構(gòu)造函數(shù)。

<script>
 ?// 實(shí)例化
    let date = new Date();
 ?
 ?// date 即為實(shí)例對(duì)象
 ?console.log(date);
</script>

甚至字符串、數(shù)值、布爾、數(shù)組、普通對(duì)象也都有專(zhuān)門(mén)的構(gòu)造函數(shù)，用于創(chuàng)建對(duì)應(yīng)類(lèi)型的數(shù)據(jù)。

1. 引用類(lèi)型

①Object

Object 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建普通對(duì)象。

<script>
 ?// 通過(guò)構(gòu)造函數(shù)創(chuàng)建普通對(duì)象
 ?const user = new Object({name: '小明', age: 15})
?
 ?// 這種方式聲明的變量稱為【字面量】
 ?let student = {name: '杜子騰', age: 21}
 ?
 ?// 對(duì)象語(yǔ)法簡(jiǎn)寫(xiě)
 ?let name = '小紅';
 ?let people = {
 ? ?// 相當(dāng)于 name: name
 ? ?name,
 ? ?// 相當(dāng)于 walk: function () {}
 ? ?walk () {
 ? ? ?console.log('人都要走路...');
 ?  }
  }
?
 ?console.log(student.constructor);
 ?console.log(user.constructor);
 ?console.log(student instanceof Object);
</script>

總結(jié)：

推薦使用字面量方式聲明對(duì)象，而不是 Object 構(gòu)造函數(shù)
Object.assign 靜態(tài)方法創(chuàng)建新的對(duì)象
Object.keys 靜態(tài)方法獲取對(duì)象中所有屬性
Object.values 表態(tài)方法獲取對(duì)象中所有屬性值

②Array

Array 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建數(shù)組。

<script>
 ?// 構(gòu)造函數(shù)創(chuàng)建數(shù)組
 ?let arr = new Array(5, 7, 8);
?
 ?// 字面量方式創(chuàng)建數(shù)組
 ?let list = ['html', 'css', 'javascript']
?
</script>

數(shù)組賦值后，無(wú)論修改哪個(gè)變量另一個(gè)對(duì)象的數(shù)據(jù)值也會(huì)相當(dāng)發(fā)生改變。

總結(jié)：

推薦使用字面量方式聲明數(shù)組，而不是 Array 構(gòu)造函數(shù)
實(shí)例方法 forEach 用于遍歷數(shù)組，替代 for 循環(huán) (重點(diǎn))
實(shí)例方法 filter 過(guò)濾數(shù)組單元值，生成新數(shù)組(重點(diǎn))
實(shí)例方法 map 迭代原數(shù)組，生成新數(shù)組(重點(diǎn))
實(shí)例方法 join 數(shù)組元素拼接為字符串，返回字符串(重點(diǎn))
實(shí)例方法 find 查找元素，返回符合測(cè)試條件的第一個(gè)數(shù)組元素值，如果沒(méi)有符合條件的則返回 undefined(重點(diǎn))
實(shí)例方法every 檢測(cè)數(shù)組所有元素是否都符合指定條件，如果所有元素都通過(guò)檢測(cè)返回 true，否則返回 false(重點(diǎn))
實(shí)例方法some 檢測(cè)數(shù)組中的元素是否滿足指定條件 如果數(shù)組中有元素滿足條件返回 true，否則返回 false
實(shí)例方法 concat 合并兩個(gè)數(shù)組，返回生成新數(shù)組
實(shí)例方法 sort 對(duì)原數(shù)組單元值排序
實(shí)例方法 splice 刪除或替換原數(shù)組單元
實(shí)例方法 reverse 反轉(zhuǎn)數(shù)組
實(shí)例方法 findIndex 查找元素的索引值

2. 包裝類(lèi)型

在 JavaScript 中的字符串、數(shù)值、布爾具有對(duì)象的使用特征，如具有屬性和方法，如下代碼舉例：

<script>
 ?// 字符串類(lèi)型
 ?const str = 'hello world!'
    // 統(tǒng)計(jì)字符的長(zhǎng)度（字符數(shù)量）
 ?console.log(str.length)
 ?
 ?// 數(shù)值類(lèi)型
 ?const price = 12.345
 ?// 保留兩位小數(shù)
 ?price.toFixed(2) // 12.34
</script>

之所以具有對(duì)象特征的原因是字符串、數(shù)值、布爾類(lèi)型數(shù)據(jù)是 JavaScript 底層使用 Object 構(gòu)造函數(shù)“包裝”來(lái)的，被稱為包裝類(lèi)型。

①String

String 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建字符串。

<script>
 ?// 使用構(gòu)造函數(shù)創(chuàng)建字符串
 ?let str = new String('hello world!');
?
 ?// 字面量創(chuàng)建字符串
 ?let str2 = '你好，世界！';
?
 ?// 檢測(cè)是否屬于同一個(gè)構(gòu)造函數(shù)
 ?console.log(str.constructor === str2.constructor); // true
 ?console.log(str instanceof String); // false
</script>

總結(jié)：

實(shí)例屬性 length 用來(lái)獲取字符串的度長(zhǎng)(重點(diǎn))
實(shí)例方法 split('分隔符') 用來(lái)將字符串拆分成數(shù)組(重點(diǎn))
實(shí)例方法 substring（需要截取的第一個(gè)字符的索引[,結(jié)束的索引號(hào)]） 用于字符串截取(重點(diǎn))
實(shí)例方法 startsWith(檢測(cè)字符串[, 檢測(cè)位置索引號(hào)]) 檢測(cè)是否以某字符開(kāi)頭(重點(diǎn))
實(shí)例方法 includes(搜索的字符串[, 檢測(cè)位置索引號(hào)]) 判斷一個(gè)字符串是否包含在另一個(gè)字符串中，根據(jù)情況返回 true 或 false(重點(diǎn))
實(shí)例方法 toUpperCase 用于將字母轉(zhuǎn)換成大寫(xiě)
實(shí)例方法 toLowerCase 用于將就轉(zhuǎn)換成小寫(xiě)
實(shí)例方法 indexOf 檢測(cè)是否包含某字符
實(shí)例方法 endsWith 檢測(cè)是否以某字符結(jié)尾
實(shí)例方法 replace 用于替換字符串，支持正則匹配
實(shí)例方法 match 用于查找字符串，支持正則匹配

注：String 也可以當(dāng)做普通函數(shù)使用，這時(shí)它的作用是強(qiáng)制轉(zhuǎn)換成字符串?dāng)?shù)據(jù)類(lèi)型。

②Number

Number 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建數(shù)值。

<script>
 ?// 使用構(gòu)造函數(shù)創(chuàng)建數(shù)值
 ?let x = new Number('10')
 ?let y = new Number(5)
?
 ?// 字面量創(chuàng)建數(shù)值
 ?let z = 20
?
</script>

總結(jié)：

推薦使用字面量方式聲明數(shù)值，而不是 Number 構(gòu)造函數(shù)
實(shí)例方法 toFixed 用于設(shè)置保留小數(shù)位的長(zhǎng)度文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-671573.html

到了這里，關(guān)于【JavaScript筆記】面對(duì)對(duì)象與構(gòu)造函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！