What was Douglas Crockford trying to convey with the term 'created in an alternate window or frame'?

Question

What was Douglas Crockford trying to convey with the term 'created in an alternate window or frame'?

What did Douglas Crockford mean when he mentioned that the is_array() test might not correctly identify arrays created in a different window or frame?

var is_array = function (value) {
    return value &&
        typeof value === 'object' &&
        value.constructor === Array;

How does the following code account for windows and frames when determining if a variable is an array?

var is_array = function (value) {
    return value &&
        typeof value === 'object' &&
        typeof value.length === 'number' &&
        typeof value.splice === 'function' &&
        !(value.propertyIsEnumerable('length'));
};

javascript arrays

Answer 1

Answer №1

Consider this scenario: If you have an iframe with its own window, any Array created within that context will not pass a different window's test. This is due to the assumption made by the last condition, which references the current window's Array object, not the one in the iframe.

var isArray = document.querySelector("iframe").contentWindow.Array === Array;
// false (incorrect, it actually is an array)

Check out this jsFiddle.

The alternative approach involves understanding that typeof categorizes an Array as an "object", and examining properties specific to Arrays.

However, this method can be deceived by creating an object that mimics an array.

var isArray = is_array(Object.create({length: 0, splice: function() {}}));
// true (not accurate, it's not truly an array)

Explore this jsFiddle.

Another technique involves utilizing Object's toString() method to retrieve the internal class.

var isArray = ({}).toString.call(value) == "[object Array]";
// true (correctly identifies it as an array)

View this jsFiddle.

This method is effective in a multi-window setup and cannot be easily fooled (though it may involve more processing, it is unlikely to cause performance issues).

Answer 2

Consider this scenario: If you have an iframe with its own window, any Array created within that context will not pass a different window's test. This is due to the assumption made by the last condition, which references the current window's Array object, not the one in the iframe.

var isArray = document.querySelector("iframe").contentWindow.Array === Array;
// false (incorrect, it actually is an array)

Check out this jsFiddle.

The alternative approach involves understanding that typeof categorizes an Array as an "object", and examining properties specific to Arrays.

However, this method can be deceived by creating an object that mimics an array.

var isArray = is_array(Object.create({length: 0, splice: function() {}}));
// true (not accurate, it's not truly an array)

Explore this jsFiddle.

Another technique involves utilizing Object's toString() method to retrieve the internal class.

var isArray = ({}).toString.call(value) == "[object Array]";
// true (correctly identifies it as an array)

View this jsFiddle.

This method is effective in a multi-window setup and cannot be easily fooled (though it may involve more processing, it is unlikely to cause performance issues).

Answer 3

Answer №2

In my opinion, Alex's approach outshines Crockford's. This response aims to highlight the flaw in Crockford's methodology.

Consider the following:

I intentionally crafted a defective object.

function Silly(){}
Silly.prototype.length = 0;
Silly.prototype.splice = function () {}

var silly = new Silly();

is_array(silly);
// true

Clearly, if you encounter someone assigning length to the prototype, feel free to express your frustration.

However, this is acceptable:

function Average(){
    Object.defineProperty(this, 'length', {
        get: function () { return 42; }, 
        enumerable: false
    });
}
Average.prototype.splice = function () {}

var a = new Average();

is_array(a);
// true

Therefore, it is best not to attempt to outsmart common practices, as you cannot predict what other developers might do.

Answer 4

In my opinion, Alex's approach outshines Crockford's. This response aims to highlight the flaw in Crockford's methodology.

Consider the following:

I intentionally crafted a defective object.

function Silly(){}
Silly.prototype.length = 0;
Silly.prototype.splice = function () {}

var silly = new Silly();

is_array(silly);
// true

Clearly, if you encounter someone assigning length to the prototype, feel free to express your frustration.

However, this is acceptable:

function Average(){
    Object.defineProperty(this, 'length', {
        get: function () { return 42; }, 
        enumerable: false
    });
}
Average.prototype.splice = function () {}

var a = new Average();

is_array(a);
// true

Therefore, it is best not to attempt to outsmart common practices, as you cannot predict what other developers might do.

What was Douglas Crockford trying to convey with the term 'created in an alternate window or frame'?

Answer №1

Answer №2

Similar questions

The property 'body' cannot be read because it is undefined

A guide on identifying the data type of a value entered into an HTML table using JavaScript

Not adhering to directive scope when transclusion is used, despite explicit instructions to do so

What is the best way to assign three different dates in my protractor test?

How can we efficiently load and display all images from a directory using Node.js and JavaScript?

Getting props value in parent component using Vue JS

Converting a String into an Array using JSON

What is the best way to add a simple Search bar to the Material UI Data Grid component?

How can server convert the data from Websocket 8.5, which sends `<Buffer>`, into JSON format?

Exploring new options to deduct time from Kendo UI timepickers without relying on Javascript

Is it possible to assign a class to the initial word within a designated class?

The qTip comment box vanishes when focused on by IE/Edge browsers using touch devices

Display information in a detailed table row using JSON formatting

What is preventing the audio from playing in Safari?

Struggling to display AJAX GET results on my webpage, although they are visible in the Google Element Inspector

Determine whether there is text present on a webpage using JavaScript

Detecting the absence of an object

The console is showing messages before the task is completed

Improving efficiency for handling a vast number of inputs in React applications

Managing toggles for save and edit buttons in Vue - a comprehensive guide