TypeError:不是构造函数

TypeError: not a constructor

本文关键字：构造函数 TypeError      更新时间：2023-09-26

我正在尝试使用基于OOP的javascript/jQuery。我想把我所有的JS函数都放在一个类中，这样它就可以很容易地被覆盖/挂起。

我尝试了一个简单的OOP代码，但它给出的类型错误：不是构造函数。请看一看我的代码，并指导我的代码中有什么错误，以及如何修复它。

var myTestClass = {
    testAttribute : 'test', // atttribute
    testMethod : function(){ alert( testAttribute); }
};
var my = new myTestClass();
my.testMethod();

感谢

查看您的警报：

var myTestClass = {
    testAttribute: 'test', 
    testMethod: function () { alert(this.testAttribute); }

  };

  myTestClass.testMethod();

另一种方法：

function myTClass(){
    var testAttribute = 'test';
    this.testMethod = function () {
      alert(testAttribute);
    };
  }
  var obj = new myTClass();
  obj.testMethod();

懒惰继承示例：

function myTClass(){
    this.testMethod = function () {
      alert(this.testAttribute);
    };
  }
  myTClass.prototype.testAttribute = 'test';
  var obj = new myTClass();
  obj.testMethod();
  function derivedTClass() {
    myTClass.call(this);
    this.testMethod = function () {
      alert('derived ' + this.testAttribute);
    };
  }
  derivedTClass.prototype = Object.create(myTClass.prototype);
  var obj2 = new derivedTClass();
  obj2.testMethod();
  derivedTClass.prototype.constructor = derivedTClass;

var myTestClass = {
    testAttribute : 'test',
    testMethod : function(){ 
        alert(myTestClass.testAttribute); 
    }
};
var my = Object.create(myTestClass);
my.testMethod();

或

var myTestClass1 = function () {
    this.options = {};
    this.testAttribute = "test";
};
myTestClass1.prototype.testMethod = function () {
    var self = this;
    alert(self.testAttribute);
}
var x = new myTestClass1();
x.testMethod();

或者如果您使用jQuery

(function ($) {
    'use strict';
    var MyTestClassObject = {
        testMethod: function () {
            var self = this;
            alert($.fn.myTestClass.options.testAttribute);
        },
        init: function (options, elem) {
            $.fn.myTestClass.options = 
                $.extend({}, $.fn.myTestClass.options, options);
        }
    };
    $.fn.myTestClass = function (options) {
        var out = Object.create(MyTestClassObject);
        out.init(options, this); 
        return out;
    };
    $.fn.myTestClass.options = {
        testAttribute : 'test' //default
    };
}(jQuery));
var x = $.fn.myTestClass({testAttribute: 'overwrite'});
x.testMethod();

或具有继承和抽象类

var GElement = function (x, y)  {
    this.x;
    this.y;
    throw "can not instantiate GElement";
};
GElement.prototype.init = function (x, y) {
    this.x = x;
    this.y = y;
}
GElement.prototype.draw = function () { 
    throw "method draw of type GElement is abstract";
}
var Circle = function () {
    this.radius;
};
Circle.prototype = Object.create(GElement.prototype);
Circle.prototype.init = function (x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
}
Circle.prototype.draw = function() {
    alert('circle draw { x: ' + this.x + ", y: " + this.y + 
                  ", radius: " + this.radius + " }");
};
var Rectangle = function () {
    this.width;
    this.height;
};
Rectangle.prototype = Object.create(GElement.prototype);
Rectangle.prototype.init = function (x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}
Rectangle.prototype.draw = function() {
    alert('rectangle draw { x: ' + this.x + ", y: " + this.y + 
            ", width: " + this.width + ", height: " + this.height + " }");
};
var b = new Circle();
b.init(1,2,3);
var r = new Rectangle();
r.init(5,5,12,7);
b.draw();
r.draw();

或者，使用es6

//文件test.js

class TestClass {
    constructor (init) {
        this._val = init;
    }
    get val () {
        return this._val;
    }
    set val (arg) {
        this._val = arg;
    }
    doSomething () {
        console.log('Wow');
    }
}
export default TestClass;

//文件test2.js

import TestClass from "./test.js";
const COLORS = new Set(['Red', 'Green', 'Blue']);
class InheritedTestClass extends TestClass {
    static isValidColor (color) {
        return COLORS.has(color);
    }
    constructor (init, color) {
        super(init);
        if (InheritedTestClass.isValidColor(color)) {
            this.color = color;
        } else {
            throw TypeError(`InheritedTestClass.constructor [error]: color "${color}" is undefined`);
        }
    }
    doSomething () {
        console.log("Bark");
    }
}
export default InheritedTestClass;

//文件main.js

import TestClass from '.test.js';
import InheritedTestClass from '.test2.js';
let test1 = new TestClass(10);
let test2 = new InheritedTestClass(12, 'Red');
test1.doSomething();
test2.doSomething();
test2.val = 30;
console.log(test2.val);
if (test1 instanceof TestClass) {
    console.log(true);
}
if (test2 instanceof TestClass) {
    console.log(true);
}
if (test2 instanceof InheritedTestClass) {
    console.log(true);
}
if (!(test1 instanceof InheritedTestClass)) {
    console.log(true);
}
相关文章：