08-this关键字

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>this关键字</title> 
 </head> 
 <body> 
  <div id="div1">
   有本事点我啊
  </div> 
  <script type="text/javascript">

        // 我们在js中主要研究的都是函数中的this
        // js 中的 this 代表的是 当前行为执行的主体; js中的context代表的是当前行为执行的环境(区域)
        // 例如: LDH 在沙县小吃吃蛋炒饼 ; this(LDH) , context(沙县小吃)
        // this 和 context 没有必然联系
        // this是谁和函数在哪定义的和在哪执行的都没有任何的关系

//        function 吃饭() {
//            this -> LDH
//        }
//        LDH.吃饭();
//
//        ~function () {
//            ldh.吃饭();
//        }();

        // this是谁和函数在哪定义的和在哪执行的都没有任何的关系:如何区分this呢?
        // 1.函数执行,首先看函数名之前是否有点 "." 有的话, "." 前边是谁,this就是谁;没有的话this就是Window
        // 2.自执行函数中的this永远都是window
        // 3.给元素的摸一个时间绑定方法,当事件触发的时候,执行对应的方法,方法中的this就是当前的元素

        // 例1
        function fn() {
            console.log(this);
        }
        var obj = {fn:fn};
        fn(); // this -> window
        obj.fn(); // this -> obj

        // 例2
        function sum() {
            // this -> window
            fn();  // this -> window
        }
        sum();

        // 例3
        var oo = {
            sum: function () {
                // this -> oo
                fn(); // this -> window
            }
        };
        oo.sum();

        // 例4
        document.getElementById("div1").onclick = fn(); // this 就是当前点击的这个元素#div1
        document.getElementById("div1").onclick = function () {
            // this -> #div1
            fn(); // this -> window
        }

    </script>  
 </body>
</html>
08-this关键字

推荐阅读更多精彩内容
