对象的价值和原型问题

Question

I'm trying to create a new class, but it doesn't seem to be working. Here's the code:

<script>
var myClass = function(arg){
    return new init(arg);
}
var init = function(arg){
    return arg;
}
init.prototype.prop = true;
</script>

The problem is that myClass('foo') doesn't return 'foo' as expected. Instead, it returns init . Then I tried this code:

var init = function(arg){
    return [arg];//Now init returns an array
}

The myClass('foo') returns ['foo'] , but then myClass('foo').prop turns into undefined . Does anyone know how to solve it?

EDIT: I want to create this class more or less as jQuery does. For example: $('div') returns directly a value (in case, all div tags), but not an object with a property that stores this values

Answer 1

When you call new init() and within init() you return a non-object, it yields an instance of init instead of the returned value.

If you return an Array from your init() function, it gets returned instead; but Array doesn't take your init prototype into consideration :)

See also: https://stackoverflow.com/a/1978474/1338292

If you want to be like an array, you can do this:

function myClass(arg) {
    return new init(arg);
}
function init(arg) {
    this.push(arg);
}
init.prototype = [];
init.prototype.foo = true;

var x = new init('foo');
console.log(x) // ["foo"]
console.log(x.foo) // true

It makes init inherit from the Array prototype (ie [] ). After that you can add more properties and methods to the init prototype as you wish.

Answer 2

In you code:

> <script>
> var myClass = function(arg) {
>   return new init(arg);
> }
> var init = function(arg){
>   return arg;
> }
>
> init.prototype.prop = true;
> </script>
>

The problem is that myClass('foo') doesn't return 'foo' as expected. Instead, it returns init. Then I tried this code:

Your code may be clearer if written as function declarations (which is more common):

function myClass(arg) {
  return new init(arg);
}

function init(arg) {
  return arg;
}

When you call myClass('foo') , you pass a string to init , which is called as a constructor. The function then attempts to return the string, however a function called as a constructor will always return an object. If you try to return a primitive, it will instead return its this object. It's not very clearly stated in ECMA-262 . but it is there.

Then I tried this code:

var init = function(arg) { return [arg]; //Now init returns an array

Because an array is an object, so that is what is returned.

> }
> 

The myClass('foo') returns ['foo'], but then myClass('foo').prop turns into undefined. Does anyone know how to solve it?

Because your constructor returns an array, not its this object. The returned array inherits from Array.prototype , not init.prototype .

Answer 3

If you return a value from a function and try to use the new keyword with it, the return value will not be a newly instantiated object, but rather the value following the return . So in your case the 'foo' string is being returned, not a new object as you expect.

Answer 4

If you want to create a new class, you might want to consider this pattern:

var MyClass =function(arg) {
    this.init(arg);
};
MyClass.prototype = {
    init: function(arg) {
        // Do something with that arg
        this.someArg = arg;
    },
    myProperty: 'Hell world',
    someArg: null   
};

var myVar = new MyClass('Some arg');

Test is out:

console.log(myVar.myProperty);
console.log(myVar.someArg);

Check it out: http://jsfiddle.net/4zwpm/