vue.js 源代码学习笔记 ----- core array.js
/*
* not type checking this file because flow doesn't play well with
* dynamically accessing methods on Array prototype
*/ import { def } from '../util/index' const arrayProto = Array.prototype // Object.create 如果传入的是数组, 那么这个数组会被封装成一个对象,这个对象作为目标对象的__proto__属性缓存起来
// arrayMethods变成一个新对象, 通过 arrayMethods.__proto__.concat可以访问到原来的数组方法
// 这样就为 Object.definedProperty创造了条件
export const arrayMethods = Object.create(arrayProto) /**
* Intercept mutating methods and emit events
这几个操作都会改变数组本身, 像slice不会改变数组本身, 这里没列出
*/
;[
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
.forEach(function (method) {
// cache original method 获得数组的原型方法, 并缓存
const original = arrayProto[method] // arrayMethods 已经是一个对象, 带有__proto__属性, 下有各种原生数组方法
def(arrayMethods, method, function mutator () {
// avoid leaking arguments:
// http://jsperf.com/closure-with-arguments
let i = arguments.length //作者看上去不喜欢用 [].slice.call , 具体没明白, 好像是slice获取arguments在有的浏览器会有参数泄露问题.
const args = new Array(i)
while (i--) {
args[i] = arguments[i]
} //先执行原生的方法, 这里的this 就是指向 arrayMethods
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
inserted = args
break
case 'unshift':
inserted = args
break
case 'splice':
//因为 siplce (0,2,a,b) 这里是要取得新插入的数组值 a b
inserted = args.slice(2)
break
} //如果有新增的值, 监听一下
if (inserted) ob.observeArray(inserted)
// notify change 通知改变
ob.dep.notify() return result
})
})
vue.js 源代码学习笔记 ----- core array.js的更多相关文章
- vue.js 源代码学习笔记 ----- core scedule.js
/* @flow */ import type Watcher from './watcher' import config from '../config' import { callHook } ...
- vue.js 源代码学习笔记 ----- core lifecycle
/* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, ...
- vue.js 源代码学习笔记 ----- instance event
/* @flow */ import { updateListeners } from '../vdom/helpers/index' import { toArray, tip, hyphenate ...
- node.js day01学习笔记:认识node.js
Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...
- vue.js 源代码学习笔记 ----- html-parse.js
/** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...
- vue.js 源代码学习笔记 ----- 工具方法 share
/* @flow */ /** * Convert a value to a string that is actually rendered. { .. } [ .. ] 2 => '' */ ...
- vue.js 源代码学习笔记 ----- 工具方法 option
/* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...
- vue.js 源代码学习笔记 ----- 工具方法 lang
/* @flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject = Obje ...
- vue.js 源代码学习笔记 ----- 工具方法 env
/* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto_ ...
随机推荐
- Python笔记 #02# Inner workings of lists
源:DataCamp datacamp 的 DAILY PRACTICE + 日常收集. List of lists Subset and conquer Slicing and dicing Li ...
- 解决Linux 下server和client 通过TCP通讯:accept成功接收却报错的问题
今天在写简单的TCP通讯例子的时候,遇到了一个问题:server 和client能够连接成功,并且client也能够正常发送,但server就是接收不到,在网上搜索一番后,终于解决了问题.在这里整理如 ...
- 第三方CSS安全吗?
原文:https://jakearchibald.com/201...翻译:疯狂的技术宅 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你推送新鲜的前端技术文章 前一段时间,有很 ...
- 20145302张薇《Java程序设计》第五周学习总结
20145302 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 try catch JVM会先尝试执行try区块中的内容,若发生错误且与catch后面的类型相符,则执行ca ...
- Jquery13 Ajax 进阶
学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题 ...
- [转载]Javassist 使用指南(二)
======================= 本文转载自简书,感谢原作者!. 原链接如下:https://www.jianshu.com/p/b9b3ff0e1bf8 =============== ...
- Flask-最简单的Python http服务框架使用
环境准备 Python + pip + Flask sudo easy_install pip sudo pip install flask 代码如下(做了个jieba分词的服务) # encodin ...
- swoole http_server 多进程并使用多进程处理消息
<?php $http = new swoole_http_server("0.0.0.0", 9511); $http->set([ 'worker_num' =&g ...
- 字典树应用 - poj1002
字典树应用 - poj 1002 Description Businesses like to have memorable telephone numbers. One way to make a ...
- PHP整数取余返回负数的相关解决方法
PHP语言虽然功能强大,但并不代表其没有缺点,在编写代码的过程中未免会遇到一些让人头痛的问题.下面我们将为大家介绍有关PHP整数取余返回负数的解决办法. 我们先来看个例子. $res = 162447 ...