javascript - 模拟 DOM 对象

Question

Property属性控件 + 访问器属性 = 能够在 ES5 代码中模拟 DOM api。

在下面的代码中，对于访问器属性，

var domObj = document.body;
Object.defineProperty(domObj, 'innerHTML', {
                            get: innerHTML(){return innerHTML;},
                            set: innerHTML(newHTML){innerHTML = newHTML;} 
                            });

控制台在属性列表之后给出语法错误 missing }

属性列表语法有问题吗？

Answer 1

缺少 function 关键字:

Object.defineProperty(domObj, 'innerHTML', {
  get: function(){return innerHTML;},
  set: function(newHTML){innerHTML = newHTML;} 
});

你也可以使用

Object.defineProperty(domObj, 'innerHTML', {
  get(){return innerHTML;},
  set(newHTML){innerHTML = newHTML;} 
});

或者箭头函数

Object.defineProperty(domObj, 'innerHTML', {
  get: () => innerHTML,
  set: (newHTML) => {innerHTML = newHTML;} 
});

var innerHTML = 123,
    domObj = document.body;
Object.defineProperty(domObj, 'innerHTML', {
  get: function(){return innerHTML;},
  set: function(newHTML){innerHTML = newHTML;} 
});
snippet.log(domObj.innerHTML); // 123
domObj.innerHTML = "abc";
snippet.log(innerHTML); // "abc"

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>