解析javascript关键字this

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏V站

Python CIDR地址块算法

最近写扫描器有个模块需要把CIDR地址块(类似与192.168.1.1/24)之类的地址解析成IP地址。

1457
来自专栏前端真相

Jquery(1)

1827
来自专栏天天

微信小程序中自定义组件solt的使用

我们会发现,在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载...

3032
来自专栏Python爬虫与算法进阶

Python函数超时,用装饰器解决

我们在自定义一个函数后,会调用这个函数来完成我们想要的功能。 就拿爬虫来举例,你发送请求,服务器给你响应,但是有可能服务器没有给你任何数据,无论是他识别了爬虫、...

1002
来自专栏州的先生

【博客备案完成,恢复访问】如何直接在浏览器中查看和调试Django-Restful接口

博客zmister.com备案完成,恢复访问,同时问答系统筹备上线中,以后大家有问题可以直接在问答中进行提问:)

791
来自专栏天天

微信小程序中自定义组件的使用

在开发过程中,加入有这样一种场景,就是在开发的过程中,我们一直要使用一些相同或者类似的结构,我们就可以自定义模块,方便使用,以及后期的维护,了解vue的同学就知...

1104
来自专栏编程

前端调试必备:CHROME CONSOLE控制台的使用:诊断并记录

chrome console控制台日志记录是检查您的页面或应用程序的功能的强大方法。 我们从console.log()开始,探索其他高级用法。 这篇文章主要讲以...

19410
来自专栏前端知识分享

第106天:Ajax中同步请求和异步请求

用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!

952
来自专栏Jackson0714

PHP内核之旅-4.可变长度的字符串

963
来自专栏前端菜鸟变老鸟

知识点:匹配字符串中的子串,并让子串红色显示、格式化输出json、元素点击之后hover失效、word-wrap:break-word和word-break:break-all

使用jQuery的click为某元素加上css样式,之后该元素原有的hover事件失效,原因是click加上的css权值比外联的css权值大。所以是点击之后原有...

722

扫码关注云+社区