TypeError：不是構造函數

Question

我正在嘗試使用基於OOP的javascript/jQuery。我想把我所有的JS函數放在一個類中，所以它可以很容易地被覆蓋/掛鉤。

我嘗試了一個簡單的OOP代碼，但它給出了類型錯誤：不是構造函數。 請查看我的代碼並指導我在代碼中出現了什麼問題，以及如何解決問題。

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

var my = new myTestClass(); 
my.testMethod(); 

感謝

Answer 1

查看提醒：

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; 

Answer 2

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); 
}