javascript - 构造函数无法new第二个

问题描述

问 题

问题描述：写了一个分页的函数，在页面new一个实例没有问题，new第二个的时候提示

Uncaught TypeError: PageFunc is not a constructor

函数代码：

function PageFunc(currentNum, totalNum, ajaxFunc, pagination, beforeFunc, afterFunc){
    this.currentNum=currentNum;
    this.totalNum = totalNum;
    this.ajaxFunc = ajaxFunc;
    this.beforeFunc = beforeFunc;
    this.afterFunc = afterFunc;
    var _this = this;
    this.data = {
        DayNumber: 7,
        // PageIndex: this.currentNum,
        PageSize: 15,
        // BeginDateTime: '',
        // EndDateTime:'',
    };
    this.debug = false;
    this.elem = pagination?pagination:'.pagination';
    this.lastPage = function () {
        // 上一页按钮点击事件
        $(_this.elem).find('.last-page').click(function () {
            // console.info($(_this.elem).find('.last-page'));
            if(_this.currentNum > 1){
                _this.currentNum -=1;
                $(_this.elem).find('.current-page').text(parseInt(_this.currentNum));
                if(_this.currentNum == 1){
                    $(_this.elem).find('.last-page').addClass('disabled');
                }
                _this.debug && console.info("上一页触发成功");
                // currentNum && (self.currentNum = currentNum);
                // 定义要跳转的页面
                _this.data.PageIndex = _this.currentNum;
                ajaxFunc&&_this.ajaxFunc(_this.data);
                $(_this.elem).find('.next-page').removeClass('disabled');
            }else{
                $(_this.elem).find('.last-page').addClass('disabled');
                //$('.last-page').unbind('click');
            }
        });
    };
    this.nextPage = function () {
        // 下一页按钮点击事件
        $(_this.elem).find('.next-page').click(function () {
            if(_this.currentNum < _this.totalNum){
                _this.currentNum +=1;
                $(_this.elem).find('.current-page').text(parseInt(_this.currentNum));
                if(_this.currentNum == _this.totalNum){
                    $(_this.elem).find('.next-page').addClass('disabled');
                }
                _this.debug && console.info("下一页触发成功");
                // totalNum && (self.totalNum = totalNum);
                // 定义要跳转的页面
                _this.data.PageIndex = _this.currentNum;
                ajaxFunc&&_this.ajaxFunc(_this.data);
                $(_this.elem).find('.last-page').removeClass('disabled');
                //$('.last-page').bind('click');
            }else{
                $(_this.elem).find('.next-page').addClass('disabled');
            }
        });
    };
    this.jumpPage = function () {
        // 页码跳转事件
        $(_this.elem).find('.jump-page').click(function () {
            var jumpNum=$(_this.elem).find('.jump-page-num').val();
            _this.debug && console.log(jumpNum);
            // console.log(parseInt(jumpNum));
            if( jumpNum==null || isNaN(parseInt(jumpNum))){
                $(_this).addClass('disabled');
                // console.log("跳转失败")
                // console.log(isNaN(parseInt(jumpNum)));
                $(_this.elem).find('.jump-page-num').val('');
                return;
            }else if(jumpNum>_this.totalNum){
                $(_this.elem).find('.jump-page-num').val(_this.totalNum);
            }else if(jumpNum<1){
                $(_this.elem).find('.jump-page-num').val(1);
            }else {
                $(_this.elem).find('.jump-page').removeClass('disabled');
                _this.data.pageIndex = jumpNum;
                ajaxFunc && _this.ajaxFunc(_this.data);
            }
        });
    };
    this.checkTotal =function () {
        console.log(this.totalNum);
        (this.totalNum===1) ? $(this.elem).find('.last-page').addClass('disabled') : $(this.elem).find('.last-page').removeClass('disabled');
    };
    this.init = function () {
        // 分页函数执行前后事件
        // return function () {
            beforeFunc && _this.beforeFunc();
    
    
            // debug测试
            _this.debug && console.log("debug开启成功");
    
            // 页面第一次加载初始化
            _this.ajaxFunc(_this.data);
            _this.checkTotal();
            _this.debug && console.info(_this.data);
    
            // 初始化按钮点击事件
            _this.lastPage();
            _this.nextPage();
            _this.jumpPage();
    
            // 监听enter事件
            document.onkeydown = function (event){
                var e = event || window.event;
                if(e.keyCode === 13){
                    $(_this.elem).find('.jump-page').click();
                }
            };
    
            // 监听页码输入框事件 暂未定义
            $(_this.elem).find('.jump-page-num').change(function () {
        
            });
    
            // 分页函数执行结束后事件
            afterFunc && _this.afterFunc();
        // }
    }
}

实例化代码：

window.onload = function(){
        var PageFunc = new PageFunc(1, 5, pageSubmit, '#pagination1');
        PageFunc.init();
        var PageFunc1 = new PageFunc(2, 10, pageSubmit, '#pagination2');
        PageFunc1.init();
    }

求大神解惑。

解决方案

在你实例化的代码里，实例变量名称与构造函数重名了，第二次new的时候，实际上是newPageFunc这个构造函数的实例。

window.onload = function(){
        var PageFunc = new PageFunc(1, 5, pageSubmit, '#pagination1');//你的实例名字与构造函数重名了
        PageFunc.init();
        var PageFunc1 = new PageFunc(2, 10, pageSubmit, '#pagination2');
        PageFunc1.init();
    }

代码改为

window.onload = function(){
        var newPageFunc = new PageFunc(1, 5, pageSubmit, '#pagination1');
        newPageFunc.init();
        var PageFunc1 = new PageFunc(2, 10, pageSubmit, '#pagination2');
        PageFunc1.init();
    }

这篇关于javascript - 构造函数无法new第二个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！