為什么 someObject = Object.assign({}, someObject, window.getSelection()) 和 {...window.getSelection()} 確實返回空對象？

Question

我嘗試將window.getSelection()復制到someObject以將其存儲為對象屬性以備將來重用。

我有這個代碼：

var selection = window.getSelection();

//case 1:
this.selection = Object.assign({}, this.selection, selection);

console.log(this.selection);
console.log(selection);

//---------------------------------------

//case 2:
this.selection = {...window.getSelection()};

console.log(this.selection);
console.log(selection);

在這兩種情況下（案例 1 和案例 2），我在控制台中看到了空對象{} for this.selection和 Selection 對象（ https://developer.mozilla.org/en-US/docs/Web/API/Selection ）以供selection多變的。

我錯過了什么？ 如何將 window.getSelection() 復制到this.selection （這是一個類屬性）？

Answer 1

JavaScript 使用原型鏈。 當您嘗試訪問對象中的屬性時，JS 引擎會在對象中檢查該屬性，然后在對象的原型中，然后在對象的原型的原型中，等等......

直接存在於對象中的屬性稱為自己的屬性。 selection對象沒有自己的屬性，相反，像anchorNode這樣的anchorNode被定義為原型中的getter。

您可以在開發者控制台中看到這一點。 它直接在對象中顯示屬性，但這只是為了便於閱讀。 它們確實在對象的原型中。

Object.assign()和spread 語法都只復制自己的可枚舉屬性，在這種情況下不起作用。

Answer 2

如果要保存 Selection 以供進一步使用，可以像這樣從 Range 對象恢復 Selection：

// Save Range from the current Selection
let range = window.getSelection().getRangeAt(0);

/* Suppose here the Selection object has changed */

// Restore previous Selection
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);