Angular 的copy方法源码解析

// 好像是 Angular 的源码,下面用了 ngMinErr,是 Angular 的惯用命名法

function copy(source, destination, stackSource, stackDest) {
    if (isWindow(source) || isScope(source)) {
        throw ngMinErr('cpws',
            "Can't copy! Making copies of Window or Scope instances is not supported.");
    }

    // destination 判 false 的情况,比如 0, "", NaN, undefined, null 等
    // 具体参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
    if (!destination) {  // 分支1
        // 默认赋值,相当于在最后加 else  [参考(1)>
        destination = source;
        if (source) {
            if (isArray(source)) {
                // 如果 source 是数据,把 destination 初始化为数组,再递归调用 copy(会进入分支②)
                destination = copy(source, [], stackSource, stackDest);
            } else if (isDate(source)) {
                // 如果是日期,直接 source 的值构造一个新的日期对象
                destination = new Date(source.getTime());
            } else if (isRegExp(source)) {
                // 复制正则表达式
                destination = new RegExp(source.source, source.toString().match(/[^\/]*$/)[0]);
                destination.lastIndex = source.lastIndex;
            } else if (isObject(source)) {
                // 如果是其它对象,把 destination 初始化为空对象,再递归调用 copy(会进入分支②)
                destination = copy(source, {}, stackSource, stackDest);
            }
            // else { destination = source } <参考(1)]
        }
    } else {    // 分支 2
        if (source === destination) throw ngMinErr('cpi',
            "Can't copy! Source and destination are identical.");

        stackSource = stackSource || [];
        stackDest = stackDest || [];

        if (isObject(source)) {
            // 看样子这里是在处理递归引用,如果在 stackSource 里找到了 source
            // 说明之前已经产生了这个对象的副本,直接从 stackDest 返回那个副本就好
            var index = indexOf(stackSource, source);
            if (index !== -1) return stackDest[index];

            // 压栈,用于以后的递归引用检查
            stackSource.push(source);
            stackDest.push(destination);
        }

        var result;
        if (isArray(source)) {
            destination.length = 0;
            for (var i = 0; i < source.length; i++) {
                // 这里递归调用 copy 主要是为了深度拷贝,
                // 因为 source[i] 也有可能是一个多么复杂的对象,或者数组,或者其它……
                result = copy(source[i], null, stackSource, stackDest);
                if (isObject(source[i])) {
                    // 拷贝完了记得压入引用栈,供以后检查
                    stackSource.push(source[i]);
                    stackDest.push(result);
                }
                destination.push(result);
            }
        } else {
            var h = destination.$$hashKey;

            // 先重置 destination
            if (isArray(destination)) {
                // 如果是数组,清空
                destination.length = 0;
            } else {
                // 如果不是数组,删除所有属性
                forEach(destination, function(value, key) {
                    delete destination[key];
                });
            }

            // 循环获取 source 的每一个属性,赋值给 destination
            // 同样需要深拷贝,同样需要缓存到引用栈
            for (var key in source) {
                result = copy(source[key], null, stackSource, stackDest);
                if (isObject(source[key])) {
                    stackSource.push(source[key]);
                    stackDest.push(result);
                }
                destination[key] = result;
            }

            // setHashKey 干啥的……我猜是 Angular 内机制要用的
            setHashKey(destination, h);
        }

    }

    // 结果返回出去,注意到上面多处递归调用 copy 都是要取返回值的
    return destination;
}

其实这段代码的逻辑还是很清楚,只在 stackSource 和 stackDest 加上递归,会稍稍让人晕乎。拷贝,尤其是深拷贝,需要特别注意递归引用(就是常说的循环引用)的问题,所以这两个 stack 就是缓存引用,用来处理递归引用的。递归,这个是编程的基本技能之一,如果不懂,就只好先去看看教科书了isWindow 可以猜出来是判断是否 window 对象的,isScope 不是很明白,看它的源码应该能懂,不过这里不 care,反正就是为了判断不能拷贝的对象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,562评论 18 399
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,409评论 25 707
  • 这篇文章是我之前翻阅了不少的书籍以及从网络上收集的一些资料的整理,因此不免有一些不准确的地方,同时不同JDK版本的...
    高广超阅读 15,527评论 3 83
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy阅读 9,504评论 1 51
  • 分手一个礼拜,没有人每天打电话嘘寒问暖,嗯,有点不习惯。 分手半个月,没有人每天早晚跟我说早安晚安,嗯,开始怀念。...
    三月殇阅读 143评论 0 0