js this 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="btn" style="width:100px;height: 20px;background-color: #c3c3c3;">
        <span id="txtnum">0</span>
    </div>

    <!--
    一、函数作用域查找：看函数定义在哪个作用域下，与函数在哪执行无关
    二、this
        1、函数中this与它在哪执行的代码没有任何关系；2、若函数名前有点则this就是点前的对象 若没有就是window  
        3、自执行函数永远是window 4、给Dom绑定事件时 this就是该元素 5、类构造函数中this是当前类的实例
  -->
    <script type="text/javascript">
        var num = 12;

        function fun() {
            var num = 120;
            return function() {
                console.log(num);
            };
        };
        var f = fun();
        f(); //120
        ! function() {
            var num = 100;
            f(); //120
        }

        function fn() {
            var i = 10;
            return function(n) {
                console.log(n + (++i));
            }
        };
        var f = fn();
        f(10); //10+11
        f(20); //20+12
        fn()(10); //10+11
        fn()(20); //20+11
        function thsFun() {
            console.log(this)
        }
        thsFun(); //this->window
        //document.getElementById("div").onclick = thsFun; //this->div Dom
        //document.getElementById("div").onclick = function() {
        //    fn(); //this->window
        // }
        var obj = {
            fn: thsFun
        };
        obj.fn(); //this->obj
        function test() {
            thsFun();
        };
        test(); //this->window
        var oo = {
            sum: function() {
                console.log(this);
                thsFun();
            }
        };
        oo.sum(); //this->window
        var divbtn = document.getElementById("btn");
        var txtspan = document.getElementById("txtnum");
        divbtn.count = 0;
        divbtn.onclick = function() {
            // var count = parseInt(txtspan.innerHTML);
            // count++;
            txtspan.innerHTML = ++this.count;
        }
    </script>
</body>

</html>

 

posted @ 2020-12-14 09:54  howhy  阅读(70)  评论(0)    收藏  举报