Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14579 > unrolled thread

Function Objects

Back to article view | Back to comp.lang.javascript

Contents

  Function Objects Gene Wirchenko <genew@ocis.net> - 2012-06-19 16:35 -0700
    Re: Function Objects Stefan Weiss <krewecherl@gmail.com> - 2012-06-20 02:09 +0200
      Re: Function Objects Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-06-20 15:43 +0200
      Re: Function Objects Stefan Weiss <krewecherl@gmail.com> - 2012-06-20 17:29 +0200

#14579 — Function Objects

Dear JavaScripters:

     In each case, the code is the in the head of the page.

     I can code

var Output;
Output=alert;
Output("This is the output.");

and see the expected alert box.

    I can code

var Output;
Output=document.write;
Output("This is the output.");

but I do not get the output.  I get an error of "Error: Invalid
calling object".

    I can code

var Output;
Output=document;
Output.write("This is the output.");

and see an output line in the body.

     Why is the second example above wrong?  I am using IE 9 on
Windows 7.

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#14580

On 2012-06-20 01:35, Gene Wirchenko wrote:
>     I can code
> 
> var Output;
> Output=document.write;
> Output("This is the output.");
> 
> but I do not get the output.  I get an error of "Error: Invalid
> calling object".

In your example, Output is assigned a reference to the document object's
write method - just the method, not the object. The fact that write
originally "belonged" to document is now lost.

You can still get the same result if you restore that connection:

  Output.call(document, "This is the output.");

(Tested in Firefox and Chrome, but not in IE. document is a host object,
so the usual warnings apply.)

The effect may be easier to understand if you use a simpler
self-contained example without host objects:

    var dog = {
        noise: "wow!",
        bark: function () { alert(this.noise); }
    };

    dog.bark();  // "wow!"

    var alias = dog.bark;

    alias();  // "undefined"

The last line yields "undefined" because |this| in the function body now
refers to the global object, which has no "noise" property.

- stefan

[toc] | [prev] | [next] | [standalone]

#14587

Stefan Weiss wrote:

> The effect may be easier to understand if you use a simpler
> self-contained example without host objects:
> 
>     var dog = {
>         noise: "wow!",
>         bark: function () { alert(this.noise); }
>     };
> 
>     dog.bark();  // "wow!"
> 
>     var alias = dog.bark;
> 
>     alias();  // "undefined"
> 
> The last line yields "undefined" because |this| in the function body now
> refers to the global object, which has no "noise" property.

Evaluation of `this.noise' throws a TypeError exception in strict mode when 
alias() is called, because `this' would be `undefined' then, and `undefined' 
by definition has no properties.

The strict mode of ECMAScript (introduced in Edition 5 [1]) is particularly 
useful if you want to avoid accessing the global object, but it is neither 
correctly implemented in otherwise conforming implementations yet nor 
available in all implementations at all.  However, if you `"use strict";' 
mode, and test your code with a sufficiently conforming implementation (like 
Google V8 3.7.12.12 in Chrome 17.0.963.78¹), a lot of common programming 
mistakes can be avoided.


PointedEars
___________
¹ This feature and tests thereof are contained in the next version of the
  ECMAScript Support Matrix that I am preparing.

[1] <http://ecma-international.org/ecma-262/5.1/#sec-C>
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]

#14591

On 2012-06-20 02:09, Stefan Weiss wrote:
>     var dog = {
>         noise: "wow!",
>         bark: function () { alert(this.noise); }
>     };
> 
>     dog.bark();  // "wow!"
> 
>     var alias = dog.bark;
> 
>     alias();  // "undefined"

I should have mentioned that there is more than one way to (re-)connect
the bark() function with the dog object:

    alias.call(dog);   // "wow!"
    alias.apply(dog);  // "wow!"

    var alias2 = dog.bark.bind(dog);
    alias2();  // "wow!"

The difference between call() and apply() is the way parameters are
passed to the function; since bark() has no parameters, they look the
same in this example.
Function.prototype.bind is not available in older browsers, but can be
retro-fitted (with some caveats).

- stefan

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web