Error: Object doesn't support this property or method

Discussion in 'Javascript' started by lochru45@gmail.com, Aug 19, 2008.

  1. Guest

    I'm running the following javascript with no problem in FireFox:

    Code:
    var multiGallery = {
    init: function(options){
    this.overlay = new
    Element('div').setProperty('id','lbOverlay').injectInside(document.body).addEvent('click',this.close.bind(this));
    this.gallery = new
    Element('div').setProperty('id','gallery').injectInside(document.body);
    this.fx = {
    overlay: this.overlay.effect('opacity', {duration: 250}).hide()
    }
    },
    
    In IE7 I get an error that says "Microsoft JScript runtime error:
    Object doesn't support this property or method" on each of the "this."
    statements.

    Anyone have any issues with this and have a fix for it?

    Thanks!
     
    , Aug 19, 2008
    #1
    1. Advertising

  2. optimistx Guest

    wrote:
    ....
    > Anyone have any issues with this and have a fix for it?
    >
    > Thanks!


    This? This? Really! Who has never had...20 % of my coding time has gone to
    thinking, what this means. If somebody could explain this with pictures,
    examples, without links to ECMA and without sentences exceeding 15 words, I
    would be one of the happiest people on earth.
    FAQ might be excellent for those experts, who already know, but anything
    with [[scope]], 'Activation object', 'gc', 'execution context' and sentences
    with 50 words blur my vision and understanding hopelessly.
     
    optimistx, Aug 19, 2008
    #2
    1. Advertising

  3. Stevo Guest

    optimistx wrote:
    > If somebody could explain this


    You might want to search for an introduction to object oriented
    programming. I'll give it a go though. Imagine you have an object and it
    has a function in it (which because it's part of an object gets labeled
    as a 'method').

    var myobj={a:1,b:2,c:3};
    myobj.mymethod=function(){return this.a;}

    If I call myobj.mymethod() then I will get back the value 1. The 'this'
    property in that function refers to the object that it belongs to
    basically. You might think why can't you just return myobj.a instead. In
    this particular example you can. But take the example below where you can't.

    var myfunc=function(){return this.a;}

    var myobj1={a:1,b:2,c:3};
    var myobj2={a:4,b:5,c:6};
    myobj1.mymethod=myfunc;
    myobj2.mymethod=myfunc;

    If you call myobj1.mymethod() it will return 1.
    If you call myobj2.mymethod() it will return 4.

    The myfunc function doesn't know which object it will be working on
    because it's shared by both objects. The this property is the object
    it's being called on.
     
    Stevo, Aug 19, 2008
    #3
  4. optimistx Guest

    Stevo wrote:
    ....

    > var myfunc=function(){return this.a;}
    >
    > var myobj1={a:1,b:2,c:3};
    > var myobj2={a:4,b:5,c:6};
    > myobj1.mymethod=myfunc;
    > myobj2.mymethod=myfunc;
    >
    > If you call myobj1.mymethod() it will return 1.
    > If you call myobj2.mymethod() it will return 4.
    >
    > The myfunc function doesn't know which object it will be working on
    > because it's shared by both objects. The this property is the object
    > it's being called on.


    Thanks for your kind answer. I think I understand your example. In the
    meantime I found
    http://www.digital-web.com/articles/scope_in_javascript
    which explains several other cases. The section 'Complications' contains a
    simplified example:

    <script type="text/javascript">
    function BigComputer(answer) {
    this.the_answer = answer;
    this.ask_question = function () {
    alert(this.the_answer);
    }
    }

    function addhandler() {
    var deep_thought = new BigComputer(42),
    the_button = document.getElementById('thebutton');

    the_button.onclick = deep_thought.ask_question;
    }

    window.onload = addhandler;
    </script>

    How is that supposed to work? What is 'this' here and why? Do we get back
    the answer '42'? The answer is in the link, but I would be curious to know
    how many of the readers could in a minute or two find the correct answer AND
    the explanation without looking at the link. (my guess is: 1 or 2 :) )

    -----

    My two brain cells got twisted like spaghetti with the solution:

    Function.prototype.bind = function(obj) {
    var method = this,
    temp = function() {
    return method.apply(obj, arguments);
    };

    return temp;
    }

    function addhandler() {
    var deep_thought = new BigComputer(42),
    the_button = document.getElementById('thebutton');

    the_button.onclick = deep_thought.ask_question.bind(deep_thought);
    }

    If I have to write and read code like this with a speed 60 lines/hour I have
    a lot to learn. Good material for learning?
     
    optimistx, Aug 20, 2008
    #4
  5. wrote:
    > I'm running the following javascript with no problem in FireFox:
    >
    >
    Code:
    > var multiGallery = {
    > 	init: function(options){
    > 		this.overlay = new
    > Element('div').setProperty('id','lbOverlay').injectInside(document.body).addEvent('click',this.close.bind(this));
    > 		this.gallery = new
    > Element('div').setProperty('id','gallery').injectInside(document.body);
    > 		this.fx = {
    > 			overlay: this.overlay.effect('opacity', {duration: 250}).hide()
    > 		}
    > 	},
    > 
    >
    > In IE7 I get an error that says "Microsoft JScript runtime error:
    > Object doesn't support this property or method" on each of the "this."
    > statements.
    >
    > Anyone have any issues with this and have a fix for it?


    You are using non-standard objects. Until you tell what these constructor
    calls and other calls are going to do, the only and probably best answer
    that can be given is: Probably one or more identifiers that you are using
    right-hand side of the assignment are not defined, or one or more calls do
    not return references to objects which is why the associated property lookup
    operation fails.

    In any case, bind() smells of Prototype.js or jQuery, whereas both are
    generally frowned upon here due to their apparent lack of code quality.

    <http://jibbering.com/faq/>


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Aug 20, 2008
    #5
  6. jdalton Guest

    jdalton, Aug 24, 2008
    #6
  7. optimistx wrote:
    <snip>
    > <script type="text/javascript">
    > function BigComputer(answer) {
    > this.the_answer = answer;
    > this.ask_question = function () {
    > alert(this.the_answer);
    > }
    > }
    >
    > function addhandler() {
    > var deep_thought = new BigComputer(42),
    > the_button = document.getElementById('thebutton');
    >
    > the_button.onclick = deep_thought.ask_question;
    > }
    >
    > window.onload = addhandler;
    > </script>
    >
    > How is that supposed to work? What is 'this' here and why? Do we
    > get back the answer '42'? The answer is in the link, but I would
    > be curious to know how many of the readers could in a minute or
    > two find the correct answer AND the explanation without looking
    > at the link. (my guess is: 1 or 2 :) )


    You would be wrong. If you look in the group's archives you may see that
    issues surrounding the value of - this - in this and similar/related
    contexts are quite often the subject of questions to the group, and have
    received detailed (and factual) answers from many individual over the
    years. Making it certain that the individuals giving those answers
    understood the situation, and very likely than the majority of the
    individuals reading those answers either already knew or now know the
    expected behaviour.

    Of course searching the newsgroup for "this" will not be particularly
    profitable, but searching for "this keyword" and/or "this operator" will
    very likely turn up those answers (strictly - this - is a keyword not an
    operator, but strongly insisting on that distinction is a bit too
    pedantic).

    > My two brain cells got twisted like spaghetti with the
    > solution:
    >
    > Function.prototype.bind = function(obj) {
    > var method = this,
    > temp = function() {
    > return method.apply(obj, arguments);
    > };
    >
    > return temp;
    > }
    >
    > function addhandler() {
    > var deep_thought = new BigComputer(42),
    > the_button = document.getElementById('thebutton');
    >
    > the_button.onclick = deep_thought.ask_question.bind(deep_thought);
    > }
    >
    > If I have to write and read code like this with a speed 60
    > lines/hour I have a lot to learn. Good material for learning?


    That is not an ideal solution in the context of intrinsic event handlers
    because it complicates the process of re-retrieving the reference to -
    the_button -, which is often wanted in that sort of context (you either
    have to store it as a property of the object (introducing the circular
    reference memory leak issue on IE), re-use - getElementById - (and so
    hard code or store the identifier in the called method or on the object)
    or retrieve it from the event's target (using test-and-branch code to
    account for browser differences), when in the intrinsic event listener
    call the - this - value would have been a reference to that element).

    It also suffers from encouraging a very inefficient style of coding
    where the association of the object method and the object is established
    just prior to the use of function and re-established for each use (this
    is more noticeable with - setTimeout than intrinsic event handlers)
    rather than one time only when the object is created. The proposed -
    bind - method creates a new function object instance each time it is
    called and that is an overhead that may not need to be suffered more
    than once.

    Richard.
     
    Richard Cornford, Aug 26, 2008
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Roman
    Replies:
    0
    Views:
    4,041
    Roman
    Jan 4, 2004
  2. mygoogleac
    Replies:
    0
    Views:
    186
    mygoogleac
    Oct 2, 2003
  3. Matt
    Replies:
    3
    Views:
    209
  4. news.onetel.net.uk
    Replies:
    3
    Views:
    224
    Michael Winter
    Aug 9, 2004
  5. SmittyBroham
    Replies:
    2
    Views:
    129
    SmittyBroham
    Jan 7, 2005
Loading...

Share This Page