this关键字

最新推荐文章于 2024-12-26 13:04:10 发布

原创最新推荐文章于 2024-12-26 13:04:10 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

文章标签：

#函数 #对象

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文通过多个实例解释了JavaScript中this关键字的使用方式及其指向变化。详细分析了不同上下文中this的具体含义，包括普通函数调用、对象方法调用及定时器等异步调用的情况。

关于this关键字 
作为小白的我只能说一句话:
                    谁调用函数,this就代指对应的对象

来!说再多不如咱们来看几个小例子:
 
    var name = "John";
       var Bob = {
        name: "Bob",
        showName: function() {
            console.log(this);
            alert(this.name);
        }
    };
    var Tom = {
        name: "Tom",
        showName: function() {
            var fun = Bob.showName;
            /*
            var fun = function() {
                alert(this.name)
            }
            */

            // 最终调用的fun，所以this指向的就是最终谁调用了fun
            // fun此时不属于任何对象调用，this默认指向了window
            fun();
        }
    };

    Tom.showName(); // John

    var name = "Bob";
    var nameObj = {
        name: "Tom",
        showName: function() {
            alert(this.name);
        },
        waitShowName: function() {
            // 此时的this：nameObj
            var that = this;

            // 最终调用了showName()函数，由that调用，that->this->nameObj
            setTimeout(nameObj.showName(), 1000); // Tom

            /*
            // 匿名函数自调用 this->window
            setTimeout(function() {
                alert(this.name); // Bob
            }, 1000);
            */
        }
    };

    nameObj.waitShowName();

    
    var username = 'lisi';

    function demo() {
        this.username = 'zhangsan';

        this.say = function() {
            return function() {
                alert(this.username);
            }
        }
    }

    var d = new demo();
    /*
        d.say:函数名
        d.say():函数调用之后，返回的还是一个函数  d.say():函数名
                d.say() = function(){
                    alert(this.username)
                }
        d.say()():继续调用函数
     */
    d.say()(); //lisi

    var fun = function() {
        alert(this.username);
    }
    window.fun(); // lisi

不知是否能给你带来帮助,欢迎点评…