前端基础类学习

常问的this,真的了解?

2017-10-31  本文已影响16人  饥人谷_米弥轮

this的作用

全局作用域中的this

this公理

函数被赋值于变量时的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遇到一些“特殊”的函数时的问题

上一篇下一篇

猜你喜欢

热点阅读