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

相关文章

来自专栏全沾开发(huā)

如何在ES5与ES6环境下处理函数默认参数

1414
来自专栏Golang语言社区

浅析Go语言中的Range关键字

前言 相信用过Range的朋友们都知道,Go语言中的range关键字使用起来非常的方便,它允许你遍历某个slice或者map,并通过两个参数(index和val...

3589
来自专栏技术之路

详解go语言的array和slice 【二】

  上一篇  详解go语言的array和slice 【一】已经讲解过,array和slice的一些基本用法,使用array和slice时需要注意的地方,特别是s...

1767
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb03-轻松理解JS(Java真正的全栈开发)

? 一.js常用对象 ljs中的常见对象有以下几个: Boolean Number String Array 数组 Date 日期 Math 数学 RegEx...

27612
来自专栏web前端

JavaScript基础学习--07函数的传参、重用、价格计算

Demos:   https://github.com/jiangheyan/JavaScriptBase 一、函数传参      1、参数=js数据类型  ...

1888
来自专栏章鱼的慢慢技术路

用Go语言实现一个简单的聊天机器人

Go语言基本构成要素:标识符、关键字、字面量、分隔符、操作符。它们可以组成各种表达式和语句,而后者都无需以分号结尾。

1052
来自专栏快乐八哥

JavaScript中的函数基础

函数能让开发者把JavaScript代码变得更有效率,而且更能重复吃用。函数解决思路:把大问题变成小问题,分割的思路。 函数的语法: 函数类型1: functi...

1976
来自专栏PHP在线

12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。 使用!!操作符转换布尔值 有时候我们...

3468
来自专栏PHP在线

Jquery find与filter函数区别

find()会在div元素内 寻找 class为classname的元素。 filter()则是筛选div的class为classname的元素。 基本是...

3467
来自专栏Nian糕的私人厨房

JavaScript 函数

通常来说,一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的"子程序",和程序本身一样,一个函数的函数体是由一系列的语句组成的,函数可以接收传入参数,...

723

扫码关注云+社区