"this" does not return the selector

Question

I have a simple library to select an element and return the object of element.

(function() {
    var $ = function(parameter) {
        return new js(parameter);
    };

    var js = function(parameter) {
        var selector;
        selector = document.getElementById(parameter);
        this = selector; // assign selector to this.

        return this;
    };

    // Extend the library.
    $.fn = js.prototype = {
        hide: function() {
            this.style.display = 'none';
            return this;
        }
    };

    if (!window.$) {
        window.$ = $;
    }
})();

When I use it.

HTML

<div id="box"> Hello world! </div>

Javascript

$('box').innerHTML = "Good";

Note: I want to do like this create a simple JavaScript library
What is the problem that prevent run the code ?

You cannot assign anything to `this`. – basilikum Feb 08 '14 at 13:39 — basilikum, Feb 08 '14 at 13:39
@basilikum: `this = selector;`. – Lion King Feb 08 '14 at 13:40 — Lion King, Feb 08 '14 at 13:40
Yes, that's exactly what you can't do. See Tibos answer. – basilikum Feb 08 '14 at 13:41 — basilikum, Feb 08 '14 at 13:41
@LionKing: That is not allowed. – Lightness Races in Orbit Feb 08 '14 at 13:41 — Lightness Races in Orbit, Feb 08 '14 at 13:41

score 2 · Answer 1 · answered Feb 08 '14 at 13:39

2

You cannot assign stuff to this. The error thrown depends on the browser.

Instead, you could simply return the selector:

var js = function(parameter) {
    var selector;
    selector = document.getElementById(parameter);

    return selector;
};

This will override the general mechanism invoked with new and work even with how you wrote the code. Seeing how you're not using the function as a constructor, you could also avoid using new:

var $ = function(parameter) {
    return js(parameter);
};

answered Feb 08 '14 at 13:39

Tibos

27,507
4
50
64

`Error: Cannot assign to 'this'` is not really silent when executing it… It's no syntax error, though. – Bergi Feb 08 '14 at 13:42
You could also avoid the whole function expression = `var $ = js`. – Bergi Feb 08 '14 at 13:43
@Bergi thanks, i fixed the fail silently mention. As for the other suggestion, i would assume there is some more code, otherwise the OP could have done without the `var js` entirely. – Tibos Feb 08 '14 at 13:43
@Tibos: But if I use your code, I think it is just like a function. I want to create a library not just a function. – Lion King Feb 08 '14 at 13:49
@LionKing Yes, it is. This is not surprising, seeing how it **is** a function. Why do you think you need to use new/this ? Perhaps the problem is there. – Tibos Feb 08 '14 at 13:51
@Tibos: I want to do like this [create a simple JavaScript library](http://www.codephun.com/how-to-create-a-simple-javascript-library-like-jquery/) – Lion King Feb 08 '14 at 13:53
Too complicated an answer for this format i'm afraid. – Tibos Feb 08 '14 at 14:08
@Tibos: Sorry, but I did not understand you. (Please see my answer again, I have been changed my code ). – Lion King Feb 08 '14 at 14:12

score 0 · Answer 2 · answered Feb 08 '14 at 13:42

0

You are assigning the selector to this, which is invalid, and you are creating an object that you don't need. Your code can be simplified as this:

(function() {
    var $ = function(parameter) {

        return document.getElementById(parameter);
    };

    if (!window.$) {
        window.$ = $;
    }
})();

answered Feb 08 '14 at 13:42

Andrea Parodi

5,534
27
46

Since we're cutting out pieces of the OP's code, perhaps we could optimize it to this one line: `window.$ = window.$ || document.getElementById.bind(document);` – Tibos Feb 08 '14 at 13:48
Nice! I like conciseness... improve your answer – Andrea Parodi Feb 08 '14 at 13:51

"this" does not return the selector

2 Answers2