typescript 的 polyfill 学习2-assign

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lusess/p/7757957.html

文章标签：

#javascript #ViewUI

本文介绍了在JavaScript中实现对象浅拷贝的不同方法，包括jQuery的$.extend(), ES6的Object.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(" 嘎嘎嘎");
        }
    }
    
}

哈哈完了.....

转载于:https://www.cnblogs.com/lusess/p/7757957.html