javascript - Object.defineProperty在safari中的奇怪行为

问题描述

问 题

avalon是一款优雅&优秀的MVVM框架，最近我在学习它，看源码的过程中，

学习到了属性劫持（建议大家使用avalon，至少也得学习一下，能学到很多东西）

例如我可以劫持Element.prototype的innerHTML和Node.prototype的nodeValue属性

但是在safari中发现了一些兼容性问题

劫持innerHTML的例子

var ep = Element.prototype;

// {enumerable: true, configurable: true, set , get} // Ch/FF/Op
// {enumerable: true, configurable: false, get: undefined, set: undefined} // Safari
var epDescriptor = Object.getOwnPropertyDescriptor(ep, 'innerHTML');

var epOlderSetter = epDescriptor.set;

/*
  Safari throw:
  TypeError: Attempting to change the getter of an unconfigurable property.
*/
Object.defineProperty(ep, 'innerHTML', {

   set: function(html){

     alert('I want to do something befroe ...');

     epOlderSetter.call(this, html);

   }
 })

劫持innerHTML，在safari中抛错了，当然，我知道什么原因，由于configurable在safari中的值是false，故抛错

劫持nodeValue的例子

var np = Node.prototype;

// {enumerable: true, configurable: true ,get , set} // Ch/FF/Op
// {enumerable: true, configurable: true ,undefined , undefined} // Safari
var npDescriptor = Object.getOwnPropertyDescriptor(np, 'nodeValue');

var npOlderSetter = npDescriptor.set; // undefined 


Object.defineProperty(np, 'nodeValue', {

   set: function(text){

     alert('I want to do something befroe ...');

     // because npOlderSetter is undefined , so i can't do this.
     // but how can i set the nodeValue to the node ?
     // npOlderSetter.call(this, text);

   }
 })

我想知道有没有什么变通的方法或黑魔法来达到在safari中劫持这两个属性的目的？

在一次avalon的修复中发现了司徒使用了__defineSetter__来代替defineProperty然后解决了这个问题，但是经过我自己写码测试（直接在safari的console中测试的），发现没有解决，请问我那点儿错了？

同时这个问题我还在SOF中进行了提问

------------------new------------------

两种方法：

<pre id="pre">
    采菊东篱下
    悠然见南山
</pre>
<button id="btn">change</button>
<script>
btn.onclick = function(){
    pre.innerHTML = "欲穷千里目\n更上一层楼"
}
var ep = Element.prototype;
// {enumerable: true, configurable: true, set , get} // Ch/FF/Op
// {enumerable: true, configurable: false, get: undefined, set: undefined} // Safari
var epDescriptor = Object.getOwnPropertyDescriptor(ep, 'innerHTML');
var epOlderSetter = epDescriptor.set;
/*
  Safari throw:
  TypeError: Attempting to change the getter of an unconfigurable property.
*/
try{
    Object.defineProperty(ep, 'innerHTML', {
       set: function(html){
         alert('I want to do something befroe ...');
         epOlderSetter.call(this, html);
       }
     })
}catch(e){
    
    // 这种方法还是不行。
    if(ep.__lookupSetter__){
        epOlderSetter = ep.__lookupSetter__('innerHTML');
        console.log(epOlderSetter);
        ep.__defineSetter__('innerHTML', function(html){
            alert('I want to do something befroe ...');
            // epOlderSetter.call(this, html);
        })
    }

    // 第二种方法，这种方法没有问题。
    var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || MozMutationObserver;
    if(MutationObserver){
        var observer = new MutationObserver(function(mutations){
            mutations.forEach( function(mutation){
                var type = mutation.type;
                console.log(type);
                if(type === 'characterData'){
                    alert('I want to do something befroe ...');
                }
            });
        });
        var config = { 
            characterData: true,
            subtree: true 
        };
        observer.observe(pre, config);
    }
}
</script>

解决方案

不是所有属性都可以却持的！！

有的属性的劫持是在Node.prototype上，有的在Element.prototype 上，有的在HTMLElement.prototype上，有的在HTMLDivElement上。

并且__defineSetter__是 要配合｀__lookupSetter__`一起使用。

建议你不要乱改原型方法。

这篇关于javascript - Object.defineProperty在safari中的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！