美文网首页前端基础类学习
常问的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,真的了解?

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

  • 面试技巧

    人事经理常问的问题整理出来的面经面试:了解应聘者的工作能力(岗位匹配度)综合素质(企业文化) 人事经理常问的15个...

  • 面试常问

    跳槽时时刻刻都在发生,但是我建议大家跳槽之前,先想清楚为什么要跳槽。切不可跟风,看到同事一个个都走了,自己也盲目的...

  • 常问初心

    周末置身在一个很大的蔬菜市场中,菜品种繁多,每一种都新鲜惹人喜欢,很多新鲜的蔬菜,平常都没有见过,让你有一种很想尝...

  • 面试常问

    PV于UV的区别 如果web页面访问慢怎么办?如何解决? 在三次握手中出现大量time_wait状态,如何解决?查...

  • 常问写法

    1.深拷贝 2.柯里化

  • 北京2020相亲大会,2020年北京相亲会(北京近期相亲大会,时

    对于婚事大事,爸妈常唠叨,亲朋常相问!!!真的很烦恼...!心理特惆怅吧!不用担心......北京相亲会,每晚6:...

  • 面试必问的HashMap,你真的了解吗?

    前言 HashMap是Map中最为常用的一种,面试中也经常会被问到相关的问题。由于HashMap数据结构较为复杂,...

  • 面试必问的HashMap,你真的了解吗?

    前言 HashMap是Map中最为常用的一种,面试中也经常会被问到相关的问题。由于HashMap数据结构较为复杂,...

  • 面试必问的HashMap,你真的了解吗?

    前言 HashMap是Map中最为常用的一种,面试中也经常会被问到相关的问题。由于HashMap数据结构较为复杂,...

网友评论

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

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