原生javascript实现extend

原创 Bios 教程 js 232阅读 2018-04-11 10:50:54 举报

代码

extend 要实现的是给任意对象扩展

分析一下

在extend()函数中没有写死参数,是为了更好的扩展性,永远也不知道需要扩展的对象有几个。
而是通过arguments来获取传进来的参数。

arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。

target

target是传进来的第一个参数,也就是需要扩展的对象。

循环遍历赋值

这一步就是将扩展源里的属性、方法循环遍历赋值到扩展项中。

如果扩展项和扩展源中有相同的属性、方法,后面的会覆盖前面的。 这个思想也是插件开发中,实现用户配置覆盖默认设置的实现思想。

hasOwnProperty

为什么需要使用hasOwnProperty,这跟for in有密切关系。

使用for in会遍历所有的可枚举属性,包括原型。

所以需要判断一下,是否是对象自身的属性,而不是继承于原型的。

那为什么不直接使用source.hasOwnProperty(source[key])呢?

JavaScript 并没有保护 hasOwnProperty 属性名,因此某个对象是有可能存在使用这个属性名的属性,使用外部的 hasOwnProperty 获得正确的结果是需要的:

call apply

上面用到的call和apply,就在这里记录一下。

1.每个函数都包含两个非继承而来的方法:call()方法和apply()方法。
2.相同点:这两个方法的作用是一样的。
都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。
一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。
3.不同点:接收参数的方式不同。

  • apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
    语法:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。
    说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。
  • call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。
    语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。
    说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。

可以将上面代码中的call换成apply,也是可以执行的。

Object.assign

Object.assign(target, ...sources)

  • target 目标对象
  • sources 源对象

如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
注意,Object.assign 会跳过那些值为 null 或 undefined 的源对象。

更多相关Object.assign可以查看官网。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复