Why I can not access global array inside a object but inside in a prototype in javascript?

Question

Why I can not access the global array object inside my b() function which is inside a object? But I can access it from the prototype. What is the problem?

let

    root = window || this || globalThis;


/**
 * 
 * @run
 */

(function (global, factory) {

    /**
     * 
     * @check
     * if the factory is a function the run it
     */
    if (typeof factory === 'function' && typeof global.__run === 'undefined')
        global.__run = factory();

}(root, function () {

    /**
     * 
     * @initialize
     */

    let version = '2.0.0';

    let arr = []; //global array....

    let obj = {};

    let isFunction = function (arg) {
        return typeof arg === 'function';
    }

    let isString = function (arg) {
        return typeof arg === 'string';
    }

    let isBoolean = function (arg) {
        return typeof arg === 'boolean';
    }


    /***
     * 
     * @expression
     */
    let

        __run = function (selector) {
            return new __run.init(selector);
        }

    /**
     * 
     * @extend
     */

    let
        init = __run.init = function (selector) {
            arr = [selector];
            return this;
        };

    __run.fn = init.prototype = __run.prototype;

    __run.extend = function (arg) {
        if (!arg instanceof Object)
            return false;

        for (key in arg) {
            __run.fn[key] = function () {};
        }
    }

    __run.fn.a = function () {
        return arr //return array, success
    }

    /***
     * 
     * @DOM
     * DOM manupulation.
     */

    let
        DOM = {
            b: function () {
                return arr //return undefined, error why?
            }
        }

    __run.extend(DOM);


    return __run;

}));

console.log(__run('h1').a()) //return array success
console.log(__run('h1').b()) //return undefined

Answer 1

In your extend function, you're assigning the new entry in __run.fn to an empty function, and the default return value for a function is undefined. That is, it's not that the function can't access the global variable, rather the function is empty and not returning anything. Change

__run.fn[key] = function () {};

to

__run.fn[key] = arg[key];

in extend and it should work.

Answer 2

Your Problem is here:

    for (key in arg) {
        __run.fn[key] = function(){}; // Here, you are basically assigning a new function
    }

You must assign the function from the object to __run.fn[key] = arg[key] and it will work. arg[key] is the function expression that has access to arr.

b: function () 
{
  return arr; 
}

Run the fiddle below.

let

    root = window || this || globalThis;


/**
 * 
 * @run
 */

(function (global, factory) {

    /**
     * 
     * @check
     * if the factory is a function the run it
     */
    if (typeof factory === 'function' && typeof global.__run === 'undefined')
        global.__run = factory();

}(root, function () {

    /**
     * 
     * @initialize
     */

    let version = '2.0.0';

    let arr = []; //global array....

    let obj = {};

    let isFunction = function (arg) {
        return typeof arg === 'function';
    }

    let isString = function (arg) {
        return typeof arg === 'string';
    }

    let isBoolean = function (arg) {
        return typeof arg === 'boolean';
    }


    /***
     * 
     * @expression
     */
    let

        __run = function (selector) {
            return new __run.init(selector);
        }

    /**
     * 
     * @extend
     */

    let
        init = __run.init = function (selector) {
            arr = [selector];
            return this;
        };

    __run.fn = init.prototype = __run.prototype;

    __run.extend = function (arg) {
        if (!arg instanceof Object)
            return false;

        for (key in arg) {
            __run.fn[key] = arg[key];
        }
    }

    __run.fn.a = function () {
        return arr //return array, success
    }

    /***
     * 
     * @DOM
     * DOM manupulation.
     */

    let DOM = {
            b: function () 
            {
                return arr; //Yay, Now it works
            }
        }

    __run.extend(DOM);


    return __run;

}));

console.log(__run('h1').a()) //return array success
console.log(__run('h1').b()) //return undefined