I’m working on a “hybrid” android appilcation. In the app, part of the UI was written in HTML and hosted in a WebView. And I exposed several Java objects to JavaScript as Java Script Interface.

1
2

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(irBlaster, "irBlaster");

The irBlaster object contains several methods, and js will invoke the specific method according to the data-attribute bound to the element.

1
2
3
4
5
6
7
8
9
10

onIrButtonClicked: (e) =>
  $button = $(e.currentTarget)
  type = $button.data('irType')
  sendFunc = irBlaster[type]
  code = @parseCode($button.data('irCode'))
  length = $button.data('irLength')
  sendFunc(length, code)

The previous coffee-script works fine in my Jasmine tests with javascript mock version of irBlaster. When the button clicked, the proper method was invoked with proper arguments.
But when I run this code with real android app, WebView yields error says “NPMethod called on non-NPObject wrapped JSObject”.

The error message looks quite hard to understand the meaning, so I spent quite time to diagnose the code.

After several try, I found the following code works fine, but original one doesn’t:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

onIrButtonClicked: (e) =>
  $button = $(e.currentTarget)
  type = $button.data('irType')
  switch irBlaster[type]
    when 'NEC'
      code = @parseCode($button.data('irCode'))
      length = $button.data('irLength')
      irBlaster.NEC(length, code)
    .
    .
    .

So I realize the issue was occurd in the javascript contextual binding.

Javascript is function-first-citizen language, and method call on object was simulate by invoking the function with specific context, and the code behavior won’t change if there is no reference to this pointer in the method. So it is quite normal that fetch a method from a object than invoke it without context.

That is why the Jasmine tests passed successfully. But the irBlaster isn’t real or simple javascript, but a native java object provided by js binding interface, so there is a limitation that the method on it cannot be invoked without context. Or it causes error.

So the issue can be resolved as following code by invoking the method in a “reflection” flavor:

1
2
3
4
5
6
7
8
9
10

onIrButtonClicked: (e) =>
  $button = $(e.currentTarget)
  type = $button.data('irType')
  sendFunc = irBlaster[type]
  code = @parseCode($button.data('irCode'))
  length = $button.data('irLength')
  sendFunc.call(irBlaster, length, code)

In previous code, I invoke the sendFunc with call, and provids irBlaster as the context as this. So the problem solved, the code runs smoothly without issue.

In Node.js world, we usually encapsulate a service into a module, which means the module need to export the façade of the service. In most case the service could be a singleton, all apps use the same service.

But in some rare cases, people might would like to create several instances of the service ,which means the module also need to also export the service constructor.

A very natural idea is to export the default service, and expose the constructor as a method of the default instance. So we could consume the service in this way:

1
2

var defaultService = require('service');
var anotherService = service.newService();

So we need to write the module in this way:

1
2
3
4
5

function Service() { }
module.exports = new Service();
moudle.exports.newService = Service;

But for some reason, node.js doesn’t allow module to expose object by assigning the a object to module.exports.
To export a whole object, it is required to copy all the members of the object to moudle.exports, which drives out all kinds of tricky code.
I misunderstood how node.js require works, and HERE is the right understanding. Even I misunderstood the mechanism, but the conclusion of this post is still correct. To export function is still a more convenient way to export both default instance and the constructor.

And things can become much worse when there are backward reference from the object property to itself.
So to solve this problem gracefully, we need to change our mind.
Since it is proved that it is tricky to export a object, can we try to expose the constructor instead?

Then answer is yes. And Node.js does allow we to assign a function to the module.exports to exports the function.
So we got this code.

1
2

function Service() { }
module.exports = Service;

So we can use create service instance in this way:

1
2

var Service = require('service');
var aService = new Service();

As you see, since the one we exported is constructor so we need to create a instance manually before we can use it. Another problem is that we lost the shared instance between module users, and it is a common requirement to share the same service instance between users.

How to solve this problem? Since as we know, function is also kind of object in javascript, so we can kind of add a member to the constructor called default, which holds the shared instance of the service.

This solution works but not in a graceful way! A crazy but fancy idea is that can we transform the constructor itself into kind of singleton instance??!! Which means you can do this:

1
2
3
4

var defaultService = require('service');
defaultService.foo();
var anotherService = service();
anotherService.foo();

The code style looks familiar? Yes, jQuery, and many other well-designed js libraries are designed to work in this way.
So our idea is kind of feasible but how?

Great thank to Javascript’s prototype system (or maybe SELF’s prototype system is more accurate.), we can simply make a service instance to be the constructor’s prototype.

1
2
3

function Service() { }
module.exports = Service;
Service.__proto__ = new Serivce;

Sounds crazy, but works, and gracefully! That’s the beauty of Javascript.

Javascript is weakly typed, and its type system always behaves different than your expectation.
Javascript provide typeof operator to test the type of a variable. it works fine generally. e.g.

1
2
3
4
5
6

typeof(1) === 'number'
typeof('hello') === 'string'
typeof({}) === 'object'
typeof(function(){}) === 'function'

But it is not enough, it behaves stupid when you dealing with objects created by constructors. e.g.
if you expected

1

typeof(new Date('2012-12-12')) === 'date' // Returns false

1

typeof(new Date('2012-12-12')) === 'object' // Returns true

How can we make the typeof() operator works in the way as we expected?
As we know when we create a object, the special property of the object constructor will be set to the function that create the object. which means:

1

(new Date('2012-1-1')).constructor // Returns [Function Date]

So ideally we can retrieve the name of the function as the type of the variable. And to be compatible with javascript’s native operator, we need to convert the name to lower case. So we got this expression:

1
2
3
4
5

function typeOf(obj) { // Use capital O to differentiate this function from typeof operator
	return obj ? obj.constructor.name.toLowerCase() : typeof(obj);
}
typeOf(new Date('2012-1-1')) === 'date' // Returns true

And luckily, we can also apply this to other primitive types, e.g:

1
2
3

typeOf(123) === 'number'; // Returns true
typeOf('hello') === 'string'; // Returns true
typeOf(function(){}) === 'function';  // Returns true

or even

1

typeOf({}) === 'object'; // Returns true

So in general, we use this expression as new implementation of the typeof() operator! EXCEPT One case!

If someone declare the object constructor in this way, our new typeof() implementation will work improperly!

1
2
3
4
5

var SomeClass = (function() {
	return function() {
		this.someProperty='some value';
	}
})();

or even define the constructor like this

1
2
3

var SomeClass = function() {
	this.someProperty = 'some value';
}

And we will find that

1

typeOf(new SomeClass) === ''; // Returns true

the reason behind this is because the real constructor of the SomeClass is actually an anonymous function, whose name is not set.

To solve this problem, we need to declare the name of the constructor:

1
2
3
4
5

var SomeClass = (function() {
	return function SomeClass() {
		this.someProperty='some value';
	}
})();

or even define the constructor like this

1
2
3

var SomeClass = function SomeClass() {
	this.someProperty = 'some value';
}