Question

Being curious why the following code gives such a “strange” results:

var f = function() {}
$.extend(f, Object.freeze({foo1:"bar1"}));

Typing in Chrome (kindly see an update – it’s in Chromium, not Chrome from here and below) console:

> f.foo1

The result in Chrome console is:

> undefined

Furthermore, trying the following:

$.extend(f, {foo2:Object.freeze([1,2,3])});

Typing in Chrome console:

> f.foo2

The result is even stranger:

> function Object() { [native code] }

What am I doing wrong? Why using Object.freeze() has those implications?

Update: Not in Chrome, but in Chromium 18 (the latest on Ubuntu at the moment of writing). I guess this is an implementation bug. Accepting the only answer, though the effect can still be reproduced on my browser.

Answer 1

I think this works not like you described:have a look at the jsfiddle here

It implements your code like this:

var f = function() {}
$.extend(f, Object.freeze({
  foo1: "bar1"
}));

$.extend(f, {
  foo2: Object.freeze([1, 2, 3])
});

$(document).ready(function() {
  document.getElementById('div').innerHTML = f.foo1.toString() + '<br/>' + f.foo2.toString()
});​

Object freeze does not prevent attributes and functions being added to your function f. It just freezes the object you actually freeze. jQuery’s extend takes the first argument and extends it with the properties of the second, so the frozen objects in your case will not be touched.