typescript 的 polyfill 学习2-assign

定义

assign 英[əˈsaɪn] 美[əˈsaɪn]

vt. 分派,选派,分配; 归于,归属; [法律] 把(财产,权利、利息)从一人转让给另一人; 把…编制;

assign(浅拷贝) 作为一个函数,可以把多个对象合并成最终一个对象,当然,这个对象可以是其中的一个对象,也可以全新的对象。

各种版本的实现

jquery版本

$.extend(dest,src1,src2,src3...);

es6支持

Object.assign()

方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

Object Spread Operator对象展开运算符

扩展运算符(spread)是三个点,
不只用于数组解构
还能让我们我们写assign 更加的简便。

let aClone = { ...a };

等价于

let aClone = Object.assign({}, a);
let ab = { ...a, ...b };

等价于

let ab = Object.assign({}, a, b);

typescript 的 polyfill 实现

解析源代码:

var __assign = (
this && this.__assign) 
|| Object.assign //用于替代Object.assign
|| function(t) {
    for (
    var s, 
    i = 1, //从第二个参数开始
    n = arguments.length; 
    i < n; i++) {
        s = arguments[i]; 
        for (var p in s) { //必须是可枚举的属性
            if (Object.prototype.hasOwnProperty.call(s, p)) // 排除掉原型链继承的属性
            {
                  t[p] = s[p];
            }
        }
    }
    return t;//函数返回第一个参数t
};

1.我们看到 拷贝的属性是一个可枚举的,并且不应该从原型链上的。
说明,我们操作的对象应该都是纯实体(我们从面向对象的实现中知道,对象的函数放在原型链上面)。

2.赋值语句只在一个循环里面,说明我们进行的只是浅拷贝。

应用场景

用于配置,默认值的重写

jquery 插件经常用到

$.extend({}, { HomeUrl: "$FEED$", IsV1: true },defaultConfig);

options = $.extend({}, defaults, options || {});

全新对象

redux 的 reducer 里面常用的写法。

return [
                ...state.slice(0, action.index),
                { ...state[action.index], completed: true},
                ...state.slice(action.index + 1)
            ];

多重继承

这里面要提一下 duck-type

当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子,那么这只鸟就可以被称为鸭子

多态 是面向对象的三大特性,对于象js 这种没有接口的动态语言来说,他的多态就是 鸭子类型。

在鸭子类型中,关注的不是对象的类型本身,而是它是如何使用的。

所以 ,如果上帝想创造一只 鸭子 可以这么做 :

const duck1 = {
    ...annimal1 ,
    {
        fly: function(){
         // ....  
        },
        swimming: function(){
           // ...
        },
        sound:function(){
            
            console.log(" 嘎嘎嘎");
        }
    }
    
}

哈哈 完了.....

posted @ 2017-10-30 22:25  罗素  阅读(971)  评论(0编辑  收藏  举报