2019-11-19 js-函数的上下文

嗯...我真是太爱做笔记了.但是我写的字真的贼丑啊,这辈子可能都练不好了.所以,以后就在这里记录每天学的笔记啦.(呜呜我真的超爱纸笔写出来的感觉啊~)

(ps:我是看视频学习的,听的途中有些重要的会自己在本子上写下来,看完之后自己练习一遍,然后做笔记在这边总结)

函数的上下文

1.函数名+小括号的调用方式,函数上下文是window

            function fn() {
                console.log(this) //window
            }
            fn()

注意下面这种(是叫自调用函数吗忘记了)也是函数名+小括号的方式调用,所以上下文也是window,而不是obj:

           let obj = {
                label: '号码',
                id: 1,
                choose: (function() {
                    console.log(this) //window
                })()
            }

2.定时器和延时器里的回调函数,上下文是window

            setInterval(function() {
                console.log(this)  // window
            }, 1000)
            setTimeout(function() {
                console.log(this) // window
            }, 1000)

3.函数作为事件处理函数,上下文是触发这个事件的元素

            <div id="app">点我</div>

            let oDiv = document.getElementById("app")
            oDiv.onclick = function() {
                console.log(this) // <div id="app">点我</div>
            }

注意:

            let oDiv = document.getElementById("app")
            oDiv.onclick = function() {
                console.log(this) //  <div id="app">点我</div>
            // 在这里备份一下上下文
                let self = this
                setInterval(function() {
                    console.log(this) // window
                    console.log(self) // <div id="app">点我</div>
                },1000)
            }

4.函数作为对象的方法,谁最后打点调用了这个函数,上下文就指向谁

          let obj = {
               label: 1,
               method: function() {
                   console.log(this)
               }
           }
           let inner = obj.method
           obj.method() // obj
           inner() // window

注意下面的小栗子:

           let obj = {
                label: 1,
                method: function() {
                    console.log(this)
                },
            }
            let obj2 = {
                label: 2,
                method: obj.method
            }
            obj2.method() // obj2

5.函数作为数组的元素枚举出来执行,上下文就指向这个数组

           let arr= [1, 'aaa', function() {
                console.log(this)
            }, true]
            arr[2]() // [1, "aaa", ƒ, true](就是arr)

今天先到这儿啦,明天继续学习.要加油呀小朋友~