javascript原型

Have you wondered what happens when you freeze the prototype of an object? Let's find out together.

您是否想過凍結對象的原型時會發生什么？ 讓我們一起找出答案。

對象 (Objects)

In JavaScript, objects are dynamic collections of properties with a “hidden” property. We start by creating such an object using the object literal syntax.

在JavaScript中，對象是具有“隱藏”屬性的動態屬性集合。 我們首先使用對象文字語法創建此類對象。

const counter = {count: 0,increment(){this.count += 1;return this.count;},decrement(){this.count -= 1;return this.count}  
}console.log(counter.increment())

counter is an object with a field and two methods operating on it.

counter是一個具有字段和在其上操作的兩種方法的對象。

樣機 (Prototypes)

Objects can inherit properties from prototypes. As a matter of fact, the counter object already inherits from the Object.prototype object.

對象可以從原型繼承屬性。 實際上， counter對象已經從Object.prototype對象繼承。

For example we can call the toString() method on the counter object even if we haven’t defined it.

例如，即使沒有定義，我們也可以在counter對象上調用toString()方法。

counter.toString();

The best way to work with prototypes is to extract out the methods in the prototype and then share them between all objects having the same behavior. Let’s do that using Object.create().

處理原型的最佳方法是提取原型中的方法，然后在具有相同行為的所有對象之間共享它們。 讓我們使用Object.create()做到這一點。

const counterPrototype = {increment(){this.count += 1;return this.count;},decrement(){this.count -= 1;return this.count}
}const counter = Object.create(counterPrototype);
counter.count = 0;
console.log(counter.increment())
//1

The Object.create() creates a new object, using an existing object as the prototype of the new object. ?counter has ?counterPrototype as its prototype.

Object.create()使用現有對象作為新對象的原型創建一個新對象。 counter具有counterPrototype作為其原型。

The prototype system is flexible but has some downfalls. All properties are public and can be changed.

原型系統很靈活，但存在一些缺點。 所有屬性都是公開的，可以更改。

For example, we can redefine the implementation of the increment() object in the counter object.

例如，我們可以在counter對象中重新定義increment()對象的實現。

const counter = Object.create(counterPrototype);
counter.count = 0;counter.increment = function(){console.log('increment')
}console.log(counter.increment());
//"increment"

凍結原型 (Freezing Prototypes)

Let’s see what happens if we freeze the prototype. Freezing an object doesn’t allow us to add, remove, or change its properties.

讓我們看看如果凍結原型會發生什么。 凍結對象不允許我們添加，刪除或更改其屬性。

const counterPrototype = Object.freeze({increment(){this.count += 1;return this.count;},decrement(){this.count -= 1;return this.count}
});counterPrototype.increment = function(){console.log('increment')
}
//Cannot assign to read only property 'increment' of object '#'

The Object.freeze() freezes an object. A frozen object can no longer be changed. We cannot add, edit, or remove properties from it.

Object.freeze()凍結對象。 凍結的對象無法再更改。 我們無法添加，編輯或刪除其中的屬性。

Now take a look at what happens when trying to change the method in the counter object inheriting from counterPrototype.

現在來看一下嘗試更改從counterPrototype繼承的counter對象中的方法時會發生什么。

const counter = Object.create(counterPrototype);
counter.count = 0;counter.increment = function(){console.log('increment')
}
//Cannot assign to read only property 'increment' of objectconsole.log(counter.increment());
//1

As you can see now that the prototype is frozen we are not able to change the increment() method in the counter object.

如您現在所見，原型已凍結，我們無法在counter對象中更改increment()方法。

回顧 (Recap)

Objects have a hidden property referring their prototype.

對象具有引用其原型的隱藏屬性。

The prototype is usually used to keep the methods that are shared between different objects.

原型通常用于保留在不同對象之間共享的方法。

Freezing the prototype does not allow us to change those properties in the objects inheriting from that prototype. The other properties can be changed.

凍結原型不允許我們更改從該原型繼承的對象中的那些屬性。 其他屬性可以更改。

Discover Functional JavaScript was named one of the best Functional Programming books by BookAuthority!

發現功能JavaScript被稱為 BookAuthority 最好的函數式編程書籍 ！

For more on applying functional programming techniques to React take a look at Functional React.

有關將函數式編程技術應用于React的更多信息，請查看Functional React 。

Learn functional React, in a project-based way, with Functional Architecture with React and Redux.

通過帶有React和Redux的功能架構 ，以基于項目的方式學習功能性React 。

翻譯自: https://www.freecodecamp.org/news/what-happens-when-you-freeze-a-prototype/

javascript原型