zoukankan      html  css  js  c++  java
  • javaScript之this的五种情况

        this一直是JavaScript研究的难题,特别是在笔试和面试中的各种程序分析问题中,也常常会被问到。下面来看一看this被运用的五中情况:

    (1)       纯粹的函数调用

        函数最普通用法,此时属于全局调用,函数内this指向全局对象window。

    示例一:

    var x=20;
       function test(){
          var x = 10;
          console.log(this.x)
    }

    输出:20,因为函数test执行环境为window。

    示例2:

    var x=20;
     function test(){
          this. x = 10;
          console.log(this.x)
    }
    test()
    console.log(x);

    输出:

    10

    10

        由于test函数内部this指向window,所以第3行代码修改了x的值。

    (2)     作为对象的方法使用

        函数作为某个对象的方法,此事this指向该对象。

    function text(){
    console.log(this.x)
    }
    var obj = {};
    obj.x = 10;
    obj.out = text;
    obj.out()

    输出: 10

    (3)       构造函数生成实例对象

        作为构造函数使用时,this指向该对象新创建的实例。

    var x = 2;
    function text(){
    this.x =1;
    }
    var inst = new text();
    console.log(inst.x);

    输出: 1

    (4)     使用apply

    apply()方法是改变函数内部this的值,若为空默认是指向全局对象window。

    var x = 2; 
      function test(){ 
       console.log (this.x); 
      } 
      var obj={}; 
      obj.x = 1; 
      obj.m = test;  
    obj.m.apply();
    obj.m .apply (obj);

    输出:

    2

    1

        第8行代码将函数内部的this指向window,故输出为2。第9行代码等价于obj.m()。因为作为对象方法的函数其内部this就指向该对象。

    (5)事件处理程序中的this

        在DOM级事件处理程序中this指向触发事件的元素,而对于IE事件来说,this指向全局对象window。

    HTML:
    <input id="myinput" type="text" value="javascript中onclick中的this" onclick=" test(this);"/>
    javaScript:
    function test(obj){ 
    alert(obj); //[object HTMLInputElement] 
    alert(obj.id); //myinput 
    alert(obj.value); //javascript中onclick中的this 
    }

        还有闭包中的this是指向window的,掌握以上几种运用方法,相信你可以所向睥睨。

  • 相关阅读:
    Spring--AOP
    Database--事务
    Neo4j--UNIQUE约束
    Neo4j--INDEX索引
    排序算法 目录
    数据结构 目录
    设计模式 目录
    建造者模式及应用举例
    模板模式以及应用举例
    真·随笔
  • 原文地址:https://www.cnblogs.com/microcosm/p/7071572.html
Copyright © 2011-2022 走看看