blocks|key|71439|text|这不是遮蔽：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|71440|71441|71442|例如|71443|​|71444|const+foo+=+'foo';
(()+=>+{
++//+entirely+separate+variable+which+shadows+outer+variable+with+same+name
++const+foo+=+'foo2';
})();|code-block|syntax|javascript|71445|71446|存储符号的变量名对任何东西都没有影响(这很好-代码的执行不应该取决于使用的变量名)。|71447|71448|let+mySymbol+=+Symbol('this+is+a+mySymbol')

let+apple+=+{
++[mySymbol]:+'red'
}

console.log(apple[mySymbol])+//red
console.log(apple.color)+//undefined+

apple[mySymbol]+=+'black'

console.log(apple[mySymbol])+//black
console.log(apple.color)+//undefined

apple.color+=+'white'

console.log(apple[mySymbol])+//black
console.log(apple.color)+//white|71449|71450|代码的不同部分可能不知道彼此，但它们希望确保一个使用的属性与另一个不同。这可以由每个部分使用自己的符号来完成，这样两段代码就不可能意外地使用相同的属性名称，从而导致错误。例如：|71451|71452|//+module1.js

const+module1+=+(()+=>+{
++const+module1Sym+=+Symbol();
++return+(obj)+=>+{
++++//+put+some+data+on+obj+which+can+be+retrieved+by+this+module+later
++++obj[module1Sym]+=+'module+1+data';
++};
})();

//+module2.js

const+module2+=+(()+=>+{
++const+module2Sym+=+Symbol();
++return+(obj)+=>+{
++++//+put+some+data+on+obj+which+can+be+retrieved+by+this+module+later
++++obj[module2Sym]+=+'module+2+data';
++};
})();

const+obj+=+{};
module1(obj);
module2(obj);|71453|71454|如果一个模块使用属性名module1data来代替，那么可能会出现问题--如果另一个自称module1的模块试图在该对象上存储数据呢？然后，事情就会分解：|offset|length|style|CODE|71455|71456|//+module1Foo.js

const+module1Foo+=+(()+=>+{
++return+(obj)+=>+{
++++//+put+some+data+on+obj+which+can+be+retrieved+by+this+module+later
++++obj.module1Data+=+'foo+data';
++};
})();

//+module1Bar.js

const+module1Bar+=+(()+=>+{
++return+(obj)+=>+{
++++//+put+some+data+on+obj+which+can+be+retrieved+by+this+module+later
++++obj.module1Data+=+'bar+data';
++};
})();

const+obj+=+{};
module1Foo(obj);
module1Bar(obj);

//+Uh+oh,+foo+data+got+overwritten
console.log(obj);|71457|71458|上面是一个名称冲突的例子。两个模块意外地使用了相同的属性名称。|71459|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|B|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|C|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1H|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|1J|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|G|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1M|8|@]|9|@]|A|$K|L]]|$1|S|3|G|5|6|7|1N|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|G|5|6|7|1P|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1Q|8|@]|9|@]|A|$K|L]]|$1|Y|3|G|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1S|8|@$11|1T|12|1U|13|14]]|9|@]|A|$]]|$1|15|3|G|5|6|7|1V|8|@]|9|@]|A|$]]|$1|16|3|17|5|J|7|1W|8|@]|9|@]|A|$K|L]]|$1|18|3|G|5|6|7|1X|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|1C|$]]

<p>This is not shadowing:</p>

<blockquote>
  <p>In computer programming, variable shadowing occurs when a variable declared within a certain scope (decision block, method, or inner class) has the same name as a variable declared in an outer scope. This outer variable is said to be shadowed...</p>
</blockquote>

<p>eg</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const foo = 'foo';
(() =&gt; {
  // entirely separate variable which shadows outer variable with same name
  const foo = 'foo2';
})();</code></pre>
</div>
</div>
</p>

<p>The variable name you store the Symbol in has no effect on anything (which is good - code <em>execution</em> shouldn't depend on what variable names are used). You could have named it <code>mySymbol</code> instead of <code>color</code>, and the engine would have the exact same output:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let mySymbol = Symbol('this is a mySymbol')

let apple = {
  [mySymbol]: 'red'
}

console.log(apple[mySymbol]) //red
console.log(apple.color) //undefined 

apple[mySymbol] = 'black'

console.log(apple[mySymbol]) //black
console.log(apple.color) //undefined

apple.color = 'white'

console.log(apple[mySymbol]) //black
console.log(apple.color) //white</code></pre>
</div>
</div>
</p>

<p>Name clashes are avoided when entirely separate sections of the code need to store data on an object. The different sections of the code may not be aware of each other, but they want to make sure that the property that one uses is not the same as another. This can be accomplished by each section using its own Symbol, making it impossible for the two sections of code to accidentally use the same property name and thus cause bugs. For example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// module1.js

const module1 = (() =&gt; {
  const module1Sym = Symbol();
  return (obj) =&gt; {
    // put some data on obj which can be retrieved by this module later
    obj[module1Sym] = 'module 1 data';
  };
})();

// module2.js

const module2 = (() =&gt; {
  const module2Sym = Symbol();
  return (obj) =&gt; {
    // put some data on obj which can be retrieved by this module later
    obj[module2Sym] = 'module 2 data';
  };
})();

const obj = {};
module1(obj);
module2(obj);</code></pre>
</div>
</div>
</p>

<p>If one module used the property name <code>module1data</code> instead, there could be problems - what if some other module which called itself module1 was trying to store data on the object? Then, things would break down:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// module1Foo.js

const module1Foo = (() =&gt; {
  return (obj) =&gt; {
    // put some data on obj which can be retrieved by this module later
    obj.module1Data = 'foo data';
  };
})();

// module1Bar.js

const module1Bar = (() =&gt; {
  return (obj) =&gt; {
    // put some data on obj which can be retrieved by this module later
    obj.module1Data = 'bar data';
  };
})();

const obj = {};
module1Foo(obj);
module1Bar(obj);

// Uh oh, foo data got overwritten
console.log(obj);</code></pre>
</div>
</div>
</p>

<p>The above is an example of a name clash. Two modules accidentally used the same property name.</p>


<p>I am trying to understand Symbols in ES6 better, and I have read this answer:</p>

<p><a href="https://stackoverflow.com/a/22280202/5591717">https://stackoverflow.com/a/22280202/5591717</a></p>

<blockquote>
  <p>They are now known as unique symbols and their only intended use is to avoid name clashes between properties.</p>
</blockquote>

<p>Does a name clash only ever mean, one name shadowing another name? Or does it also mean an error, where something can't be be redeclared?</p>

<p>An example:</p>

<pre><code>let color = Symbol('this is a color')

let apple = {
  [color]: 'red'
}

console.log(apple[color]) //red
console.log(apple.color) //undefined 

apple[color] = 'black'

console.log(apple[color]) //black
console.log(apple.color) //undefined

apple.color = 'white'

console.log(apple[color]) //black
console.log(apple.color) //white
</code></pre>

<p>It looks like properties can be shadowed, even if they are accessed through Symbols.</p>

<p>And they also allow dot notation properties with the same name as the Symbol name to coexist with a different value. Is this what is meant by avoiding name clashes?</p>


What are name clashes and how do ES6 Symbols avoid name clashes between properties?

我正在尝试更好地理解ES6中的符号，我已经阅读了以下答案：它们现在被称为唯一符号，它们唯一的用途是避免属性之间的名称冲突。名字冲突仅仅意味着一个名字遮蔽了另一个名字吗？或者它也意味着错误，其中某些东西不能被重新声明？举个例子：let color = Symbol('this is a color')let apple ...

问什么是名称冲突? ES6符号如何避免特性之间的名称冲突？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是名称冲突? ES6符号如何避免特性之间的名称冲突？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是名称冲突? ES6符号如何避免特性之间的名称冲突？
EN