美文网首页
JavaScript关于this的4种使用情况

JavaScript关于this的4种使用情况

作者: 阿尔卑斯的隆冬 | 来源:发表于2018-09-08 15:47 被阅读20次

    在函数中使用this对象,在不同的情况下会引用不同的对象;而这一切都是由于调用函数的方式不同造成的。归根结底,包含this的函数调用方式不外乎以下4种情况:

    1. 作为某个对象的方法调用

    当函数作为某个对象的方法被调用时,其内部的this将指向对象本身

    function test() {
        alert(this.name);
    }
    
    var object = {
        name : "Jess",
    
        getName : test
    };
    
    object.getName();      //"Jess"
    

    2. 作为普通函数调用

    当函数作为普通的函数调用时,其内部的this指向全局作用域(window)

    function test() {
        var name = "Jess";
        alert(this.name);
    }
    
    var name = "Alex";
    test();            //"Alex"
    

    再来看一些更加特殊的情况:

    case 1 :

    function test1() {
        var name = "Jess";
        test2();
    }
    
    function test2() {
        var name = "Alex";
        alert(this.name);
    }
    
    var name = "Jade";
    test1();        //"Jade"
    

    case 2 :

    function test() {
        alert(this.name);
    }
    
    var object = {
        name : "Casey",
    
        getName : function() {
            test();
        }
    };
    
    var name = "Max";
    
    object.getName();        //"Max"
    

    case 3 :

    var object = {
        name : "Casey",
    
        getName : function() {
            alert(this.name);
        }
    };
    
    
    var name = "Max"; 
    
    object.getName();          //"Casey"    
    
    var test = object.getName;
    test();                    //"Max"
    

    以上都是包含this的函数作为普通函数进行调用的情况,可见其内部的this都指向了全局作用域(window)。不过需要注意最后一种情况(case 3),其中在object对象内部定义了一个匿名函数对象,并使用object.getName对其进行引用;当执行object.getName()语句时,是将该函数按对象的方法进行调用,此时内部的this指向object对象;然而随后的var test = object.getName语句使得该函数对象同时也被test变量引用;当执行test()时,实际上是将该函数按普通函数进行调用。

    3. 作为构造函数调用

    当函数作为构造函数被调用时,其内部的this指向由构造函数创建出的新对象

    function Person() {
        this.name = "Jess";
    }
    
    var name = "Alex";
    var person1 = new Person();
    alert(person1.name);          //"Jess"
    alert(name);                  //"Alex"
    

    4. 在apply()/call()下调用

    当函数通过apply()/call()函数进行调用时,其内部this的指向apply()/call()函数显式指定

    function test() {
        this.name = "Jess";
    }
    
    var object = {};
    test.call(object);
    alert(name);            //""
    alert(object.name);     //"Jess"
    

    相关文章

      网友评论

          本文标题:JavaScript关于this的4种使用情况

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