javascript原型_在JavaScript中冻结原型时会发生什么

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 。