NOW,今天让我们来实现一个extend函数。

具体思路: 使用Object.defineProperty()对属性的特性进行设置,然后通过Object.getOwnPropertyDescriptor()获取到属性描述符,并赋值给新创建的对象

下面我们把代码拉出来溜溜

    Object.defineProperty(Object.prototype,
"extend",
{
writable: true,
enumerable: false,
configurable: true,
value: function(o){
// 获取所有的自有属性
var names = Object.getOwnPropertyNames(o);
for(var i =0;i< names.length;i++){
// 如果属性已存在则跳过
if(names[i] in this) continue;
// 获取该属性的属性描述符ss
var desc = Object.getOwnPropertyDescriptor(o,names[i]);
Object.defineProperty(this,names[i],desc)
}
}
}
)

使用示例:

  // 定义一个新对象
var a = {
itemA: 1
}
// 新建一个属性,并设置属性描述符
Object.defineProperty(a,"itemB",{
writable: true,
enumerable: false,
configurable: true,
value: 2
})
// 再定义一个新对象
var b = {}
b.extend(a)
// 此时我们可以看到静态属性已经继承过去了
console.log(b) // 结果为{itemA: 1,itemB: 2}
//再来看看属性描述符是不是也过去了
let extendDesc = Object.getOwnPropertyDescriptor(b,"itemB")
console.log(extendDesc) // 结果为{value: 2, writable: true, enumerable: false, configurable: true}

好了,结束,有机会我们一起来模拟实现一下Object.create()函数

 

实现一个extend函数的更多相关文章

  1. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  2. Jquery揭秘系列:实现$.fn.extend 和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...

  3. 解读jQuery中extend函数

    $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...

  4. jquery的扩展之extend函数

    1.$.extend()使用 作用:扩展全局的函数 $.extend({ sayHellow:function(pram){ alert(pram+"hellow"); } }) ...

  5. jQuery.extend函数详细用法!

    最近在研究jQuery.把jQuery.extend扩展函数的用法记录下来. 1.扩展jQuery静态方法. }) 用法: $.test() 2.合并多个对象.为jQuery.extend(css1, ...

  6. 实现$.fn.extend 和$.extend函数

    Jquery揭秘系列:实现$.fn.extend 和$.extend函数   前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说, ...

  7. jQuery.extend 函数

    jQuery.extend 函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.J ...

  8. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  9. jQuery.fn.extend() 函数详解

    jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型 ...

随机推荐

  1. 汇总VSCode中比较好用的插件

    使用vscode编辑器两年的时间,总结出前端一些比较方便的插件 1. Auto Close Tag 自动添加HTML / XML关闭标签 2. Auto Complete Tag 自动完成标签 3 A ...

  2. leetcode bug free

    ---不包含jiuzhang ladders中出现过的题.如出现多个方法,则最后一个方法是最优解. 目录: 1 String 2 Two pointers 3 Array 4 DFS &&am ...

  3. 后端开发之chrome开发者模式

    1. 场景描述 java开发前后端分离模式越来越流行,后端人员可以直接使用swagger进行接口调试(前后端分离之Swagger2),但是调试的时候,需要设置入参,假如该模块不是软件老王开发的,接别人 ...

  4. linux系统磁盘满了,怎么解决?

    1.使用命令:df -lk 或 df -hl 发现果然有个磁盘已满 2.使用命令:du --max-depth=1 -h  查找大文件,发现/home文件夹下有17G的东西,因为我的apache是装在 ...

  5. Okhttp3源码解析(1)-OkHttpClient分析

    ### 前言 上篇文章我们讲了[Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f),今天根据上节讲到请求流程来分析源码,那么第一步就是实例化OkH ...

  6. 设计模式(C#)——03建造者模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       当一个复杂对象由一些子对象构成,并且子对象的变化会导致复杂对象的修改.这时我们需要提供一种"封装机制&qu ...

  7. HDU 4417

    题意略. 思路: 仔细思考这个题目会发现,它其实是要你查询两次,第一是要规定l,r的范围,第二是要在范围内查询小于等于H的个数.所以有的人说要用主席树. 现在,如果我们能省去范围内对h的查询呢?也就是 ...

  8. Python机器学习笔记:不得不了解的机器学习知识点(2)

    之前一篇笔记: Python机器学习笔记:不得不了解的机器学习知识点(1) 1,什么样的资料集不适合用深度学习? 数据集太小,数据样本不足时,深度学习相对其它机器学习算法,没有明显优势. 数据集没有局 ...

  9. ES5新增数组方法测试和字符串常见API测试

    首先是ES5新增数组方法测试: <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  10. Jedis操作Redis--Set类型

    /** * Set(集合) * SADD,SCARD,SDIFF,SDIFFSTORE,SINTER,SINTERSTORE,SISMEMBER,SMEMBERS,SMOVE,SPOP,SRANDME ...