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

1、Object.defineProperty

Object.defineProperty具体资料:传送门

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
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){
                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();
    })();

加载js文件

 

转载于:https://www.cnblogs.com/zhangzhicheng/p/6843031.html

你可能感兴趣的:(Object.defineProperty与修改某个数组实现监听效果)