zoukankan      html  css  js  c++  java
  • JS(javascript)中this的几种用法实例详解

    本文主要介绍了javascript(以下简称js)中 this 用法,结合具体实例详细分析一下js中 this 的含义及使用方法,需要的朋友可以参考下。

    this 是 JavaScript 语言的一个关键字,this 的指向其实是非常灵活的,它会根据调用function的对象不同,导致了 this 的指向不同。当在全局作用域下调用函数时,this 指向window。总的来说,this 就是函数运行时所在的环境对象。有四种情况,下面详细讨论 this 的用法。

    用法1:函数的调用

    在一般函数方法中使用 this 指代全局对象,这是函数的最通常用法,属于全局性调用,因此 this 就代表全局对象。

    function test(){
        this.name = zs;
        alert(this.name);
      }
    test(); // zs

    用法2:对象方法调用

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

    function test(){
      alert(this.name);
    }
    var person = {};
    person.name = lisi;
    person.nickname = test;
    person.nickname (); // lisi

    用法3:构造函数调用

    作为构造函数调用,this 指代new 出的对象,在js中自己创建构造函数时可以利用 this 来指向新创建的对象上。这样就可以避免函数中的 this 指向全局了。例如:

    function test(){
      this.name = wangwu;
    }
    
    var nickname = new test();
    alert(nickname.name); // wangwu
    // 运行结果为wangwu
    
    // 为了表明这时的this不是全局对象,下面给代码做一点改变,可以看看效果
    var name = maliu;
    function test() {
        this.name = zhaoqi;
    }
    
    var nickname = new test();
    alert(name); // 这时结果为maliu

    用法4:apply或call调用

    apply()是函数的一个方法,作用是改变函数的调用对象,此方法的第一个参数为改变后调用这个函数的对象,因此,这时 this 指的就是这第一个参数。

    var name = zhangsan;
    function test() {
        alert(this.name);
    }
    
    var person = {};
    person.name = lisi;
    person.nickname = test;
    
    //apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为zhangsna,证明this指的是全局对象。
    person.nickname.apply(); // 结果为zhangsan
    
    //如果把最后一行代码修改为
    person.nickname.apply(person); // 此时结果为lisi
    

    到这里本文就结束了,希望对大家有帮助;

    想要查看JS的简单介绍,可以点击查看

    请看点击查询基本语法章节

    请看点击查询基本对象章节

    请看点击查询BOM对象章节

    请看点击查询DOM对象章节

    如果感觉写的好,确实帮助了你,那就麻烦帮忙点个赞,多谢!

    如果需要转载,请注明出处,谢谢!本文为博主原创文章,博客地址:https://blog.csdn.net/weixin_44299027

  • 相关阅读:
    C#3.0分部份方法
    欢迎提议
    控制台关闭的特殊处理
    好头晕
    c#如何计算当月季度时间段
    CMMI定义(转)
    SQL Server 聚集索引和非聚集索引的区别
    ObjectBuilder2.0 的学习
    WaitHandle、AutoResetEvent、ManualResetEvent整理
    使用XML RPC进行远程调用
  • 原文地址:https://www.cnblogs.com/no8g/p/13415644.html
Copyright © 2011-2022 走看看