blocks|key|1549319|text|您发布的代码正在按预期工作，因为来自A的属性被复制到B中。然而，这不是继承的示例，它只是一个浅浅的副本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549320|在您的示例中，所有属性都是原语，请考虑如果我们添加对A的引用会发生什么：|1549321|const+A+=+{
++prop1:+"value1",
++prop2:+function()+{return+this.prop1},
++obj:+{+value:+1+}
}

const+B+=+{
++...A,
++prop1:+"updated_value1",
++prop3:+"value3"
}|code-block|syntax|javascript|1549322|现在，更改A.obj.value还将修改B.obj.value，这将使所有B与A和它们之间共享它们的obj。这在某些情况下可能很有用，但并不完全是继承。|offset|length|style|CODE|1549323|对于继承，最好使用"Javascript课程“|1549324|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes^0|0|0|0|5|B|K|B|1E|3|0|9|E|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@$K|12|L|13|M|N]|$K|14|L|15|M|N]|$K|16|L|17|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$K|19|L|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

The code you posted is working as expected, as properties from A are copied to B. However, this is not an example of inheritance, it's just a shallow copy.

In your example all properties are primitives, consider what happens if we add a reference to A:

<pre><code>const A = {
 prop1: "value1",
 prop2: function() {return this.prop1},
 obj: { value: 1 }
}

const B = {
 ...A,
 prop1: "updated_value1",
 prop3: "value3"
}
</code></pre>

Now, changing <code>A.obj.value</code> will also modify <code>B.obj.value</code> which will essentially make all B's to share their <code>obj</code> with A and among themselves. This could be useful in some situations, but it's not exactly inheritance. 

For inheritance it's best to use <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes" rel="noreferrer">"Javascript classes"</a>

blocks|key|1549157|text|你不能说它是固有的。这是个合并。通过写这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549158|const+B+=+{
++...A,
++prop1:+"updated_value1",
++prop3:+"value3"
}|code-block|syntax|javascript|1549159|来自A的props1将被B中的prop1覆盖，所以是的，B.prop2()将返回updated_value1，这是完全公平的。|offset|length|style|CODE|1549160|entityMap^0|0|0|4|6|F|5|S|9|14|E|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|N|$]]

You can't really call it inherence. It's a merge. By writing this 

<pre><code>const B = {
 ...A,
 prop1: "updated_value1",
 prop3: "value3"
}
</code></pre>

<code>props1</code> from A will be overwritten by <code>prop1</code> from B. So yes, <code>B.prop2()</code> will return <code>updated_value1</code> and it's completely fair.

blocks|key|1549181|text|在您的情况下，我倾向于使用对象赋值，因为可能出错的东西较少：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549182|const+A+=+{
++prop1:+"value1",
++prop2:+function()+{return+this.prop1}
}

cont+B+=+Object.assign(A,+{
++prop1:+"updated_value1",
++prop3:+"value3"
});|code-block|syntax|javascript|1549183|但这仍然不是真正的遗产。|1549184|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In your case I would tend to use Object Assign since less things can go wrong:

<pre><code>const A = {
 prop1: "value1",
 prop2: function() {return this.prop1}
}

cont B = Object.assign(A, {
 prop1: "updated_value1",
 prop3: "value3"
});
</code></pre>

But still this is no real inheritance.

blocks|key|703992|text|它看起来可能类似于继承，但实际上您要定义的所有内容如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|703993|const+A+=+{
++prop1:+"value1",
++prop2:+function()+{return+this.prop1}
}

const+B+=+{
++prop1:+"value1",
++prop2:+function()+{return+this.prop1},
++prop1:+"updated_value1",
++prop3:+"value3"
}|code-block|syntax|javascript|703994|本质上，您正在重写为对象B定义的2行成员。这不是继承，因为成员的定义将由对象B拥有，而不是B的原型。当引用B.prop1时，引擎将不必查看该属性的原型，这就是如果您使用原型时的继承操作。|703995|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It might look like inheritance but in fact all you are defining there is :

<pre><code>const A = {
 prop1: "value1",
 prop2: function() {return this.prop1}
}

const B = {
 prop1: "value1",
 prop2: function() {return this.prop1},
 prop1: "updated_value1",
 prop3: "value3"
}
</code></pre>

In essence you are overriding the member defined 2 lines up for object B.
It is not inheritance because the definition of the members will be owned by object B instead of a prototype of B for example. When referring to B.prop1 the engine will not have to look on prototypes for the property, which is what inheritance would do if you were using protos

blocks|key|164293|text|我将不调用这个inheritance.Using+--与使用Object.assign().This方法类似的带有对象的扩展操作符--它所做的是将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。请参阅文档|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|164294|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign^0|2X|2|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I will not call this inheritance.Using the spread operator with object is similar to use Object.assign().This method what it does is to copy the values of all enumerable own properties from one or more source objects to a target object.
See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="nofollow noreferrer">documentation</a>

blocks|key|1549351|text|{...A}只需创建来自'A‘的所有键值的副本，并将其设置为'B’。然后将'B‘的属性prop1更新为updated_value1。‘’保持不变。这是完全有效的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549352|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

{...A} simply creates a copy of all the key-values from 'A' and sets it to 'B'.
Then you update the property prop1 of 'B' to updated_value1. 'A' remains unchanged. This is completely valid

I am fairly new to javascript development and still learning concepts. I have a question regarding the spread "operator" (<code>...</code>).
Can it be used as an inheritance-like mechanism or does it have side effects that should make me avoid this ?

Example

<pre><code>const A = {
 prop1: "value1",
 prop2: function() {return this.prop1}
}

const B = {
 ...A,
 prop1: "updated_value1",
 prop3: "value3"
}
</code></pre>

B here can be seen has being inherited from A, <code>A.prop2()</code> returns <code>value1</code>, and <code>B.prop2()</code> returns <code>updated_value1</code> has one would expect from any inherited object.

Is this valid ?

Javascript spread & inheritance

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我对javascript开发相当陌生，并且仍然在学习概念。我有一个关于扩展“操作符”(...)的问题。它是否可以用作类似继承的机制，或者它是否有副作用使我避免这种情况？示例const A = {  prop1: "value1",  prop2: function() {return this.prop1}}const B = {  ...A,  prop1: "updated_value1", 

问Javascript传播与继承
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript传播与继承EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript传播与继承
EN