Error: Object doesn't support this property or method

[lochru45]

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

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!

 

[optimistx]

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.

 

[Stevo]

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.

 

[optimistx]

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?

 

[Thomas 'PointedEars' Lahn]

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

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

 

[jdalton]

Try the MooTools user group:
http://groups.google.com/group/mootools-users

I don't see an issue with the code so far.
A larger snippet is needed to further debug your
issue.

Here is a snippet that tries to fill in some of
the gaps in your example code:
http://gist.github.com/6961

- JDD

 

[Richard Cornford]

optimistx wrote:

<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.