解析javascript关键字this

IMWeb前端团队

发布于 2019-12-04 13:29:13

3220

发布于 2019-12-04 13:29:13

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb json 原文出处：IMWeb社区 未经同意，禁止转载

this是javascript语言的一个关键字。它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。下面我们将按照调用方式的不同，分别讨论 this 的含义。

作为普通函数调用

    function test() {　　　　
        this.x = 1;　　　　
        alert(this.x);　　
    }

    test(); // 1

对于这个函数, this关键字指向谁呢?我们知道定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.因此我们可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.

查看window对象的test属性：

    function test() {　　　　
        this.x = 1;　　　　
        alert(this.x);　　
    }

    console.log(window.test);

/*
    结果：
    function test() {　　　　
        this.x = 1;　　　　
        alert(this.x);　　
    }
*/

事件处理函数

在事件处理函数中this的指向，经常让我们疑惑，下面来看看

如下：点击输入框，显示输入框的内容

    // html
    <input id="name" type="text"   value="test" />

    //js
    function test() {
         alert(this.value);
    }
    document.getElementById('name').onclick = test;

以上代码可以正确获取到输入框的值，但有个问题，这里的test函数是定义在全局作用域下的，this应该是指向window才对，为什么可以成功获取dom的值呢？

问题出在onclick事件绑定的时候，在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.

    function test () {
        alert(this.value);
        }

        document.getElementById('name').onclick = test ;
        alert(document.getElementById('name').onclick);
        /**
        * 输出
        * function test () {
        * alert(this.value);
    * }
*/

由以上可知，当事件触发的时候, 就会去调用Dom对象的onclick方法，此时this指向输入框。

如果事件写在html里呢？

    function test() {
         alert(this.value);
    }

    <input id="name" type="text"  value="test"  onclick="test()"/>

此时是获取不到输入框的值的，因为此时不是给onclick赋值，而是引用

    //  输出dom的onclick
    alert(document.getElementById('name').onclick);

所以这里的this指向全局对象window.

作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

    function test(){
　　　　alert(this.x);
　　}
　　var object = {};
　　object.x = 1;
　　object.m = test;
　　object.m(); // 1

作为构造函数调用

通过构造函数可以生成一个新对象，this就指向这个新对象。

    function test(){
　　　　this.x = 1;
　　}

　　var object = new test();
　　alert(object.x);  // 1

改变this的指向——apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，切换函数执行的上下文环境（context），即 this 绑定的对象

var object = {
     name : 'hello world',
     age  : 26
};

function test() {
     alert(this.name);
}

test.call(object);
//  hello world

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016-03-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

jquery

网站

登录后参与评论

0 条评论

热度