js instance of custom object - javascript

I ran into a problem using instanceof in JavaScript:
var MyObject = function() {
var prop = {};
return prop;
}
var testObject = new MyObject();
console.log(testObject instanceof MyObject); // return false;
Instanceof returns Object instead of the expected MyObject. I can't remove "return prop"; How can I get the type MyObject for testObject ?
Thanks for helping
EDIT: Even if my question looks like this one: What's wrong with a JavaScript class whose constructor returns a function or an object, mine needed a bit more explanation about what a new does.


You could probably break it into steps based on what the new operator does
var MyObject = function () {
var prop = {};
return prop;
}
var testObject = Object.create(MyObject.prototype);
var result = MyObject.call(testObject);
// result is the actual output of new MyObject();
result = result && typeof result === 'object' ? result : testObject;
console.log(testObject instanceof MyObject); // returns true
console.log(result instanceof MyObject); // returns false because it's actually prop (i.e. {})
What we have done is replace the new with the actual steps that happen when you do a new. Below are the steps
Create an object whose prototype is the same as the function's (constructor's) prototype. This is what var testObject = Object.create(MyObject.prototype);
Call the (constructor) function with this set to this newly created object. This what var result = MyObject.call(testObject); does (the first parameter being the value of this for the MyObject invocation)
If the function returns a non null object, the new ... expression evaluates to that value. Otherwise it evaluates to the object created in Step 1.
For the question, the last step's non null return value (prop = {}) was getting in the way of our actually testing the type of the object returned in Step 1. By splitting it into component steps we can get the created object (and use that in the instanceOf test)


If you can at least modify prop, then you could add a flag to it:
var MyObject = function() {
var prop = { _isMyObject: true }
return prop;
};
Then you could have a function that checks for that flag.
function isMyObject(obj) {
return obj._isMyObject ? true : false;
}


You will see why if you try this:
var MyObject = function() {
var prop = { testProp: 1 };
return prop;
}
var testObject = new MyObject();
console.log(testObject.testProp); // returns 1;
If in a class constructor you return an object, the newly instantiated object of that will become that returned object. If you return a primitive value, it will instead become an instance of the object as your originally expected.
So, if you apply Object.prototype.toString() method on your prop object and instead return the result of that (a string primitive), you get your desired MyObject back:
var MyObject = function() {
var prop = {};
return prop.toString();
}
var testObject = new MyObject();
console.log(testObject instanceof MyObject); // returns true;


It's because when you do
var MyObject = function() {
var prop = {};
return prop;
}
you are assigning a function to the variable MyObject. Not creating a custom object MyObject. In order to create a custom object, you need to use the syntax
function MyObject() {
var prop = {};
return prop;
}
var testObject = new MyObject();
console.log(testObject instanceof MyObject); // return true;
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

Related

How to get the name of the variable containing the object in JavaScript

I can get the Class name of the Class with the code below:
function MyClass() {
return 42;
}
var obj = new MyClass();
console.log(obj.constructor.name);
But how to get the name of the variable?

You can't.
Consider:
function MyClass() {
return 42;
}
var obj = new MyClass();
var ob2 = obj;
var ob3 = obj;
There are now three variables all with the same value. Which one would you get if it was possible?
There's no reverse relationship between a variable and its value in JavaScript.

This question defeats itself to a great extent. The use case for this is usually when you scan an object for certain key/value pairs. And even in the event that you want to foster through all global/window variables, you can still do:
for(var obj_name in window) {
if(window.hasOwnProperty && !window.hasOwnProperty(obj_name)) continue;
console.log(obj_name);
if(window[obj_name]) console.log(window[obj_name]);
}

Try this
function MyClass() {
return 42;
}
var obj = new MyClass();
var name = /function (.{1,})\(/;
var results = (name).exec(obj.constructor);
if(results)
{
console.log(results[1])
}

Underscorejs changes function to object

Edit: I realized I passed MyConstructorFunc.prototype to `_.extend().
I ran into an interesting implementation detail when I wanted to extend a function with Underscore.
I built a function constructor,
var MyConstructorFunc = function() {
...
}
then I returned the result of
return _.extend(MyConstructorFunc.prototype, {
\\ ...some properties...
}
What I got back was a typeof MyConstructorFunc == "object"! If _.extend is merging properties into a function why does it return an object?
Looking at the _.extend function I don't see where that happens...
_.extend = function(obj) {
if (!_.isObject(obj)) return obj;
var source, prop;
for (var i = 1, length = arguments.length; i < length; i++) {
source = arguments[i];
for (prop in source) {
if (hasOwnProperty.call(source, prop)) {
obj[prop] = source[prop];
}
}
}
return obj;
};
If I do MyConstructorFunc["someProp"] = someObject["someProp"] and return MyConstructorFunc, I returned a JavaScript object?
I'm missing something...

You are probably passing in a Function object to _.extend. Your sample code does not show it, but if you are making a new instance of your MyConstructorFunc using the "new" keyword, then the result will be an object.
var MyConstructorFunc = function() {
}
var foo = _.extend(MyConstructorFunc, {a:1});
console.log(typeof foo); // function
var funcObj = new MyConstructorFunc();
console.log(typeof funcObj); //object
Extending the MyConstructorFunc itself will return a function type. It's once you use the contructor to create a new function that you are given an object.

Javascript: initialize object by property

var someObject = function(arg) {
this.property = function() {
// do something with the argument
return arg;
}();
};
var obj = new someObject(some argument);
// object.property instanceof "someObject" should be true
When property of someObject is used, a new instance of newObject should be created. For example, when I use the native DOM Element's nextSibling property, a new DOM Element object instance is returned. I wonder if it is possible to create a similar structure. Or would such cause infinite recursion?

Strictly speaking, this is possible in ES5 (all latest browsers, yes that includes IE).
ES5 specifies getters and setters via the get and set keyword or the Object.defineProperty function so you can make functions behave like properties (think innerHTML). Here's how you can do it:
function Mother () {
this.name = '';
Object.defineproperty(this,'child',{
get: function(){
return new Mother();
}
});
}
So the object can now create new instances of itself simply by reading the child property:
var a = new Mother();
a.name = 'Alice';
b = a.child;
b.name = 'Susan';
alert(a.name) // Alice
alert(b.name) // Susan
a instanceof Mother; // true
b instanceof Mother; // true
Having said that, your observation about DOM elements is wrong. The DOM is simply a tree structure. You can create a similar structure yourself using old-school javascript:
function MyObject () {}
var a = new MyObject();
var b = new MyObject();
var c = new MyObject();
a.children = [b,c];
b.nextSibling = c;
c.prevSibling = b;
// now it works like the DOM:
b.nextSibling; // returns c
a.children[1]; // returns c
b.nextSibling.prevSibling instanceof MyObject; // true

No, that's not possible. You could set function to the property, but anyway, you will need to invoke function somehow (with property() notation or with call/apply), because function it's an object itself, and only () or call/apply say to interpreter that you want to execute code, but not only get access to function's object data.

Your understanding of the nextSibling property in the DOM is incorrect. It does not create a new DOMElement, it simply references an existing DOM Node.
When you create a sibling of an element to which you have a reference (e.g., via jQuery or document.createElement), the browser knows to update sibling and parent/child references.
So, the behavior you're trying to emulate doesn't even exist.
As others have intimated, simply accessing a property on an object is not sufficient to get the Javascript interpreter to "do" anything (other than deference the name you're looking up). You'll need property to be a function.

nextSibling doesn't return a new element, it returns an existing element which is the next sibling of the target element.
You can store an object reference as a property of another object just like you can store primitive values.
function SomeObject(obj) {
this.obj = obj;
}
var someObject = new SomeObject(new SomeObject());
someObject.obj instanceof SomeObject //true
However if you want to create a new instance of SomeObject dynamically when accessing someObject.obj or you want to return an existing object based on conditions that shoul be re-evaluated every time the property is accessed, you will need to use a function or an accessor.
function SomeObject(obj) {
this.obj = obj;
}
SomeObject.prototype.clone = function () {
//using this.constructor is a DRY way of accessing the current object constructor
//instead of writing new SomeObject(...)
return new this.constructor(this.obj);
};
var someObject = new SomeObject(new SomeObject());
var someObjectClone = someObject.clone();
Finally with accessors (be aware that they aren't cross-browser and cannot be shimmed)
function SequentialObj(num) {
this.num = num;
}
Object.defineProperty(SequentialObj.prototype, 'next', {
get: function () {
return new this.constructor(this.num + 1);
},
configurable: false
});
var seq = new SequentialObj(0);
console.log(seq.next); //SequentialObj {num: 1}
console.log(seq.next.next.next); //SequentialObj {num: 3}

If you want this.property() to return a new someObject you can write the class as follows:
var someObject = function(arg) {
this.arg = arg;
};
someObject.prototype.property = function(arg) {
// do something with the argument
return new someObject(arg||this.arg);
}();
var obj = new someObject(/*some argument*/);
// object.property instanceof "someObject" should be true
If you want it to return some already instantiated version you can write the code as follows:
var someObject = (function() {
var previous;
function(arg) {
this.arg = arg;
this.propertyBefore = previous;//refers to the someObject created before this one
if(previous) previous.property = this; //before.property now references this class
//this.property will be undefined until another instance of someObject is created
previous = this;
};
})()
var obj = new someObject(/*some argument*/);// returns someObject already created earlier (similar to nextSibling)
One small note - its best practice in javascript to declare class names with a capitalized name (SomeObject rather than someObject)

how to tell if a javascript variable is a function

I need to loop over the properties of a javascript object. How can I tell if a property is a function or just a value?
var model =
{
propertyA: 123,
propertyB: function () { return 456; }
};
for (var property in model)
{
var value;
if(model[property] is function) //how can I tell if it is a function???
value = model[property]();
else
value = model[property];
}

Use the typeof operator:
if (typeof model[property] == 'function') ...
Also, note that you should be sure that the properties you are iterating are part of this object, and not inherited as a public property on the prototype of some other object up the inheritance chain:
for (var property in model){
if (!model.hasOwnProperty(property)) continue;
...
}

Following might be useful to you, I think.
How can I check if a javascript variable is function type?
BTW, I am using following to check for the function.
// Test data
var f1 = function () { alert("test"); }
var o1 = { Name: "Object_1" };
F_est = function () { };
var o2 = new F_est();
// Results
alert(f1 instanceof Function); // true
alert(o1 instanceof Function); // false
alert(o2 instanceof Function); // false

You can use the following solution to check if a JavaScript variable is a function:
var model =
{
propertyA: 123,
propertyB: function () { return 456; }
};
for (var property in model)
{
var value;
if(typeof model[property] == 'function') // Like so!
else
value = model[property];
}

How to determine if an object is an object literal in Javascript?

Is there any way to determine in Javascript if an object was created using object-literal notation or using a constructor method?
It seems to me that you just access it's parent object, but if the object you are passing in doesn't have a reference to it's parent, I don't think you can tell this, can you?

What you want is:
Object.getPrototypeOf(obj) === Object.prototype
This checks that the object is a plain object created with either new Object() or {...} and not some subclass of Object.

I just came across this question and thread during a sweet hackfest that involved a grail quest for evaluating whether an object was created with {} or new Object() (i still havent figured that out.)
Anyway, I was suprised to find the similarity between the isObjectLiteral() function posted here and my own isObjLiteral() function that I wrote for the Pollen.JS project. I believe this solution was posted prior to my Pollen.JS commit, so - hats off to you! The upside to mine is the length... less then half (when included your set up routine), but both produce the same results.
Take a look:
function isObjLiteral(_obj) {
var _test = _obj;
return ( typeof _obj !== 'object' || _obj === null ?
false :
(
(function () {
while (!false) {
if ( Object.getPrototypeOf( _test = Object.getPrototypeOf(_test) ) === null) {
break;
}
}
return Object.getPrototypeOf(_obj) === _test;
})()
)
);
}
Additionally, some test stuff:
var _cases= {
_objLit : {},
_objNew : new Object(),
_function : new Function(),
_array : new Array(),
_string : new String(),
_image : new Image(),
_bool: true
};
console.dir(_cases);
for ( var _test in _cases ) {
console.group(_test);
console.dir( {
type: typeof _cases[_test],
string: _cases[_test].toString(),
result: isObjLiteral(_cases[_test])
});
console.groupEnd();
}
Or on jsbin.com...
http://jsbin.com/iwuwa
Be sure to open firebug when you get there - debugging to the document is for IE lovers.

Edit: I'm interpreting "object literal" as anything created using an object literal or the Object constructor. This is what John Resig most likely meant.
I have a function that will work even if .constructor has been tainted or if the object was created in another frame. Note that Object.prototype.toString.call(obj) === "[object Object]" (as some may believe) will not solve this problem.
function isObjectLiteral(obj) {
if (typeof obj !== "object" || obj === null)
return false;
var hasOwnProp = Object.prototype.hasOwnProperty,
ObjProto = obj;
// get obj's Object constructor's prototype
while (Object.getPrototypeOf(ObjProto = Object.getPrototypeOf(ObjProto)) !== null);
if (!Object.getPrototypeOf.isNative) // workaround if non-native Object.getPrototypeOf
for (var prop in obj)
if (!hasOwnProp.call(obj, prop) && !hasOwnProp.call(ObjProto, prop)) // inherited elsewhere
return false;
return Object.getPrototypeOf(obj) === ObjProto;
};
if (!Object.getPrototypeOf) {
if (typeof ({}).__proto__ === "object") {
Object.getPrototypeOf = function (obj) {
return obj.__proto__;
};
Object.getPrototypeOf.isNative = true;
} else {
Object.getPrototypeOf = function (obj) {
var constructor = obj.constructor,
oldConstructor;
if (Object.prototype.hasOwnProperty.call(obj, "constructor")) {
oldConstructor = constructor;
if (!(delete obj.constructor)) // reset constructor
return null; // can't delete obj.constructor, return null
constructor = obj.constructor; // get real constructor
obj.constructor = oldConstructor; // restore constructor
}
return constructor ? constructor.prototype : null; // needed for IE
};
Object.getPrototypeOf.isNative = false;
}
} else Object.getPrototypeOf.isNative = true;
Here is the HTML for the testcase:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- Online here: http://code.eligrey.com/testcases/all/isObjectLiteral.html -->
<title>isObjectLiteral</title>
<style type="text/css">
li { background: green; } li.FAIL { background: red; }
iframe { display: none; }
</style>
</head>
<body>
<ul id="results"></ul>
<script type="text/javascript">
function isObjectLiteral(obj) {
if (typeof obj !== "object" || obj === null)
return false;
var hasOwnProp = Object.prototype.hasOwnProperty,
ObjProto = obj;
// get obj's Object constructor's prototype
while (Object.getPrototypeOf(ObjProto = Object.getPrototypeOf(ObjProto)) !== null);
if (!Object.getPrototypeOf.isNative) // workaround if non-native Object.getPrototypeOf
for (var prop in obj)
if (!hasOwnProp.call(obj, prop) && !hasOwnProp.call(ObjProto, prop)) // inherited elsewhere
return false;
return Object.getPrototypeOf(obj) === ObjProto;
};
if (!Object.getPrototypeOf) {
if (typeof ({}).__proto__ === "object") {
Object.getPrototypeOf = function (obj) {
return obj.__proto__;
};
Object.getPrototypeOf.isNative = true;
} else {
Object.getPrototypeOf = function (obj) {
var constructor = obj.constructor,
oldConstructor;
if (Object.prototype.hasOwnProperty.call(obj, "constructor")) {
oldConstructor = constructor;
if (!(delete obj.constructor)) // reset constructor
return null; // can't delete obj.constructor, return null
constructor = obj.constructor; // get real constructor
obj.constructor = oldConstructor; // restore constructor
}
return constructor ? constructor.prototype : null; // needed for IE
};
Object.getPrototypeOf.isNative = false;
}
} else Object.getPrototypeOf.isNative = true;
// Function serialization is not permitted
// Does not work across all browsers
Function.prototype.toString = function(){};
// The use case that we want to match
log("{}", {}, true);
// Instantiated objects shouldn't be matched
log("new Date", new Date, false);
var fn = function(){};
// Makes the function a little more realistic
// (and harder to detect, incidentally)
fn.prototype = {someMethod: function(){}};
// Functions shouldn't be matched
log("fn", fn, false);
// Again, instantiated objects shouldn't be matched
log("new fn", new fn, false);
var fn2 = function(){};
log("new fn2", new fn2, false);
var fn3 = function(){};
fn3.prototype = {}; // impossible to detect (?) without native Object.getPrototypeOf
log("new fn3 (only passes with native Object.getPrototypeOf)", new fn3, false);
log("null", null, false);
log("undefined", undefined, false);
/* Note:
* The restriction against instantiated functions is
* due to the fact that this method will be used for
* deep-cloning an object. Instantiated objects will
* just have their reference copied over, whereas
* plain objects will need to be completely cloned.
*/
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write("<body onload='window.top.iframeDone(Object);'>");
doc.close();
function iframeDone(otherObject){
// Objects from other windows should be matched
log("new otherObject", new otherObject, true);
}
function log(msg, a, b) {
var pass = isObjectLiteral(a) === b ? "PASS" : "FAIL";
document.getElementById("results").innerHTML +=
"<li class='" + pass + "'>" + msg + "</li>";
}
</script>
</body>
</html>

It sounds like you are looking for this:
function Foo() {}
var a = {};
var b = new Foo();
console.log(a.constructor == Object); // true
console.log(b.constructor == Object); // false
The constructor property on an object is a pointer to the function that is used to construct it. In the example above b.constructor == Foo. If the object was created using curly brackets (the array literal notation) or using new Object() then its constructor property will == Object.
Update: crescentfresh pointed out that $(document).constructor == Object rather than being equal to the jQuery constructor, so I did a little more digging. It seems that by using an object literal as the prototype of an object you render the constructor property almost worthless:
function Foo() {}
var obj = new Foo();
obj.constructor == Object; // false
but:
function Foo() {}
Foo.prototype = { objectLiteral: true };
var obj = new Foo();
obj.constructor == Object; // true
There is a very good explanation of this in another answer here, and a more involved explanation here.
I think the other answers are correct and there is not really a way to detect this.

An object literal is the notation you use to define an object - which in javascript is always in the form of a name-value pair surrounded by the curly brackets. Once this has been executed there is no way to tell if the object was created by this notation or not (actually, I think that might be an over-simplification, but basically correct). You just have an object. This is one of the great things about js in that there are a lot of short cuts to do things that might be a lot longer to write. In short, the literal notation replaces having to write:
var myobject = new Object();

I had the same issue, so I decide to go this way:
function isPlainObject(val) {
return val ? val.constructor === {}.constructor : false;
}
// Examples:
isPlainObject({}); // true
isPlainObject([]); // false
isPlainObject(new Human("Erik", 25)); // false
isPlainObject(new Date); // false
isPlainObject(new RegExp); // false
//and so on...

There is no way to tell the difference between an object built from an object literal, and one built from other means.
It's a bit like asking if you can determine whether a numeric variable was constructed by assigning the value '2' or '3-1';
If you need to do this, you'd have to put some specific signature into your object literal to detect later.

Nowaday there is a more elegant solution that respond exactly to your question:
function isObject(value) {
return value !== null && value !== undefined && Object.is(value.constructor, Object)
}
// Test stuff below //
class MyClass extends Object {
constructor(args) {
super(args)
}
say() {
console.log('hello')
}
}
function MyProto() {
Object.call(this)
}
MyProto.prototype = Object.assign(Object.create(Object.prototype), {
constructor: MyProto,
say: function() {
console.log('hello')
}
});
const testsCases = {
objectLiteral: {},
objectFromNew: new Object(),
null: null,
undefined: undefined,
number: 123,
function: new Function(),
array: new Array([1, 2, 3]),
string: new String('foobar'),
image: new Image(),
bool: true,
error: new Error('oups'),
myClass: new MyClass(),
myProto: new MyProto()
}
for (const [key, value] of Object.entries(testsCases)) {
console.log(`${key.padEnd(15)} => ${isObject(value)}`)
}
Best regards

typeof obj === 'object' && obj !== null && Object.getPrototypeOf(obj) === Object.prototype
below all return false
123
null
undefined
'abc'
false
true
[]
new Number()
new Boolean()
() => {}
function () {}
an improvement over jesse's answer

11 year old question here is my tidy solution, open to edge case suggestions;
steps -> look for objects only then compare to check properties -> object literals do not have length, prototype and for edge case stringyfy properties.
tried in test for JSON and
Object.create(Object.create({cool: "joes"})).
"use strict"
let isObjectL = a => {
if (typeof a !=='object' || ['Number','String','Boolean', 'Symbol'].includes(a.constructor.name)) return false;
let props = Object.getOwnPropertyNames(a);
if ( !props.includes('length') && !props.includes('prototype') || !props.includes('stringify')) return true;
};
let A={type:"Fiat", model:"500", color:"white"};
let B= new Object();
let C = { "name":"John", "age":30, "city":"New York"};
let D= '{ "name":"John", "age":30, "city":"New York"}';
let E = JSON.parse(D);
let F = new Boolean();
let G = new Number();
console.log(isObjectL(A));
console.log(isObjectL(B));
console.log(isObjectL(C));
console.log(isObjectL(D));
console.log(isObjectL(E));
console.log(isObjectL(JSON));
console.log(isObjectL(F));
console.log(isObjectL(G));
console.log(isObjectL(
Object.create(Object.create({cool: "joes"}))));
console.log(isObjectL());
Another variant showing inner working
isObject=function(a) {
let exclude = ['Number','String','Boolean', 'Symbol'];
let types = typeof a;
let props = Object.getOwnPropertyNames(a);
console.log((types ==='object' && !exclude.includes(a.constructor.name) &&
( !props.includes('length') && !props.includes('prototype') && !props.includes('stringify'))));
return `type: ${types} props: ${props}
----------------`}
A={type:"Fiat", model:"500", color:"white"};
B= new Object();
C = { "name":"John", "age":30, "city":"New York"};
D= '{ "name":"John", "age":30, "city":"New York"}';
E = JSON.parse(D);
F = new Boolean();
G = new Number();
console.log(isObject(A));
console.log(isObject(B));
console.log(isObject(C));
console.log(isObject(D));
console.log(isObject(E));
console.log(isObject(JSON));
console.log(isObject(F));
console.log(isObject(G));
console.log(isObject(
Object.create(Object.create({cool: "joes"}))));

Categories