{"id":17274167,"url":"https://github.com/davidthorn/lexical-this","last_synced_at":"2026-01-06T07:37:04.704Z","repository":{"id":122657902,"uuid":"162054465","full_name":"davidthorn/lexical-this","owner":"davidthorn","description":"A project which describes lexical this in javascript showing examples of when this is undefined and how you can bind this from other objects.","archived":false,"fork":false,"pushed_at":"2018-12-17T01:03:31.000Z","size":2341,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T14:47:48.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidthorn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-17T00:36:09.000Z","updated_at":"2018-12-17T01:03:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"c5eabf2c-42b5-4592-a2d8-504f21cc126c","html_url":"https://github.com/davidthorn/lexical-this","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Flexical-this","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Flexical-this/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Flexical-this/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Flexical-this/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidthorn","download_url":"https://codeload.github.com/davidthorn/lexical-this/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245661475,"owners_count":20651873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T08:53:16.538Z","updated_at":"2026-01-06T07:37:04.676Z","avatar_url":"https://github.com/davidthorn.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lexical this in Javascript\n\nSo without getting technical at all, I am going to try and demonstrate what lexical this is using javascript.\n\nBasically to show you when `this`is defined and when it is `undefined` and also to what it is defined to.\n\nSo lets start:\n\n## Example 1\n\n### Anonymous function\n\nIf we define an Anonymous function and then call it normally without using the `new` so as to create an object you will be provided with the following results.\n\n```javascript\nconst anon_function = function() {\n\n    /// Local\n    /// Return value: true\n    /// this: undefined\n    /// is_undefined: true\n\n    const is_undefined = this === undefined\n    return is_undefined\n}\n\nconst anon_function_result = anon_function()  // true\nconsole.log(\"this used within Anonymous function: \" , anon_function_result)\n/// this used within Anonymous function: true\n```\n![alt text](./screen_shots/example_1.png)\n\n## Example 2\n\n### Anonymous function called with `new` keyword\n ```javascript\nconst anon_function = function() {\n\n    /// Local\n    /// Return value: anon_function{ }\n    /// this: anon_function\n    /// is_undefined: false\n\n    const is_undefined = this === undefined\n    return is_undefined\n}\n\nconst anon_function_object_result = new anon_function()\nconsole.log('this used with an object' , anon_function_object_result )\n/// this used with an object\n/// anon_function {}\n```\n\n![alt text](./screen_shots/example_2.png)\n\n## Example 3\n\n### This in an arrow function within an Object\n\n```javascript\nconst an_object = {\n    name: \"an_object\",\n    arrow_function : () =\u003e {\n\n        /// Local\n        /// this: Object\n        /// is_undefined: false\n        /// name_is_undefined: true\n\n        const is_undefined = this === undefined\n        const name_is_undefined = this.name === undefined\n    }\n\n}\n\nconst anon_object_result = an_object.arrow_function()\nconsole.log('result is: ' , anon_object_result)\n```\n![alt text](./screen_shots/example_3.png)\n\n## Example 4\n\n### This in an anonymous function within an object\n\n```javascript\nconst anon_object = {\n    \n    name: \"an_object\",\n    anon_function : function() {\n\n        /// Local\n        /// this: Object\n        /// Return value: undefined\n        /// is_undefined: false\n        /// local_name: \"an_object\"\n        /// name_is_undefined: false\n\n        const is_undefined = this === undefined\n        const name_is_undefined = this.name === undefined\n        const local_name = this.name\n    }\n\n}\n\nconst anon_object_result = anon_object.anon_function()\nconsole.log('result is: ' , anon_object_result)\n```\n![alt text](./screen_shots/example_4.png)\n\n## Example 5\n\n### This used within a class method\n\n```javascript\nclass ArrowClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method() {\n\n        /// Local\n        /// Return value: undefined\n        /// this: ArrowClass\n        /// is_undefined: false\n        /// local_name: \"an_object\"\n        /// name_is_undefined: false\n\n        const is_undefined = this === undefined\n        const name_is_undefined = this.name === undefined\n        const local_name = this.name \n    }\n\n}\n\nlet arrow_class = new ArrowClass()\nconsole.log('method result is: ', arrow_class.method())\n```\n\n![alt text](./screen_shots/example_5.png)\n\n## Example 6\n\n### This used within an arrow function passed to a high order method of a class\n\n```javascript\nclass AsyncClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method(callback) {\n        \n        /// Local\n        /// Return value: undefined\n        /// this: ArrowClass\n        /// is_undefined: false\n        /// local_name: \"an_object\"\n        /// name_is_undefined: false\n\n        const is_undefined = this === undefined\n        const name_is_undefined = this.name === undefined\n        const local_name = this.name \n        callback()\n    }\n\n}\n\nlet async_class = new AsyncClass()\nasync_class.method(() =\u003e {\n\n    /// Local\n    /// Return value: undefined\n    /// this: global\n    /// is_undefined: false\n    /// local_name: undefined\n    /// name_is_undefined: true\n\n    const is_undefined = this === undefined\n    const name_is_undefined = this.name === undefined\n    const local_name = this.name \n\n})\n```\n\n![alt text](./screen_shots/example_6.png)\n\n\n## Example 7\n\n### This used within an anonymous function passed to a high order function of a class method\n\n```javascript\nclass AsyncClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method(callback) {\n\n        const is_undefined = this === undefined\n        const name_is_undefined = this.name === undefined\n        const local_name = this.name \n        callback()\n    }\n\n}\n\nlet async_class = new AsyncClass()\nasync_class.method(function (){\n\n    /// Local\n    /// Return value: undefined\n    /// this: global\n    /// is_undefined: true\n    /// local_name: undefined\n\n    const is_undefined = this === undefined\n\n    const local_name = this.name\n\n})\n```\n\n![alt text](./screen_shots/example_7.png)\n\n## Example 8\n\n### Binding this to a function using bind\n\n```javascript\nclass AsyncClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method(callback) {\n\n        const is_undefined = this === undefined\n        const name_is_undefined = this.name === undefined\n        const local_name = this.name \n        callback()\n    }\n\n}\n\nconst binded_anon_function = function() {\n    \n    /// Local\n    /// Return value: undefined\n    /// this: AsyncClass\n    /// is_undefined: false\n    /// local_name: \"an_object\"\n    /// name_is_undefined: false\n\n    const is_undefined = this === undefined\n    const name_is_undefined = this.name === undefined\n    const local_name = this.name \n\n}\n\nlet async_class = new AsyncClass()\nconst bound_async_class_function = binded_anon_function.bind(async_class)\n\nasync_class.method(bound_async_class_function)\n``` \n\n![alt text](./screen_shots/example_8.png)\n\n## Example 9\n\n### Using this within an arrow function within a class method\n\n``` javascript\nclass AsyncClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method() {\n       \n        /// Local\n        /// this: AysncClass\n        /// scope_is_undefined: false\n        /// scope_local_name: \"an_object\"\n        /// scope_name_is_undefined: false\n\n        const scope_is_undefined = this === undefined\n        const scope_name_is_undefined = this.name === undefined\n        const scope_local_name = this.name \n\n        return new Promise((resolve , reject) =\u003e {\n            \n            /// Local \n            /// this: undefined\n            /// is_undefined: false\n            /// local_name: \"an_object\"\n            /// name_is_undefined: false\n\n            const is_undefined = this === undefined\n            const name_is_undefined = this.name === undefined\n            const local_name = this.name \n            resolve(true)\n        })\n\n    }\n\n}\n\nconst object = new AsyncClass()\nobject.method().then(() =\u003e {\n    console.log('promise called')\n})\n```\n\n![alt text](./screen_shots/example_9.png)\n\n\n## Example 10\n\n### Using this within an anonymous function within a class method\n\n```javascript\nclass AsyncClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method() {\n       \n        /// Local\n        /// this: AysncClass\n        /// scope_is_undefined: false\n        /// scope_local_name: \"an_object\"\n        /// scope_name_is_undefined: false\n\n        const scope_is_undefined = this === undefined\n        const scope_name_is_undefined = this.name === undefined\n        const scope_local_name = this.name \n\n        return new Promise(function(resolve, reject){\n            \n            /// Local \n            /// this: undefined\n            /// is_undefined: false\n            \n            const is_undefined = this === undefined\n\n            /// Cannot read property of 'name' of undefined\n            //const name_is_undefined = this.name === undefined\n            resolve(true)\n        })\n\n    }\n\n}\n\nconst object = new AsyncClass()\nobject.method().then(() =\u003e {\n    console.log('promise called')\n})\n```\n\n![alt text](./screen_shots/example_11.png)\n\n## Example 11\n\n### Using this within a binded anonymous function within a class method\n\n```javascript\nclass AsyncClass {\n\n    constructor() {\n        this.name = \"an_object\"\n    }\n\n    method() {\n       \n        /// Local\n        /// this: AysncClass\n        /// scope_is_undefined: false\n        /// scope_local_name: \"an_object\"\n        /// scope_name_is_undefined: false\n\n        const scope_is_undefined = this === undefined\n        const scope_name_is_undefined = this.name === undefined\n        const scope_local_name = this.name \n\n        const promise = function(resolve, reject) {\n            \n            /// Local\n            /// this: AsyncClass\n            /// is_undefined: false\n            /// local_name: \"an_object\"\n            /// name_is_undefined: false\n            \n            const is_undefined = this === undefined\n            const local_name = this.name\n            const name_is_undefined = this.name === undefined\n            resolve(true)\n        }\n\n        return new Promise(promise.bind(this))\n\n    }\n\n}\n\nconst object = new AsyncClass()\nobject.method().then(() =\u003e {\n    console.log('promise called')\n})\n\n```\n\n![alt text](./screen_shots/example_11.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidthorn%2Flexical-this","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidthorn%2Flexical-this","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidthorn%2Flexical-this/lists"}