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

// file 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;

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

TypeError：不是构造函数

2 个答案: