Wie kann eine Funktion mit einem Prototyp in einem eingebetteten JavaScript-Widget kommunizieren?

Question

Ich versuche ein eingebettebares JavaScript-Widget zu erstellen. Das folgende (Beispiel) ist in einem Skript-Tag enthalten.

(function (window) { 

    function TestFunction(params) { 
     console.log("init"); 
     this.someVal = "ThisVal"; 
    } 

    TestFunction.prototype.protoFunc = function() { 
     return "Hello " + this.someVal; 
    }; 

    function hello() { 
     return eval("TestFunction.protoFunc();"); 
    } 

}(window)); 

Wenn instanziiert ich das Widget als

let test = TestFunction({}); 

folgt Wenn ich dann

Typ

test.protoFunc(); 

Hallo ThisVal

gedruckt werden. Wenn die Hello-Funktion jedoch ausgelöst wird, wird ein Fehler ausgegeben, der besagt, dass TestFunction.protoFunc is not a function. Gibt es eine Möglichkeit, dass die hello() Funktion die TestFunction.prototype.protoFunc Funktion auslösen kann?

Answer 1

Ich habe das Beispiel ein wenig aktualisiert. Der Workflow ist jetzt objektgesteuert. Wenn ich Sie falsch verstanden habe, geben Sie mir bitte weitere Informationen.

(function (window) { 
 

 
    // Object instance 
 
    let instance = null; 
 

 
    // Class definition 
 
    var TestFunction = function (params) { 
 
     console.log("init"); 
 
     this.options = params; 
 
     
 
     setTimeout(hello, 100); // triggering after initiation 
 
    } 
 

 
    // Class method 
 
    TestFunction.prototype.protoFunc = function() { 
 
     console.log("Hello " + this.options.name); 
 
    }; 
 

 
    // the triggering function 
 
    function hello() { 
 
     return eval("instance.protoFunc()"); 
 
    } 
 

 
    // initiate the instance 
 
    instance = new TestFunction({ name: 'Jon Doe' }); 
 
    
 
    hello(); // trigger outside of class 
 
}(window));

Ich habe ein anderes Beispiel zu zeigen, wie Werke Einkapselung.

var TestFunction = (function() { 
 
    function TestFunction(params) { 
 
    console.log('init'); 
 
    this.options = params; 
 
    } 
 
    TestFunction.prototype.setName = function(name) { 
 
    this.options.name = name; 
 
    }; 
 
    TestFunction.prototype.getName = function() { 
 
    return this.options.name; 
 
    }; 
 
    TestFunction.prototype.protoFunc = function() { 
 
    console.log("Hello " + this.getName()); 
 
    }; 
 
    return TestFunction; 
 
}()); 
 

 
var test = new TestFunction({ 
 
    name: 'test' 
 
}); 
 

 
test.protoFunc(); 
 
test.setName('Wuhu!'); 
 
test.protoFunc();