• JavaScript中的this对象指向理解


    在JavaScript中,this不是固定不变的,它的指向取决于上下文环境,一般的,认为this指向使用它时所在的对象。主要有以下几类指向:

    • 在方法中,this 表示该方法所属的对象。
    • 如果单独使用,this 表示全局对象。
    • 在函数中,this 表示全局对象。
    • 在函数中,在严格模式下,this 是未定义的(undefined)。
    • 在事件中,this 表示接收事件的元素。
    • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

    一、方法中的this

    var isObject = {
        a: 'inner object',
        innerFunction: function() {
            return this.a;
        }
    }
    console.log('方法里的this指向:', isObject.innerFunction());
    //输出结果:方法里的this指向: inner object
    

    由上面代码可以看出,因为对象调用了其内部方法innerFunction(),所以此时this指向使用它时所在的对象,即isObject对象。

    如果我们此时在innerFunction()函数里return this,此时控制台打印出Object {a: "inner object", innerFunction: },表示this正好指向isObject对象。

    二、单独使用this

    var x = this;
    console.log("this指向:", x);
    //输出结果:this指向: Window {postMessage: , blur: , focus: , close: , parent: Window, …}
    

    可以看出,当单独使用this时,this指向window对象

    三、函数中使用this

    var variable = 'test';
    
     function outerFunction() {
         var variable = 0;
         return this.variable;
     }
    
     console.log('函数中this指向:', outerFunction());
     //输出结果:函数中this指向:test
    

    从上面代码看出,函数中的this指向window对象,所以打印出的结果是test而不是0。

    如果我们此时在outerFunction()函数里return this,此时控制台打印出Window {postMessage: , blur: , focus: , close: , parent: Window, …},表示this指向window对象。

    值的注意的一点是在严格模式中,函数并不能绑定到this上,所以这时候的this是undefined。

    再来看一个例子:

    var a = 21; 
    var isObject = {
        a: 'inner object',
        innerFunction: function() {
            return this.a;
        }
    }
    var useObject = isObject.innerFunction;
    console.log('结果:', useObject());
    //输出结果:结果:21
    

    可能有人会问,为什么输出的不是inner object,而是21,注意,this指向的是使用它时所在的对象,因为isObject.innerFunction将自身赋给全局变量useObject,所以此时useObject保存的是innerFunction()方法,this指向全局。

    四、事件中的this

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    
    <button onclick="this.style.display='none'">点我我就消失</button>
    
    </body>
    </html>
    

    很显然,在HTML事件句柄中,this指向了接收事件的HTML元素。

    五、箭头函数中的this

    需要注意的是,箭头函数内部并没有绑定this的机制,所以this的指向是固定的,即指向当前定义时所在的对象(注意,一般情况下,上下文环境不做变化,this为全局对象,即this定义在顶层环境)。也可以说,内部的this就是外层代码块的this。

    var isObject = {
            a: 'hhh',
            functions: () => {
                console.log("对象:",this);
            }
        }
    isObject.functions();
    //输出结果:对象:Window {postMessage: , blur: , focus: , close: , parent: Window, …}
    

    可以看到,同样是对象方法,箭头函数里的this指向的是window对象。

    再来看一个例子:

    var isObject = {
            a: 'hhh',
            functions: () => {
                this.a = 0
                console.log("结果:",this.a);
            }
        }
    isObject.functions();
    //输出结果:结果:0
    

    此时,在isObject对象functions方法内部定义了一个属性a,它属于this全局对象,所以输出结果为0。

    难道this只能指向window了吗?答案是否定的,再来看一个例子:

    function myFunction() {
         var innerfunction = () => {
            console.log('x:', this.x);
         }
         return innerfunction;
     }
    
    var test = myFunction.call({x: 1});
    
    test();
    //输出结果:1
    

    从上面代码可以看出,this此时指向myFunction里的对象{x:1},所以打印出的结果为1。注意,因为箭头函数本身并不能绑定this,所以它不能使用apply,call,bind方法来改变上下文环境。

  • 相关阅读:
    [转载] 关于mkvtoolnix批量处理的
    转载:JMeter压力测试入门教程[图文]
    分享 stormzhang的Andoid学习之路
    Sublime Text 2 插件
    PHP 操作SQLite
    curl 远程下载图片
    centos lamp 配置
    php 例子 如何转换ISO8601为 utc时间
    php 常用 常量集合
    php 文档操作
  • 原文地址:https://www.cnblogs.com/ktddcn/p/12099099.html
Copyright © 2020-2023  润新知