解析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 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

realloc invalid pointer错误解析

realloc invalid pointer错误 char* temp=(char*) realloc(src,sizeof(char)*100); 如上面这...

1785
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

第一种方法: 用了转义字符把>和<替换掉,然后就没有问题了。 SELECT * FROM test WHERE 1 = 1 AND start_da...

1789
来自专栏数说戏聊

SUBSTRING() 与 CONV() 函数1.substring()函数2.conv()函数

MySQL 字符串截取函数:left(), right(), substring(), substring_index()。

682
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

用了转义字符把>和<替换掉,然后就没有问题了。

20910
来自专栏TungHsu

这或许是对小白最友好的python入门了吧——10,元组

元组和列表差不多,但是和列表又不一样,除了长得不一样外,还有一个很大的不同就是元组的元素不能修改。 元组是这样写的(以矩形的长宽为例): rectangle =...

2684
来自专栏流媒体

C++构造/析构函数

当类的成员变量中存在类时候,同时成员类没有无参或默认构造函数,在创建该类的对象时候会出错。这是需要使用初始化列表。将需要的成员变量进行初始化。

754
来自专栏梧雨北辰的开发录

Swift学习:扩展

本篇将详细总结介绍Swift扩展的用法; 扩展就是为一个已有的类、结构体、枚举类型或者协议类型添加新功能。这包括在没有权限获取原始源代码的情况下扩展类型的能力...

762
来自专栏Linux驱动

C语言异常处理之 setjmp()和longjmp()

异常处理之除0情况 相信大家处理除0时,都会通过函数,然后判断除数是否为0,代码如下所示: double divide(doublea,double b) { ...

3004
来自专栏康怀帅的专栏

Redis string 类型

可以是字符串、整数或浮点,统称为元素。对字符串操作,对整数类型加减。 追加 set key value append key 1 get key 赋值 se...

2646
来自专栏编程

带你深入理解Python属性查找

今天扣丁学堂给大家介绍一下关于python视频教程中的属性查找,首先在Python中属性查找(attributelookup)是比较复杂的,特别是涉及到描述符d...

1789

扫码关注云+社区