专栏首页白玉无冰原来这才是拷贝对象属性的正确姿势!从源码中学习 js !

原来这才是拷贝对象属性的正确姿势!从源码中学习 js !

引擎源码里富含了许多知识,之所以能成为引擎,一定有可学习的地方。让我们一起从源码里学习 js 知识吧。

源代码

先一起看看完整源代码。

function _getPropertyDescriptor (obj, name) {
    while (obj) {
        var pd = Object.getOwnPropertyDescriptor(obj, name);
        if (pd) {
            return pd;
        }
        obj = Object.getPrototypeOf(obj);
    }
    return null;
}

function _copyprop(name, source, target) {
    var pd = _getPropertyDescriptor(source, name);
    Object.defineProperty(target, name, pd);
}

_copyprop 这个函数就是用来拷贝对象属性,name 为属性名称, source 为要拷贝的对象,target 为目标对象。

整体思路是,获取该属性在拷贝对象中的描述符,并在目标对象中定义该熟悉的描述符。如果拷贝对象中没有找到描述符,就从拷贝对象的原型链中找描述符。

接下来,一起探究各个语法吧。

Object.defineProperty

语法

Object.defineProperty(obj, prop, descriptor)

obj

要在其上定义属性的对象。

prop 要定义或修改的属性的名称。

descriptor

将被定义或修改的属性描述符

属性描述符有两种主要形式:数据描述符和存取描述符。value,writable 和 get,set 不能同时出现

数据描述符

存取描述符

configurable

true - 该属性描述符可以被改变,该属性可以被删除。 false -该属性描述符不能改变,该属性不可删除。(仅 writable 为 true 时可修改 writable 和 value )

enumerable

定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

value

该属性对应的值。

X

writable

当且仅当该属性的writable为true时,value才能被赋值运算符改变

X

get

X

一个给属性提供 getter 的方法

set

X

一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。

接着看下默认值

var o = {};
o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});

// 另一方面,
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});

Object.getOwnPropertyDescriptor

语法

Object.getOwnPropertyDescriptor(obj, prop)

obj

对象

prop

属性名称

返回值

如果对象有该属性,则返回其属性描述。否则返回 undefined

如果存在该属性,返回的是数据描述符或存储描述符。

Object.getPrototypeOf

语法

Object.getPrototypeOf(object)

返回的是该对象的原型对象。

原型对象可以简单的理解为,一个对象本身找不到属性时,就会在它的原型对象中查找。

小结

拷贝对象属性,通过获取对象的描述符后调用 Object.defineProperty 进行拷贝。

END

参考资料:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 物体随机飞溅运动! Cocos Creator!

    我们把物体分成x和y两个方向考虑,用上面的公式可以求出在t时刻的物体的位置。为此写个通用的组建控制每个物体的位置控制。主要代码如下。

    白玉无冰
  • 为何你的弹球如丝般顺滑?不停歇的球!技术分享!源码相送!

    最近有小伙伴玩了【不停歇的球】,问我怎么做到这个流畅度的?于是,我稍做整理,把开发中的一些点提炼出来,有了这篇文章!

    白玉无冰
  • 图片/文字 的渐变色实现!

    在 cc.Spirte 或 cc.Label 添加脚本 ColorAssembler2D 。

    白玉无冰
  • 深入 JS 对象属性

    对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123:

    前端小智@大迁世界
  • [第1期] ES6之路--对象的扩展

    桃翁
  • JS对象那些事儿

    JavaScript中几乎所有东西都是一个对象,除了六种基本类型数据 - null,undefined,strings,numbers,boolean和symb...

    前端知否
  • 《你不知道的JavaScript》:js对象的属性特性和枚举深入

    可以看到,检测属性的结果打印为4个属性数据描述符:value(属性值)、writable(可写)、enumerable(可枚举)、configurable(可配...

    前端_AWhile
  • JavaScript 深拷贝性能分析

    作者:justjavac 链接:https://segmentfault.com/a/1190000013107871 如何在 JavaScript 中拷贝一个...

    程序员宝库
  • VBA对象属性概述

    上节概述了对象模型的基础知识,而对象的学习重点其实就是它们的属性和方法,不同对象都有诸多不同的属性和方法,后期将从常用对象的属性和方法循序渐进的展开。

    无言之月
  • 22道机器学习常见面试题

    有监督学习:对具有概念标记(分类)的训练样本进行学习,以尽可能对训练样本集外的数据进行标记(分类)预测。这里,所有的标记(分类)是已知的。因此,训练样本的岐义性...

    统计学家

扫码关注云+社区

领取腾讯云代金券