JS 拓展对象原型方法的正确姿势

一、为什么要拓展原型对象方法

    我们在平时的项目工作中,虽然很多的时候很多方法都有我们的第三方库件或者定义类已经完全可以满足我们的方法需求,但是有的时候由于需求或者场景的需要,不得不自己手动封装一下对象原型拓展,即便如此,小编还是不太建议修改原生对象,因为如果封装不慎,就有可能会导致后续的维护问题

二、不正确的封装姿势

        2.1  Array.encapsulation

        JS 拓展对象原型方法的正确姿势_第1张图片

        错误的封装方法,如果当前编译器支持语法检测,如此封装将会产生一下错误信息:

        JS 拓展对象原型方法的正确姿势_第2张图片

        提示信息: 类型错误  _array.encapsulation is not a function  告诉我们encapsulation 不是一个方法。

        所以这种方法是不正确的封装拓展方法

        2.2   Array.prototype.encapsulation 

      这种方法可以成功的进行方法封装,但是会有一个小问题,请看以下代码:

        JS 拓展对象原型方法的正确姿势_第3张图片

        

        ok! 看起来此种封装方法很是完美,顺利输出了我们关心的值:   拓展原型对象方法

        但是但是 so...   请看下面的一个小实例:

        JS 拓展对象原型方法的正确姿势_第4张图片

        到底会有什么样的输出呢?


        很明显可以看出这种方法是有弊端的不利于维护。并且我们以后再使用for in的时候,还必须过滤掉这个方法(encapsulation)。常用的过滤方法可见:

        JS 拓展对象原型方法的正确姿势_第5张图片

三、正确的封装姿势

        巧用Object对象中提供的方法 defineProperty(),defineProperty接收三个参数并且都为必填信息

        第一个参数:目标对象
        第二个参数:需要定义的属性或方法的名字

        第三个参数:目标属性所拥有的特性

        前面两个参数较为简单我们完全可以略过,主要说一下第三个参数。

        value:属性的值(不用多说了)
        writable:如果为false,属性的值就不能被重写,只能为只读了
        configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)

        enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。

        详细参数用法,读者可自行查询资料进行阅读,我们接着上代码:

        JS 拓展对象原型方法的正确姿势_第6张图片

        

四 总结

JavaScript允许拓展对象的原型属性,善于利用此特性可以设计出更加贴合实际需求的类。比如,我们可以设计一个Fruit类,当Fruit的价格被初始化之后,不允许再进行修改(除了较为特殊的业务场景和设计下)。


        



        

你可能感兴趣的:(前端开发)