• Javascript的关键字this详解


    在javascript中关键字this是一个很难掌握的概念。它在不同的情况下指代不同的对象。下面就来看看,在JavaScript中各种this的使用方法有什么不同之处?

    1、在HTML元素事件属性中inline方式使用this关键字:

    <div onclick="method(this)">element</div>

    这里的this代表触发onclick时间的Dom对象。

    2、在事件处理函数中使用this关键字:

    1 <div id="elmtDiv">element</div>
    2  <script language="javascript">
    3  var div = document.getElementById('elmtDiv');
    4  div.onclick = function()
    5  {
    6     // 在此使用this
    7  };
    8  </script>

    这里this指代的对象和上面一样。

    3、函数中的this

    函数中的this代表调用函数的对象。

    1 function print(message)
    2 {
    3      this.alert(message);
    4 }
    5 
    6 print("this is window");

    例如上面这个函数print的定义也可以写成。window.print = function(){}.调用print(),实际上是调用window对象上的方法print。所以print中的this代表window对象。还有类似的情况是在构造函数中定义的方法:

     1 function MyClass(name)
     2 {
     3     this.name = name;
     4     this.toString = function(){
     5         return this.name;
     6     }
     7 }
     8 
     9 var my = new MyClass('myclass');
    10 alert(my.toString());

    this指向的是调用此方法的对象my。

    4、在类的构造函数中使用this

    代码
    function JSClass()
    {
        
    var myName = 'jsclass';
        
    this.m_Name = 'JSClass';
    }

    JSClass.prototype.ToString 
    = function()
    {
        alert(myName 
    + '' + this.m_Name);
    };

    var jc = new JSClass();
    jc.ToString();

    这是JavaScript构造函数中对this的使用,这个和其它的OO语言中的情况非常的相识。但是这里要求成员属性和方法必须使用this关键字来引用,运行上面的程序会被告知myName未定义。有关构造函数的相关内容:Javascript(js)使用function定义构造函数有详细的介绍。

    5、为脚本引擎内部对象添加原形方法中的this关键字

    1 Function.prototype.GetName = function()
    2 {
    3     var fnName = this.toString(); 
    4     fnName = fnName.substr(0, fnName.indexOf('(')); 
    5     fnName = fnName.replace(/^function/''); 
    6     return fnName.replace(/(^\s+)|(\s+$)/g, '');
    7 }
    8 function foo(){}
    9 alert(foo.GetName());    

    这里的this指代的是被添加原形的类的实例。

    6、函数调用中的this

    在将函数作为一个对象的方法调用时,如:

    1 function print()
    2 {
    3     alert(this.toString());
    4 }
    5 
    6 print.apply('this is first argument');
    7 print.call('this is first argument');

    在Function.apply和Function.call中的第一个参数就是函数中this的对象。

    相关文章:Javascript对象原型prototype和继承

  • 相关阅读:
    Hexo个人博客主题配置
    Hexo+Github/Gitee 搭建个人博客
    TCP/IP协议架构介绍(四):应用层
    TCP/IP协议架构介绍(三):传输层
    TCP/IP协议架构介绍(一):网络接口层
    Linux Bash编程
    TCP/IP协议架构介绍(二):网络层
    charles SSL证书安装
    Linux常用命令:性能命令
    简繁转换
  • 原文地址:https://www.cnblogs.com/hyl8218/p/1658749.html
Copyright © 2020-2023  润新知