美文网首页前端基础类学习
常问的this,真的了解?

常问的this,真的了解?

作者: 饥人谷_米弥轮 | 来源:发表于2017-10-31 03:37 被阅读16次

    this的作用

    • 当对象没有声明,或者不清楚其变量时,想要调用它,就会使用到this对象
      • 案例
        • 遍历DOM对象,绑定事件,调用当前点击的对象的函数

    全局作用域中的this

    • 全局变量和对象都在window对象上定义,所以所有的全局变量和对象的this都属于window对象

    this公理

    • this关键字永远都指向函数(方法)的所有者

       <script>
       var name = "小明";
       var job = "电焊工";
      
       function say() {
           alert(this.name + "是一名" + this.job);
       }
      
       var it = {
           //name:"杰西",
           //job:"就职于W3Cfuns.com的前端开发工程师",
           say: function () {
               alert(this.name + "是一名" + this.job);
           }
       };
       /*say();
       window.say();
       this.say();*/
       it.say();
       //window.it.say();
       //this.it.say();
       //console.log(window);
       </script>
      

    函数被赋值于变量时的this问题

    <script type="text/javascript">
        var info = ["W3Cfuns", "QQ", "Sina", "SouHu", "YouKu", "TuDou"];
        var it = {
            info: ["前端开发网", "腾讯", "新浪", "搜狐", "优酷", "土豆"],
            getinfo: function () {
                alert(this.info.join(","));
            }
        };
    
        //it.getinfo();
                
        var data = it.getinfo;  //相当于将function(){}赋值给data,根据this公理,data是属于window的方法,所以this为window
        data();    //this为window
    
        var data2 = function () {
            alert(this.info.join(","));
        };
        data2();  //data和data2原理是一样的
    </script>
    

    作为对象方法的调用时的 this问题

    <script type="text/javascript">
        function test() {
            alert(this.x);
        }
    
        var test = function()
        {
            alert(this.x);
        };
    
        test();
        var o = {};
        o.x = 1;
        o.t = test;
        o.t();  //this为o
    
    </script>
    

    作为构造函数调用时的this问题

    <script type="text/javascript">
        var x = 2;
    
        function test() {
            this.x = 1;
        }
    
        test(); //1
        alert(x);   //1
    
        var o = new test(); //当new一个构造函数时会将this指向变量
        alert(o.x); //1
        alert(x); //2
    </script>
    

    解决,闭包中的this指向问题

    <script type="text/javascript">
        var asdfasdf = {
            info: ["前端开发网", "腾讯", "新浪", "搜狐", "优酷", "土豆"],
            getinfo: function () {
                console.log(this);
                console.log(this.info);
                // var _this = this;
    
                function abc() {
                    console.log(this);  //window
                    console.log(this.info);  //undefinde
                    // console.log(_this);
                    // console.log(_this.info);
                };
                abc();  //this指向window
            }
        };
        asdfasdf.getinfo(); //当调用这个方法时,其实相当于把abc这个函数释放出来其所有者归属于window.abc()
    
        /** 
        *   ps:想让闭包函数里的this指向当前变量的方法有两种
        *           1.将this替换为当前变量名,但是这种方法弊端很大,如果变量修改,全部都要进行改变
        *           2.在闭包函数外层重新赋值this给一个新的变量,用这个新的变量替代闭包中的this
        */
        
    </script>
    

    this遇到一些“特殊”的函数时的问题

    • call、apply、bind的运用

    相关文章

      网友评论

        本文标题:常问的this,真的了解?

        本文链接:https://www.haomeiwen.com/subject/utjjpxtx.html