關于JavaScript 的對象的介紹是怎樣的

本篇文章為大家展示了關于JavaScript 的對象的介紹是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

1. 對象方法 & this

方法只是保存函數值的屬性。

簡單對象方法

let rabbit = {}; rabbit.speak = function(line) {     console.log("小兔子說： "+ line ); }; rabbit.speak("我還活著。")

輸出：

T小兔子說： 我還活著。

對象方法 & this

當一個函數作為方法被調用時，對象會將函數作為屬性并立即調用，就像在object.method()中一樣，其主體中的特殊變量this將指向被調用的對象。

function speak(line) {   console.log(this.type + "小兔子說：" + line) }; let whiteRabbit = {type: "白色", speak: speak}  whiteRabbit.speak("噢，我真可愛！")

輸出：

白色小兔子說：噢，我真可愛！

apply & call

function speak(line) {   console.log(`${this.type}的小兔子說：${line}` ); }; let whiteRabbit = {type: "白色", speak: speak};  speak.apply(whiteRabbit, ["你這個小壞蛋!"]); speak.call({type: "黑色"}, "嘿嘿，我不壞，你不愛!");

白色的小兔子說：你這個小壞蛋! 黑色的小兔子說：嘿嘿，我不壞，你不愛!

2.Prototype(原型)

• 幾乎所有的對象都有一個prototype

• prototype是另一個用作屬性的備用源的對象

• 當一個對象訪問自身沒有屬性時，它會從它的prototype搜索該屬性，如果沒有找到就繼續從它的prototype的prototype查找，依此類推，直到  null 為止。

空對象的原型

原型鏈最終的指向是Object的prototype, 而Object中的__proto__是null

let empty = {}; console.log(empty.toString); console.log(empty.toString());

輸出：

[Function: toString] [object Object]

其他對象(數組、函數等等)的默認屬性

• 許多對象沒有直接將Object.prototype作為自己的原型，但有自己的默認屬性

• 從Function.prototype派生的函數和從Array.prototype派生的數組

console.log(Object.getPrototypeOf(isNaN) ==             Function.prototype); console.log(Object.getPrototypeOf([]) == Array.prototype);

輸出：

true true

• Object.create 創建具有特定原型的對象

• protoRabbit充當所有兔子共享的屬性的容器

單個兔子對象(如殺手兔子)包含僅適用于自身的屬性(在本例中為type)，并從其原型派生共享屬性

let protoRabbit = {   speak: function (line) {     console.log(`${this.type}兔子說：${line}` );   } }  let killerRabbit = Object.create(protoRabbit) killerRabbit.type = '殺手' killerRabbit.speak('準備受死吧！')

輸出：

殺手兔子說：準備受死吧！

3.構造函數

— 構造函數原型

• 創建從某個共享原型派生的對象的更方便的方法是使用構造函數

• 在 JavaScript 中，調用前面帶有new關鍵字的函數會將其視為構造函數

• 構造函數將其this變量綁定到一個新對象，除非它顯式返回另一個對象值，否則此新對象將從調用中返回

• 用new創建的對象被稱為是其構造函數的實例

• 約定將構造函數的名稱大寫，以便于與其他函數區分開

function Rabbit(type) {     this.type = type; }  let killerRabbit = new Rabbit("killer"); let blackRabbit = new Rabbit("black"); console.log(blackRabbit.type);

輸出：

black

— 默認情況下，構造函數具有Object.prototype

• 構造函數(實際上是所有函數)會自動獲取一個名為prototype的屬性，默認情況下，該屬性包含一個從Object.prototype派生的普通空對象

• 使用此構造函數創建的每個實例都將此對象作為其原型

function Rabbit(type) {   this.type = type; }  let blackRabbit = new Rabbit("黑色"); Rabbit.prototype.speak = function(line) {   console.log(`${this.type}的兔子說：${line}` ); }; blackRabbit.speak("Boom...一波王炸！");

輸出：

黑色的兔子說：Boom...一波王炸！

4. 重寫派生屬性

— 相同的原型名稱

• 如果原型中有同名的屬性，則不會更改此屬性

• 該屬性被添加到對象本身

function Rabbit(type) {     this.type = type; } let blackRabbit = new Rabbit("black"); let killerRabbit = new Rabbit("killer");  Rabbit.prototype.teeth = "small"; console.log(killerRabbit.teeth); // small killerRabbit.teeth = "long, sharp, and bloody"; console.log(killerRabbit.teeth); // long, sharp, and bloody console.log(blackRabbit.teeth); // small console.log(Rabbit.prototype.teeth); // small

下面  console.log(blackRabbit.teeth)的結果是small，因為blackRabbit對象不具有teeth屬性，它繼承自Rabbit對象自己的teeth屬性，值為  small。

5. 原型的干擾

— 可枚舉與不可枚舉

let map = {}  function storePhi(event, phi) {   map[event] = phi }  storePhi('pizza', 0.069) storePhi('touched tree', -0.081)  Object.prototype.nonsense = 'hi'  for(let name in map) {   console.log(name) }  console.log('nonsense' in map) console.log('toString' in map)

輸出結果:

pizza touched tree nonsense true true

toString沒有出現在for/in循環中，但是in運算符中返回true，這是因為 JS 區分可枚舉屬性和不可枚舉屬性。

我們通過簡單分配創建的所有屬性都是可枚舉的，Object.prototype中的標準屬性都是不可改變的，這就是為什么它們不出現在這樣的for/in循環中的原因。

let map = {}; function storePhi(event, phi) {     map[event] = phi; }  storePhi("pizza", 0.069); storePhi("touched tree", -0.081);  Object.defineProperty(Object.prototype, "hiddenNonsense",                 {enumerable: false, value: "hi"})  for (var name in map) {     console.log(name) }  console.log(map.hiddenNonsense)

輸出：

pizza touched tree hi

通過使用Object.defineproperty函數可以定義自己的不可枚舉屬性，該函數允許我們控制要創建的屬性的類型，在該示例中，hiddenNonsense在  map 中，但在 for...in 中不會顯示。

— hasOwnProperty vs in 操作符

const map = {} console.log("toString" in map) console.log(map.hasOwnProperty("toString"))

輸出：

true false

hasOwnProperty方法告訴我們對象本身是否具有該屬性，而無需查看其原型,這通常是比in運算符提供給我們的信息更有用的信息。

因此，如果你對基礎對象原型感到困惑時，建議你可以這樣寫for/in循環:

for (var name in map) {     if (map.hasOwnProperty(name)) {         // ... this is an own property     } }

6.無原型對象

Object.create函數使我們能夠創建具有特定原型的對象。我們還可以傳遞null作為原型，用來創建不帶原型的新對象。

因此，我們不再需要hasOwnProperty，因為對象擁有的所有屬性都是它自己的屬性。現在，無論人們對Object.prototype做了什么，我們都可以安全地使用for/in循環

var map = Object.create(null); map["pizza"] = 0.069; console.log("toString" in map); // false console.log("pizza" in map); // true

上述內容就是關于JavaScript 的對象的介紹是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。