`
huangyongxing310
  • 浏览: 491921 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

defineProperty Array push 监听

 
阅读更多
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="../miniui/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>-->

    <style>
        .parent {
            display: table;
            width: 300px;
            height: 300px;
            text-align: center;
            border: dashed 1px gray;
        }
        .son  {
            display: table-cell;
            height: 100px;
            width: 100px;
            background-color: yellow;
            vertical-align: middle;
        border: dashed 1px red;
        }

        #outer{
            background-color: #13CDF4;
            width: 300px;
            height: 200px;
            position: relative;
        }
        #middle{
            background-color: #E41627;
            width: 100px;
            height: 50px;
            margin: auto;
            position: absolute;
            top: 0;left: 0;right: 0;bottom: 0;
        }
    </style>


</head>
<body>




9
</body>

</html>
<script type="text/javascript">



var arrayPush = {};



var testPush = [];

var aa = Object.getPrototypeOf(testPush);




var arrayProto = Array.prototype
var arrayMethods = Object.create(arrayProto)
console.log(arrayProto);
console.log(arrayMethods);


Object.defineProperty(testPush, "push", {
value: function mutator(){
//缓存原生方法，之后调用
// console.log('array被访问');
// var original = arrayProto["push"]
// var args = Array.from(arguments)
// original.apply(this,arguments)
// console.log(this);

var original = arrayProto["push"]
// var args = Array.from(arguments)
var aaa =original.apply(this,arguments)
console.log(testPush);
console.log('array被访问');
return aaa;
},
enumerable: true,
// writable: true,
configurable: true,
// get:function(){
// console.log("pushdfds");
// console.log(arguments);
// var aaa = testPush.__push__.apply(testPush,arguments)
// return aaa;
// }
})

testPush.push(1);
// [1]
var cc = testPush.push(2);
console.info(testPush)
console.info(cc)

</script>
分享到：
| windowx 命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vue源码学习之Object.defineProperty 对数组监听

    在 Vue 源码学习中，Object.defineProperty 对数组监听主要是通过重写 Array.prototype 的方法来实现的。例如，push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等方法可以被重写，以便监听数组的...

    详解Vue 如何监听Array的变化

    然而，当涉及到数组时，Vue需要特别处理以监听变化，因为直接使用Object.defineProperty并不足以监听数组索引的添加、删除以及数组长度的变化。 ### Vue监听数组变化的方法 Vue通过重写数组原型上的一些方法来实现...

    vue深度学习之对象和数组的监听原理 深度学习原理.pdf

    这个函数通过 `Object.defineProperty` 将数据对象的每个属性转换为访问器属性，从而可以监听属性的读取和写入。当访问或修改对象的属性时，Vue会触发对应的getter和setter方法。 - **getter**：当尝试读取属性时，...

    JS 对象与数组的监听实例

    不过，可以使用`Object.observe`（同样废弃）的替代方案，如`Object.defineProperty`结合`proxy`来实现类似的功能。 ```javascript let array = []; let proxyArray = new Proxy(array, { set(target, prop, value...

    vue2数据劫持源码剖析

    Array.prototype._push = Array.prototype.push; Array.prototype.push = function(...items) { let addedCount = this._push(...items); this.$notify(); return addedCount; }; ``` `$notify`会触发数组的...

    Vue监听数组变化源码解析

    伪代码示例展示了如何改写Array的原型来实现数组变化的监听，具体地，通过将Array原型上的特定方法重新定义，使得在调用这些方法时，能够收集依赖（观察者），并触发视图更新。这实际上是Vue虚拟DOM的核心原理之一，...

    基于es5核心javascript的数据观察

    对于数组，单纯使用Object.defineProperty()无法监听数组方法（如push、pop等）导致的元素变化。因此，我们需要覆盖这些方法，以便在操作数组时触发通知。例如： ```javascript var arr = []; var originalPush = ...

    vue2.x数组劫持原理的实现

    1 重新定义原生数组方法push unshift shift pop splice sort reverse 因为这些方法可以修改原数组。 2 拿到原生数组方法 Object.create(Array.prototype) 3 AOP拦截,再执行重写数组方法前，先执行原生数组方法 核心...

    Vue数据驱动模拟实现4

    然后，我们遍历`arrKeys`，并使用`proxyObject`函数（它依赖于`Object.defineProperty`，类似于Vue的响应式原理）为`extendArr`对象添加监听器。这样，当我们调用这些变异方法时，就会触发预设的处理函数。 在处理...

    Vue data的数据响应式到底是如何实现的

    this.array.push(item) ``` Vue对这些变异方法进行了改写，确保它们能够触发数据的响应式更新。 总结起来，Vue数据响应式的核心机制包括： 1. 使用`Object.defineProperty()`为数据属性创建getter和setter，监听...

    Vue.js中数组变动的检测详解

    Object.defineProperty(arrayMethods, method, { value: function mutator() { // ...实现函数 const result = original.apply(this, args); const ob = this.__ob__; let inserted; switch (method) { case...

    浅谈Vue为什么不能检测数组变动

    尽管我们可以通过`Object.defineProperty`为数组的每个索引创建getter和setter来监听元素变化，但这并不实际，尤其是对于大型数组。因为数组可能包含大量元素，而JavaScript引擎在创建和维护这些访问器属性时会有...

    vue数据双向绑定原理解析（get & set)

    Vue的数据绑定不仅限于简单类型的属性，对于数组和对象这样的复杂类型，Vue还提供了一些特殊的API，如`$set()`、`$delete()`，以及`array`变异方法（如`push()`、`pop()`等），以确保在数组和对象上的操作也能触发...

    如何实现一个简易版的vuex持久化工具

    4. **数组的持久化问题**：由于数组的原生方法如`push`、`pop`等不会改变引用，Vue的`defineProperty`无法检测到。为了解决这个问题，我们可以覆写这些方法，确保每次操作数组时，都能触发持久化。 ```javascript ...

    web前端面试重点难点问题

    3. **Proxy 替代 Object.defineProperty**：Vue 3 使用ES6的Proxy对象替换原有的数据劫持，可以监听对象整体变化，增强了响应式系统的性能。 4. **启用 TypeScript**：Vue 3 支持TypeScript，提供类型安全，帮助...

    2020年3月份最新vue面试题汇总一、

    因此，Vue重写了数组的几个关键方法，如`push`、`pop`、`shift`等，将它们包装成自己的版本，当调用这些方法时，会在内部通知依赖，从而触发视图更新。例如： ```javascript methodsToPatch.forEach(function ...

    使用proxy实现一个更优雅的vue【推荐】

    例如，处理`v-model`指令时，不仅需要设置初始值，还需要在输入元素的`input`事件中监听值的变化，并同步到数据模型。 ```javascript function compile(root) { const nodes = Array.from(root.children); nodes...

Magicbox
Global site tag (gtag.js) - Google Analytics