最新。頭版

  • 本文永久連結: https://dwatow.github.io/2024/03-12-what-is-this-algorithm/
  • this 決策演算法 - 什麼是 this

    1. this 決策演算法
      1. 特別的 arrow function

    this 決策演算法

    所有 function 中的 this 都可以透過這個流程圖決定 this 是什麼。

    由這個圖

    this 是一種 runtime 才有的產物。

    特別的 arrow function

    arrow function 用 Function.prototype.bind 理解是最適合不過的了。
    arrow function 的 由宣告時 function scope 使用的 this 決定的。

    var obj = {
    arrow: () => console.log(this),
    fn: function() { console.log(this) },
    fnObj: new Function('console.log(this)'),
    fnObjBind: new Function('console.log(this)').bind(this),
    fnObjBindNull: new Function('"use strict"; console.log(this)').bind(undefined)
    }

    console.log('global obj.fn()', obj.fn())
    // {arrow: ƒ, fn: ƒ, fnObj: ƒ, fnObjBind: ƒ}

    console.log('global obj.fnObj()', obj.fnObj())
    // {arrow: ƒ, fn: ƒ, fnObj: ƒ, fnObjBind: ƒ}

    console.log('global obj.arrow()', obj.arrow())
    // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

    console.log('global obj.fnObjBind()', obj.fnObjBind())
    // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

    function AAA() {
    // 直接執行 this 還是 global,但是如果指定成其它的,就可以改變這裡的 this ≠ global
    var obj = {
    arrow: () => console.log(this),
    fn: function() { console.log(this) },
    fnObj: new Function('console.log(this)'),
    fnObjBind: new Function('console.log(this)').bind(this),
    fnObjBindNull: new Function('"use strict"; console.log(this)').bind(undefined)
    }
    console.log('AAA obj.fn()', obj.fn())
    {arrow: ƒ, fn: ƒ, fnObj: ƒ, fnObjBind: ƒ, fnObjBindNull: ƒ}
    console.log('AAA obj.fnObj()', obj.fnObj())
    #document (https://dwatow.github.io/)
    console.log('AAA obj.arrow()', obj.arrow())
    #document (https://dwatow.github.io/)
    console.log('AAA obj.fnObjBind()', obj.fnObjBind())
    undefined
    }

    const AAAdocument = AAA.bind(document) // 改變「呼叫 function 的 function scope 的」 this 指定成 document (隨決定的)
    AAAdocument();
  • tags:
  • { JavaScript }
  • { 你所不知道的JS }

標籤雲

.new framework 2018鐵人賽 API Doc Aglio Arduino Atom Block Boost Box Model C sharp CRUD CSS CSS Unit CSS3 C_and_Cpp Code Complete 2 Cpp沉思錄 Design Pattern Django ECMA-262 ECMAScript Flex Git HPX HTML Inline JavaScript Jenkins KnR2 LIFF LINE MFC controls MOPCON Media Query OAuth Position Pseudo-elements RWD Raspberry Pi 4 Render tree Rulest Order SVN Selector Sliverlight Specificity TC39 TDD TED TED特區 Transition Ubuntu Vendor Prefix WIN32 API/MFC XML XPath XSLT Xilinx angular1 angularjs animation api assertion async awk axios babel background bash blogger body bootstrap border bugTracker callback canvas chatbot cloud fonts component controller cpp css css-loader database design pattern display docker docsify e2e env eslint express facebook file api file-loader filter flex-grow flex-shrink fontawesome foreign key git git reset git-ftp gitalk google gulp hackmd heroku hexo http https husky import iview ivuew javascript jest jquery json keyframes linux login mariadb markdown mentor migration mixin mock model monent nginx ngork node-sass nodejs npm oo opacity orm outline pm2 postman prettier promise protractor proxy pure component python sequelize shell sign-in spy ssl stub sublime text2 swap swing dance test double transition unit test unit testing v-model vee-validate viewport visibility vue vue-cli vue-loader vue-masonry vue-router vue-slot vuex web camp webpack webpack loader which wiki zip zsh 七股宛蓁家兩天一夜 三相發電 中柱 人月神話 人機互動 你所不知道的JS 你所不知道的js 再讀一本書 凱宇皓月 動畫特效 十年之後成為大師 台南 和道服說話 圖解柔道之術 團隊溝通技巧 在道館的日子 好想工作室 字型設定 完美 camp 進化論 家家有本難唸的經 小旅行 工業風 影像處理 後搖臂 怦然心動的人生整理魔法 手把開關 抱怨VC6 招募 日舞台南 服三的日子 東岸軍旅 柔道社與我 流浪文章 測試工具 爛 code 收集器 爬蟲 版本控制 狼記事 生平處女秀之電腦裝機 生活小事 直流 CDI 看書 研究所的日子 社大的日子 社服社與我 系統設計 網誌記事 網頁前端技術 舊秋調 藝術 行列輸入法 設計 設計師的路 資料庫 資料庫正規則 踩發桿 追逐我在墾丁*天氣晴 避震器 重構 野狼 鈞祐的獨立山兩天一夜露營 電子DIY 電路 音響拆裝過程 高壓線圈 coil