英文:
How can adding new document.cookie in JS be done by the assignment (=) and not the addition assignment (+=) operator?
问题
以下是翻译好的部分：
以下命令 console.log(typeof document.cookie); 打印出 string，因此人们自然会认为通过增加这个字符串的值来添加新的 cookie，例如：
document.cookie += 'a=1;';
document.cookie += 'b=2;';
document.cookie += 'c=3;';
document.cookie += 'd=4;';
然后 console.log(document.cookie); 给出以下结果：a=1; b=2; c=3; d=4
然而，这也有效（请注意没有加号和分号）：
document.cookie = 'a=1';
document.cookie = 'b=2';
document.cookie = 'c=3';
document.cookie = 'd=4';
console.log(document.cookie); 仍然打印出 a=1; b=2; c=3; d=4
我的问题是 - 这是如何可能的？我没有通过方法分配这个 document 的属性，只是简单的赋值。浏览器引擎中是否有任何附加的代码来执行解析？是否有任何资源可以解释这种行为？
英文:
The following command console.log(typeof document.cookie); prints string so it would be natural to think that adding new cookie should be done by incrementing this string's value, for instance:
document.cookie += 'a=1;';
document.cookie += 'b=2;';
document.cookie += 'c=3;';
document.cookie += 'd=4;';
Then console.log(document.cookie); gives the following: a=1; b=2; c=3; d=4
However, this works as well (note the lack of plus signs and semicolons):
document.cookie = 'a=1';
document.cookie = 'b=2';
document.cookie = 'c=3';
document.cookie = 'd=4';
console.log(document.cookie); still prints a=1; b=2; c=3; d=4
My question is - how is that possible? I don't assign this document's property via a method, it's just a simple assignment. Is there any additional code in the browser engine that does the parsing? Are there any resources that could explain this behaviour?
答案1
得分: 1
Document 属性 cookie 既是一个 getter 也是一个 setter，它是在 JS 运行时以本地代码实现的。
为了提供一种视觉和概念上的说明，这是一个非常天真的实现 — 这并不是它实际工作的方式，但也许可以帮助你理解它并不仅仅是"一个简单的赋值"：
class Example {
#cookie = {};
get cookie() {
return Object.entries(this.#cookie)
.map(([k, v]) => `${k}=${v}`)
.join("; ");
}
set cookie(str) {
const kv = this.#parse(str);
if (kv) this.#cookie[kv[0]] = kv[1];
}
#parse(str) {
const idx = str.indexOf("=");
if (idx > 0) {
const key = str.slice(0, idx);
const value = str.slice(idx + 1);
if (value.length > 0) return [key, value];
}
}
}
const doc = new Example();
console.log(doc.cookie); // => ""
doc.cookie = "first=stack";
console.log(doc.cookie); // => "first=stack"
doc.cookie = "second=overflow";
console.log(doc.cookie); // => "first=stack; second=overflow"
【注意】：上述代码块包含了 JavaScript 代码，不需要进行翻译。
英文:
The Document property cookie is both a getter and setter, implemented as native code in the JS runtime.
In order to provide a visual and conceptual illustration, here is a very naïve implementation — this is not at all how it actually works, but perhaps it can help you understand how it's not just "a simple assignment":
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class Example {
#cookie = {};
get cookie() {
return Object.entries(this.#cookie)
.map(([k, v]) => `${k}=${v}`)
.join("; ");
}
set cookie(str) {
const kv = this.#parse(str);
if (kv) this.#cookie[kv[0]] = kv[1];
}
#parse(str) {
const idx = str.indexOf("=");
if (idx > 0) {
const key = str.slice(0, idx);
const value = str.slice(idx + 1);
if (value.length > 0) return [key, value];
}
}
}
const doc = new Example();
console.log(doc.cookie); //=> ""
doc.cookie = "first=stack";
console.log(doc.cookie); //=> "first=stack"
doc.cookie = "second=overflow";
console.log(doc.cookie); //=> "first=stack; second=overflow"
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论