原生js的设计莫之函数使用的几种方式

/* 单纯的函数方法的罗列写法 ,造成全局变量的污染*/
        function checkName() { }
        function checkEmail() { }
        function checkPassWord() { }
        /* 放在一个对象下面,作为该对象的方法 */
        var CheckObject = {
            checkName() { },
            checkEmail() { },
            checkPassWord() { }
        }
        let obj = CheckObject
        console.log(obj.checkName)  //ƒ checkName() { }
        /* 函数也是对象,方法写在函数上,是无法被复制的 */
        var CheckObject = function () { }
        CheckObject.checkName = function () { }
        CheckObject.checkEmail = function () { }
        CheckObject.checkPassWord = function () { }
        let myObj = CheckObject
        console.log(myObj.checkName) //ƒ () { }

        /* 改造上面的方法 */
        var CheckObject = function () {
            return {
                checkName() { },
                checkEmail() { },
                checkPassWord() { }
            }
        }
        var c = CheckObject()
        console.log(c.checkEmail) //ƒ checkEmail() { }

        //构造函数的类
        var MyObject = function () {
            this.checkName = function () {
                console.log('checkName----')
            }
            this.checkEmail = function () { }
            this.checkPassWord = function () { }
        }
        console.log(MyObject)
        let me = new MyObject()
        me.checkName()  //checkName----

        /* 这样new出来的每个实例对象都有自己的一套方法,会造成资源的浪费,共用方法
        我们还是要写在prototype
        */
        var CheckObj = function () { }
        CheckObj.prototype.checkName = function () { }
        CheckObj.prototype.checkEmail = function () { }
        CheckObj.prototype.checkPassWord = function () { }

        /* 简写方式 ,与上面的方式不能混着用,否则会覆盖*/
        var CheckObj = function () { }
        CheckObj.prototype = {
            checkName() { return this },
            checkEmail() { return this },
            checkPassWord() { return this }
        }
        var a = new CheckObj()
        a.checkName()
        a.checkEmail()
        a.checkPassWord()

        /* 上面的方法重复写了三次a */
        var CheckObj = function () { }
        CheckObj.prototype = {
            checkName() { return this },
            checkEmail() { return this },
            checkPassWord() { return this }
        }
        var a = new CheckObj()
        a.checkEmail().checkName().checkPassWord()
        /* 在原生的function上给所有的函数添加一个方法 */
        Function.prototype.checkEmail = function () {
            console.log("from prototype")
        }

        let test = function () { }
        test.checkEmail()  //from prototype

        /* 上面额操作是不允许的,污染了原生的 */
        /* 抽象出一个统一添加方法的功能s */
        Function.prototype.addMethod = function (name, fn) {
            this[name] = fn
            //想链式添加的话,在后面return this
            return this
        }

        let test1 = function () { }
        test1.addMethod('checkName', function () {
            console.log('我的是被天机上来')
            //想链式使用的话,也是
            return this
        }).addMethod('checkEmail', function () {
            console.log('我的是email')
            return this
        })
        test1.checkName().checkEmail() //我的是被天机上来
        //我的是被天机上来
        //我的是email
        /* 上面是函数式的调用,如果要用new方法来实现呢 */
        Function.prototype.addMethod = function (name, fn) {
            this.prototype[name] = fn
            //想链式添加的话,在后面return this
            return this
        }
        let Test2 = function () {

        }
        Test2.addMethod('checkName', function () {
            console.log('checkName')
            return this
        }).addMethod('checkEmail', function () {
            console.log('checkEmail')
            return this
        })
        let m = new Test2()
        m.checkEmail().checkName()
        /* checkEmail
           checkName */
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值