I'm trying to use the object I've expose from the a javascript file using browserify, but I keep getting error Uncaught TypeError: undefined is not a function
Here is an example:
foo.js:
var foo = function() {
this.f1 = function(){
console.log('function1')
}
this.f2 = function(){
console.log('function2')
}
};
module.exports = foo;
I'm trying to use the foo in the index.html.
after enter command: browserify foo.js > bundle.js
and include bundle.js to html file.
index.html:
<html>
<head>
<script src="./bundle.js"></script>
<script>
var foo = new foo(); // Uncaught TypeError: undefined is not a function
foo.f1();
</script>
</head>
<body>
</body>
</html>
What am I doing wrong with browserify? Thanks in advance.
EDIT: for wrong example.
original wrong example
foo.js:
var foo = {
f1: function(){
console.log('function1')
},
f2: function(){
console.log('function2')
}
};
module.exports = foo;
If you want to use new, you should declare the foo class like:
foo = function() {
this.f1 = function(){
console.log('function1')
};
this.f2 = function(){
console.log('function2')
};
};
foo_obj = new foo();
foo_obj.f1();
foo_obj.f2();
Instead of a literal. Otherwise, simply the methods of the foo object.
var foo = {
f1: function(){
console.log('function1')
},
f2: function(){
console.log('function2')
}
};
foo.f1();
foo.f2();
Update:
Let's see, I've never used browserify, but accordingly to their docs, you should do something like:
foo.js
module.exports = function() {
this.f1 = function(){
console.log('function1')
},
this.f2 = function(){
console.log('function2')
}
};
main.js
var foo = require('foo');
Then, do:
browserify main.js -o bundle.js
And finally import bundle.js and use new foo() to create the object inside your script.
You're trying to instantiate an object as if it was a function, e.g.
new {}; // invalid!!
new function() {}; // valid!
I would recommend you use either
exports.foo1 = function() { console.log('foo'); }
exports.bar1 = function() { console.log('bar'); }
or if you really want to keep new foo() use:
module.exports = foo;
function foo() {
this.foo1 = function() { console.log('foo'); }
this.bar1 = function() { console.log('bar'); }
}
browserify foo.js --standalone foo > bundle.js
Related
I have a file that includes the current function
function foo(){
/*Some members*/
}
foo.prototype.func = function(p1){
/*some logic*/
return this
}
module.exports = foo
and in the test file
let x = require('First file path');
x.func(p1) /*Throws an error that it's not defined*/
x.prototype.func(p1)/* works normally */
/*I also tried*/
let obj = x();
I am trying to make an npm package and it's not practical to type the prototype every time how to solve this?
Your foo.js should be
function foo() {
/*Some members*/
}
foo.prototype.func = function (p1) {
/*some logic*/
console.log(p1);
}
module.exports = foo;
and usage file should be:
var foo = require('./foo');
var instance = new foo(); //<---notice here
console.log(instance.func("hello"));
I've been running into this issue lately and am looking for a good solution.
Below is the basic setup.
In c.js, a is an empty object. Currently I got around this by putting the var a=require('./a.js') inside the function (cFunction) that needs access to module a's methods. But is that the best way to go about this?
Thanks,
David
main.js
var a = require('./a.js');
a.js
module.exports = (function() {
var b = require('./b.js');
function aFunction() {
console.log("aFunction");
}
return {
aFunction: aFunction
};
})();
b.js
module.exports = (function(){
var c = require('./c.js');
function bFunction(){
console.log('bFunction');
}
return {
bFunction: bFunction
};
})();
c.js
module.exports = (function(){
var a = require('./a.js');
console.log(a); //empty object
function cFunction(){
a.aFunction(); //undefined
console.log('cFunction');
}
return {
cFunction: cFunction
};
})();
I started using Browserify and not sure if I completely understand how to use it.
I have a file with some functions bundled in one object in foo.js
var foo = {
f1: function(){...}
f2: function(){...}
}
module.exports = function () {
return foo;
};
And I want to export them to a variable in the main.js file, so I tried doing this:
var bar = require('/foo')();
The goal is to be able to do bar.f1().
Without executing require('/foo') I get only a function definition, so I have to execute it. Am I doing something wrong?
Just export the object:
var foo = {
f1: function(){...}
f2: function(){...}
};
module.exports = foo;
var Foo = (function () {
var foo = function() { };
var privateMethod = function(){ };
foo.prototype = {
init: function() {
console.log(this.privateMethod); //undefined
}
};
return foo;
})();
I know that I can access privateMethod directly without using the this pointer. But since I come from the c# world, I would like to use it for readability purposes.
Is there any way to reference my "private methods" using a pointer?
You can't. You can only use this to refer to "public" methods. If you really want to use a something.method notation, you could use:
var Foo = (function () {
var foo = function() { };
var private = {
privateMethod : function(){ };
}
foo.prototype = {
init: function() {
console.log(private.privateMethod);
}
};
return foo;
})();
privateMethod is not specific to each instance of foo. Just reference it without the this. qualifier—although you probably want to log the results of a function call, not the function itself:
console.log(privateMethod());
In the <head> of my page, I do this:
<script type="text/javascript" src="js/foo.js"></script>
<script type="text/javascript">
console.log(foo.bar);
</script>
Code of foo.js:
var foo = function()
{
this.bar = function()
{
console.log('here');
}
}
Later on in the html document:
Test
However if I click that link above, it says function not defined even though foo.js has been included. Also if I do console.log(foo) it only shows 'function()' and console.log(foo.bar) shows undefined. Why is this, why can't I access the function?
Because you haven't created an object. This is a correct way of running your code:
var foo = function()
{
this.bar = function()
{
console.log('here');
}
}
var instance = new foo();
instance.bar();
http://jsfiddle.net/zerkms/wDaEn/
Or, you can define it in another way:
var foo = {
bar: function() {
console.log('here');
}
};
foo.bar();​
http://jsfiddle.net/zerkms/wDaEn/1/
I'm not sure if you want it this way, but to get your console.log(foo.bar); to work you can do this:
var foo = {
bar: function() {
console.log('here');
}
};
Since you are using this and creating instance class member, you need to instantiate the class first:
var fooClass = new foo;
console.log(fooClass.bar());
For minimal code changes use the following:
<script type="text/javascript">
var foo = function()
{
this.bar = function()
{
console.log('here');
};
return this; // magic yes ?
};
foo().bar();
</script>
The content of foo.js just initializes foo to a function... What's in the implentation has no importance until foo() is called.
So foo.bar is undefined.
The above answers are not all correct, remember javascript has no concept of classes or instances of said classes. I would do some reading on Javascript scope and closures.
When you assign your object to the variable name bar, you are assigning it to the local scope. You are then attempting to access your local function from a global context. This is wrong.
I am willing to bet you are attempting something along the following:-
var foo = {
bar: function() {
}
}
Etc...