首页 > 代码库 > Object.defineProperty与修改某个数组实现监听效果

Object.defineProperty与修改某个数组实现监听效果

2024-09-21 09:03:38   214人阅读

1、Object.defineProperty

Object.defineProperty具体资料：传送门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>
    /*Object.defineProperty(obj, prop, descriptor)*/
    /*可以定义方法*/
    var obj={};
    Object.defineProperty(obj,"newObj",{
        value:function(p){}
    });
    /*直接调用函数就会触发value函数*/
    /*可以定义属性*/
    var obj={};
    Object.defineProperty(obj,"newObj",{
        set:function(p){},
        get:function(){}
    });
    /*当obj.newObj="..."时会触发set功能,赋值会以参数形式传进函数，当obj.newObj会触发get功能*/
    /*value 和set、get共存*/
    /*这个设置属性和方法的方法可以设置双向绑定功能，据说vue就是这样实现的*/
    </script>
</body>
</html>

2、修改某个数组实现监听效果

今天遇到一个很神奇的代码，就是使用数组push方法就可以实现发送数据到到后台

当时就郁闷了，一个数组的push方法就单纯追加数据，没有什么可以监听数组变化而

触发方法，因为代码是别人写的，而且因为某些原因无法一观，所以不断思考与尝试

终于有结果了。

/*这是在单独js文件里的*/
    ;(function(){
        /*_ncp自己定义的变量*/
        if(!(_ncp instanceof Array)){
            return ;
        }
        var arr=_ncp;
        function fn(){
            Array.call(this);
            this.init();
        }
        fn.prototype=new Array();
        fn.prototype.init=function(){
            for(var i=0;i<arr.length;i++){
                this.oldPush(arr[i]);
            }
        }
        fn.prototype.oldPush=fn.prototype.push;
        fn.prototype.push=function(param){
            this.oldPush(param);
            arr.push(param);
            /*模拟ajax*/
            ajax(arr);
        }
        function ajax(p){
            /*这里写ajax*/
            console.log(p);
        }
        _ncp=new fn();
    })();
<script>
var _ncp=_ncp||[];
var oScript=document.getElmentsByTagName("script")[0];
var create=document.createElement("script");
create.defer=true;
create.ansyc=true;
create.type="text/javascript";
create.src="js文件url地址";
oScript.parentNode.insertBefore(create,oScript);

</script>

加载js文件

 

Object.defineProperty与修改某个数组实现监听效果


联系
我们