2. 程式人生 > 其它 >JavaScript高階程式設計--資料型別(2)_Object

JavaScript高階程式設計--資料型別(2)_Object

阿新 • • 發佈：2021-02-11

技術標籤：JavaScriptjsobject繼承建立物件深拷貝

文章較長，建議收藏以便瀏覽

《JavaScript高階程式設計(第三版)》學習總結

Object

  Object型別即物件型別，在ECMAScript中，物件其實就是一組資料和功能的集合。我們可以使用new操作符來建立：

let obj = new Object()

單單這一行程式碼，就可以引申出一系列疑問。建立的物件有什麼屬性和方法？new操作符幹了啥？建立物件有哪些方式？既然是物件怎麼實現繼承？怎麼實現物件深拷貝？and so on.如果一下子全都能說明白透徹的話，我斑願稱你為最強 。接下來我們挨個來剖析一下這些問題。

建立的物件有什麼屬性和方法？

我們在控制檯列印一下剛才宣告的obj例項，得到以下結果，在這裡就又得引入原型和原型鏈的概念，我就不做過多闡述了，可以參考JS中的原型和原型鏈（圖解）。下面說一下里面的具體屬性。
在這裡插入圖片描述

  • constructor：儲存著用於建立當前物件的函式。在這裡及是Object()。
  • hasOwnProperty(propertyName)：用於檢查給定的屬性在當前物件例項中是否存在。其中，作為引數的屬性名必須以字串的形式指定（eg: obj.hasOwnProperty("name")）。
  • isPrototypeOf(object)：用於檢查傳入的物件是否是另一個物件的原型。
  • propertyIsEnumerable(propertyName)：用於檢查給定的屬性在當前物件例項中是否能夠使用for-in來枚舉出來，可以用來區分例項屬性和原型屬性。
  • toLocaleString()：返回物件的字串表示，該字串與執行環境的地區對應。
  • toString()：返回物件的字串表示。
  • valueOf()：返回物件的字串、數值或布林值表示。通常與toString()方法的返回值相同。JS中toString()、toLocaleString()、valueOf()的區別

以上是官方介紹Object的每個例項都具有的屬性和方法，但是控制檯列印的不僅僅只有這些，還有下面的，我們繼續看：

  • _ _defineGetter _ _
    ：給物件新增getter方法
  • _ _defineSetter _ _：給物件新增setter方法
  • _ _lookupGetter _ _：返回getter的定義函式
  • _ _lookupSetter _ _：返回setter的定義函式
let obj =  new Object()
// name新增getter
obj.__defineGetter__('name', ()=>this.name)
console.log(obj.name) // null
obj.name = "luffy"
// 此時name還沒有setter方法，因此不能賦值
console.log(obj.name) // null
// name新增setter
obj.__defineSetter__('name',(name)=>(this.name = name))
obj.name = "luffy"
// 此時可以看到name賦值成功
console.log(obj.name) // luffy
// 返回相應的定義函式
console.log(obj.__lookupGetter__('name')) // ()=>this.name
console.log(obj.__lookupSetter__('name')) // (name)=>(this.name = name)
  • get _ _ proto _ _：獲取_ _proto _ _指向，用法就是obj. __ proto __
  • set _ _ proto _ _：設定_ _proto _ _指向，用法就是obj. __ proto __ = 物件

new操作符幹了啥？

  1. 建立一個空物件
    let obj = {}
  2. 將空物件的__proto__指向建構函式的prototype，讓空物件繼承建構函式的原型
    obj.__proto__ = Object.prototype
  3. 將建構函式的this指向新物件，並執行建構函式為新物件新增屬性
    Object.call(obj)
  4. 返回新物件
    return obj

建立物件有哪些方式？

建立單個物件的話採用以下兩個方式即可：

  • new操作符+Object建構函式

    let obj = new Object()
obj.name = "luffy"

  • 物件字面量

    let obj = {
	name: "luffy"
}

但是平常敲程式碼的業務中，往往需要建立很多物件，如果使用以上兩種方法的話，會產生大量重複程式碼，產生程式碼冗餘問題，因此以下幾種方法我們也需要掌握：

  • 工廠模式：用函式來封裝以特定的介面建立物件的細節
    • 缺點：沒有解決物件識別的問題(即沒辦法知道一個物件的型別)
function createObj(name){
	let obj = new Object()
	obj.name = name
	obj.sayName = () =>{
		console.log(this.name)
	}
	return obj
}
let obj = createObj("luffy")
  • 建構函式模式
    • 和工廠模式的不同之處：沒有顯示地建立物件；直接將屬性和方法賦給了this物件；沒有return語句。
    • 缺點：每個方法都要在每個例項上重新建立一遍，即下面的sayName()，可以通過把函式定義轉移到建構函式外部來解決這個問題。
function ObjFn(name){
	this.name = name
	this.sayName = ()=>{
		console.log(this.name)
	}
}
let obj = new ObjFn("luffy")
//不通過new呼叫的話，它就是一個普通函式，
//那麼執行的屬性和方法在瀏覽器中就會指向window物件，
//就能得到window.sayName()的結果為"who"
ObjFn("who") 

// 優化版
function ObjFn(name){
	this.name = name
	this.sayName = sayName
}
const sayName = ()=>{
	console.log(this.name)
}
  • class語法糖（需要與時俱進不是(っ•̀ω•́)っ✎⁾⁾ ）
class Obj { // 注意命名規範
	constructor(name){
		this.name = name
	}
	sayName(){
		console.log(this.name)
	}
}
let obj = new Obj("luffy")
  • 原型模式
    • 優點：不必在建構函式中定義物件例項的資訊，而是可以將這些資訊直接新增到物件原型中。
// 初始寫法
function Obj() {
	Obj.prototype.name = "luffy"
	Obj.prototype.sayName = () =>{
		console.log(this.name)
	}
}
let obj1 = new Obj()
let obj2 = new Obj()
obj1.name = "Tom" // 不會修改原型物件的name屬性，而是例項物件添加了一個同名屬性
obj1.sayName() // Tom,訪問例項物件的name屬性，遮蔽原型物件中的同名屬性
obj2.sayName() // luffy,訪問原型物件的name屬性
// 進階寫法
function Obj(){}
Obj.prototype = {
	// constructor: Obj, // 設定constructor屬性的指向
	name: "luffy",
	sayName: ()=>{
		console.log(this.name)
	}
}
  • 組合使用建構函式模式和原型模式
    • 建構函式模式用於定義例項屬性，原型模式用於定義方法和共享的屬性。最大限度節省了記憶體，還支援向建構函式傳遞引數。
function Obj(name){
	this.name = name
}
Obj.prototype = {
	constructor: Obj,
	sayName: ()=>{
		console.log(this.name)
	}
}
let obj = new Obj("luffy")
  • 寄生建構函式模式
    • 就是相當於使用new來呼叫了工廠模式，返回的物件與建構函式以及建構函式的原型屬性之間沒有關係，酌情使用！
function createObj(name){
	let obj = new Object()
	obj.name = name
	obj.sayName = () =>{
		console.log(this.name)
	}
	return obj
}
let obj = new createObj("luffy")
  • 穩妥建構函式模式
    • 只能呼叫建構函式內的方法去訪問其資料成員。
function createObj(name){
	let obj = new Object()
	obj.sayName = () =>{
		console.log(name)
	}
	return obj
}
let obj = new createObj("luffy")
obj.sayName() // luffy

既然是物件怎麼實現繼承？

  • 原型鏈
    • 缺點：包含引用型別值的原型會被所有例項共享;在建立子型別的例項時，不能向超型別的建構函式中傳遞引數。
function Animal(){
    this.ages = [1,2,3]
}
function Cat(){
}
Cat.prototype = new Animal()
let cat1 = new Cat()
let cat2 = new Cat()
console.log(cat1.ages) //[ 1, 2, 3 ]
console.log(cat2.ages)//[ 1, 2, 3 ]
cat1.age.push(4) // 修改cat1會影響cat2
console.log(cat1.ages)//[ 1, 2, 3, 4 ]
console.log(cat2.ages)//[ 1, 2, 3, 4 ]
  • 借用建構函式
    • 缺點：函式複用問題
function Animal(name){
	this.name = name
    this.ages = [1,2,3]
}
function Cat(){
	Cat.call(this, "yoyo")
}
  • 組合繼承
    • 缺點：無論什麼時候都會呼叫兩次超型別的建構函式，一次是建立子型別原型的時候，一次是在建構函式內部。
function Animal(name){
	this.name = name
    this.ages = [1,2,3]
    this.sayName = () =>{
		console.log(this.name)
	}
}
function Cat(){
	Cat.call(this, "yoyo") // 繼承屬性
}
Cat.prototype = new Animal() // 繼承方法
  • 原型式繼承
    • ES5新增的Object.create()方法規範化了原型式繼承。
let Obj = {
	name: "luffy"
} 
let obj1 = Object.create(Obj) // 一個引數
let obj2 = Object.create(Obj,{age:{value: 23}}) // 兩個引數
  • 寄生式繼承
let Obj = {
	name: "luffy"
} 
function createObj(origin){
	let clone = new Object(origin)
	clone.sayName = (name) =>{ // 可以增強物件
		console.log(name)
    }
    return clone
}
let obj = createObj(Obj)
obj.sayName(obj.name) // luffy
  • 寄生組合式繼承
function inheritPrototype(subType,superType){
	let prototype1 = new Object(superType.prototype) // 建立物件
	prototype1.constructor = subType // 增強物件
	subType.prototype = prototype1 // 繫結物件
}
function Animal(name){
	this.name = name
    this.ages = [1,2,3]
}
Animal.prototype.sayName = () =>{
	console.log(this.name)
}
function Cat(){
	Cat.call(this, "yoyo") // 繼承屬性
}
inheritPrototype(Cat, Animal)
  • class對應的extends繼承
    • 不可繼承常規物件(eg: let Animal={...})
class Animal {
	constructor(){
		this.ages = [1,2,3]
	}
}
class Cat extends Animal{
	constructor(){
		super()
	}
}

怎麼實現物件深拷貝？

預設情況下物件之間的直接賦值都是淺拷貝，一個物件的屬性如果是基本資料型別, 那麼也都是深拷貝，如果物件的屬性包含了引用資料型別, 才真正的區分深拷貝和淺拷貝。

  • 物件的拷貝：將一個物件賦值給另外一個物件
  • 淺拷貝：將A物件賦值給B物件，修改B物件的屬性和方法會影響到A物件的屬性和方法
let obj = {a:1,b:2,c:[1,2]}
let obj1 = {}
for(let key in obj){
    obj1[key] = obj[key]
} // 等同於 Object.assign(obj1,obj)
obj1.c.push(3);
console.log(obj.c) // [1,2,3]
  • 深拷貝：將A物件賦值給B物件，修改B物件的屬性和方法不會影響到A物件的屬性和方法(附上一個大佬實現的包含所有型別的深拷貝方法)
const deepClone = (obj, hash = new WeakMap())=> {
    if (obj === null) return obj
    if (obj instanceof Date) return new Date(obj)
    if (obj instanceof RegExp) return new RegExp(obj)
    if (typeof obj !== 'object') return obj
    if (hash.get(obj)) return hash.get(obj)
    let cloneObj = new obj.constructor()
    hash.set(obj, cloneObj)
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        cloneObj[key] = this.deepClone(obj[key], hash)
      }
    }
    return cloneObj
}

關於Object的知識點，真是三天三夜都聊不完，就到這裡吧。

相關推薦

JavaScript高階程式設計--資料型別(2)_Object

技術標籤：JavaScriptjsobject繼承建立物件深拷貝 文章較長，建議收藏以便瀏覽 《JavaScript高階程式設計(第三版)》學習總結

Javascript高階之資料型別

資料型別 typeof操作符 對一個值使用typeof操作符會返回下列字串之一 undefined 表示值已定義，未賦值

高階程式設計--資料型別（原子向量）

1 R 語言回顧 R是一種面向物件的、實用的陣列程式語言，其中的物件是專門的資料結構，儲存在RAM中，通過名稱或符號訪問。物件的名稱由大小寫字母、數字0～9、句號和下劃線組成。名稱是區分大小寫的，而且不能以數字

關於＜script＞標籤(來自《JavaScript高階程式設計》2.1[思維導圖])

2.1[思維導圖]) 補充： 源自HTML<script>標籤 HTML 4.01 與 HTML5之間的差異 在 HTML 4 中，“type” 屬性是必需的，但在 HTML5 中是可選的。 “async” 屬性是 HTML5 中的新屬性。 HTML5 中不再支

JavaScript高階程式設計 第5章 引用型別

技術標籤：# JavaScript高階程式設計javascript 5.3Date型別 new Date() 接收一個毫秒值，轉換成日期物件。

JavaScript高階程式設計之基本引用型別

目錄1、Date2、RegExp3、原始包裝型別前言： 引用值（物件）都是某個特定的引用型別的例項物件，例如 Date型別、Function型別，RegExp 正則表示式型別等等。內建了一些常用的引用型別給開發者使用。

JavaScript高階程式設計——第五章 引用型別

JavaScript高階程式設計（紅寶書） 第五章 引用型別 物件 陣列 基本的JavaScript型別

《JavaScript高階程式設計》學習筆記(4)——引用型別

　　歡迎關注本人的微信公眾號“前端小填填”，專注前端技術的基礎和專案開發的學習。

2020/6/10 JavaScript高階程式設計 BOM

BOM（瀏覽器物件模型）：提供用於訪問瀏覽器的物件。 8.1 window物件 window是BOM的核心物件，表示瀏覽器的一個例項。

2020/6/11 JavaScript高階程式設計 DOM

DOM（檔案物件模型）是針對HTML和XML檔案的一個API（應用程式介面）。他描繪了一個層次化的節點樹，允許開發人員新增、移除和修改頁面的某一部分。

JavaScript 06 基本資料型別

基本資料型別undefined，Boolean,Number,String，null 示例1: 聲明瞭但未賦值 當一個變數被聲明瞭，卻沒有賦值的時候，叫做 undefined

Java面向物件程式設計-資料型別和變數

第三章 資料型別和變數 程式的基本功能就是處理資料，程式用變量表示資料。

《JavaScript高階程式設計》筆記

基本概念 <noscript> <noscript>標籤：當頁面不支援script或禁用了script時會顯示<noscript>裡面的內容。

詳解JavaScript中的資料型別，以及檢測資料型別的方法

一.js中的資料型別有哪些? 在js中，基本資料型別有五種，分別是 string、number、boolean、null、undefined，不過在ES6中新增加的了一種基本資料型別Symbol(表示獨一無二的值)，其作用主要是從根本上防止屬性名的

JavaScript學習筆記——資料型別

js一直是我的心頭大患，我要堅持學習堅持寫筆記~除掉這個心頭大患~~哼哼~~ js裡有5種簡單資料型別：Undefined、Null、Boolean、Number 和 String。 還有一種複雜資料型別——Object。 我學的教學視訊是李

JavaScript高階程式設計 第三章 語言基礎

第三章 語言基礎 筆記基於JavaScript高階程式設計第四版，整理補充一些知識，以及一些自己的理解。

JavaScript高階程式設計（第四版） -- 隨筆 -- 陣列（未完）

陣列方法 .every() 與 .some() 傳給兩個個方法的函式都接收3個引數：陣列元素、元素索引和陣列本身。

JavaScript高階程式設計（第4版）知識點總結

介紹 JavaScript高階程式設計 第四版，在第三版的基礎上添加了ES6相關的內容。如let、const關鍵字，Fetch API、工作者執行緒、模組、Promise 等。適合具有一定程式設計經驗的 Web 應用開發人員閱讀。

JavaScript高階程式設計（第四版）學習筆記（第二章 HTML中的JavaScript）

技術標籤：javascriptjavascripthtmles6 第二章 HTML中的JavaScript 文章目錄 1.<script>元素

WEB基礎之：JavaScript中的資料型別操作

技術標籤：WEBjavascript JavaScript中的資料型別操作 1. 字串1.1 字串方法 2. 陣列2.1 訪問和修改陣列元素2.2 陣列方法2.2.1 字串和陣列之間的轉換2.2.2 新增和刪除陣列項