`

[转载]Javascript的this

 
阅读更多
出处:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

Javascript的this用法

this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,
  function test(){
    this.x = 1;
  }
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
下面分四种情况,详细讨论this的用法。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
请看下面这段代码,它的运行结果是1。
  function test(){
    this.x = 1;
    alert(this.x);
  }
  test(); // 1
为了证明this就是全局对象,我对代码做一些改变:
  var x = 1;
  function test(){
    alert(this.x);
  }
  test(); // 1
运行结果还是1。再变一下:
  var x = 1;
  function test(){
    this.x = 0;
  }
  test();
  alert(x); //0
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
  function test(){
    alert(this.x);
  }
  var o = {};
  o.x = 1;
  o.m = test;
  o.m(); // 1
情况三 作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
  function test(){
    this.x = 1;
  }
  var o = new test();
  alert(o.x); // 1
运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
  var x = 2;
  function test(){
    this.x = 1;
  }
  var o = new test();
  alert(x); //2
运行结果为2,表明全局变量x的值根本没变。
情况四 apply调用
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。
  var x = 0;
  function test(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test;
  o.m.apply(); //0
apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
如果把最后一行代码修改为
  o.m.apply(o); //1
运行结果就变成了1,证明了这时this代表的是对象o。
分享到:
评论

相关推荐

    JavaScript一些技巧(转载)

    根据给定的文件信息,以下是对“JavaScript一些技巧”中涉及的关键知识点的详细解析: ### 1. 事件处理:`onBlur`, `onFocus`, `onChange`, `onSelect` 在网页开发中,事件处理是与用户交互的核心部分。`onBlur`...

    【转载】javaScript常用的东东

    JavaScript是一种广泛应用于Web开发的脚本语言,它在浏览器端运行,为网页添加交互性,使得用户能够与页面进行动态沟通。这篇博文整理了55个JavaScript中的常用方法,涵盖了数组操作、对象处理、字符串处理、函数...

    javascript排序分页(转载)

    JavaScript,作为浏览器端的主要脚本语言,被广泛用于实现这些动态效果。本篇文章将详细探讨如何使用JavaScript,结合jQuery库,来实现数据的分页显示以及表格内容的排序。 **一、排序** 在JavaScript中,数组的...

    Javascript - 全面理解 caller,callee,call,apply (转载)

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域更是发挥着举足轻重的作用。这篇文章将深入探讨四个关键概念:caller、callee、call和apply,它们都是JavaScript函数操作的核心部分,对于理解和使用高级...

    转载JQuery.txt

    $(this).mouseenter(function(){$(this).addClass("caneditBg")}).mouseleave(function(){$(this).removeClass("caneditBg")}); }); }); function saveText(o){ var text = $(o).val(); $(o).parent().empty...

    js+vml曲线图代码.rar

    <script language="javascript"> <!-- /* 说明: JS和VML画曲线图 * 作者:梦想年华 * 邮箱:fanwsp@126.com * 主页:http://www.FreeAge.cn * 申明:转载,使用,修改请保存上面的版权申明 */ function ...

    javascript AutoScroller 函数类

    代码如下:/* * Copyright (C) 2007-2009 skylark * Email:aohailin@gmail.com * Version:2.1 * 原创程序,转载请保留版权 */ var $=function(o){return typeof o==”string”?document.getElementById(o):o;}; ...

    精确到年月日时分秒的JS日历文件(超强大的日历控件)

    <script type="text/javascript" src="../idcbaba.js"> 调用方法如下: onfocus="setday(this)" 版权声明:开源代码,版权归主机爸爸(IDCbaba.com)所有,可自由转载,转载请务必保留此版权说明。

    不明飞行物:互联网转载

    在这个特定的场景下,"不明飞行物:互联网转载"可能是指一个关于JavaScript技术的项目或讨论,因为标签明确指出了“JavaScript”。 JavaScript,作为互联网开发中的核心语言,它的应用无处不在,从网页交互到服务器...

    输入框信息提示的实现(仿google、百度搜索框)(转载)

    var s = '<div onmouseover="javascript:suggestOver(this);" '; s += 'onmouseout="javascript:suggestOut(this);" '; s += 'onclick="javascript:setSearch(this.innerHTML);" '; s += 'class="suggest_link">...

    页面刷新方法汇总(转载)

    例如,Vue中的`this.$forceUpdate()`可以强制组件重新渲染。 以上就是页面刷新方法的综合总结。理解和熟练运用这些技术,可以帮助开发者提高用户体验,优化网页性能,实现更高效的页面更新。在实际工作中,选择哪种...

    (转载)GWT -EXT学习笔记-基础

    Window.alert("This is my first Gwt Demo!"); } ``` #### 四、配置GWT-EXT环境 **步骤一:下载GWT-EXT和Ext资源** 1. 下载GWT-EXT的相关资源文件。 2. 将下载的`gwtext.jar`文件添加到项目中。 3. 在项目的`...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    【转载】去掉jquery menu plugin 的“No back link”

    这可能涉及到对jQuery选择器、方法和事件的理解,如`$(selector).click()`用于绑定点击事件,`$(this).parent()`用于获取当前元素的父级等。 "工具"标签可能意味着博客中提到的解决方法可能涉及到使用其他辅助工具...

    ASP.NET Gridview隐藏/显示列源码

    ASP.NET实现Gridview隐藏/显示列源码 介绍: 这篇文章演示如果让用户有...本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    引用文章链接代码复制自动加链接功能

    clipBoardContent += this.location.href; window.clipboardData.setData("Text", clipBoardContent); alert("复制成功,请粘贴到您的QQ/MSN上推荐给您的好友"); } ``` 这段代码中,`window.clipboardData....

    Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    ### Vue el-autocomplete远程搜索下拉框及自动填充功能详解 #### 1. Vue与Element UI简介 Vue.js是一款构建用户界面的渐进式JavaScript框架,...最后,对网站的支持表示感谢,并鼓励读者转载本文,同时希望注明出处。

    select自定义

    作者欢迎他人转载使用,只需支付一分鼓励,这体现了开源共享的精神。 总之,自定义`select`是一种提高网页用户体验的有效手段,通过结合HTML、CSS和JavaScript(或jQuery),我们可以创造出既美观又实用的下拉选择...

    vue使用codemirror的两种用法

    Vue是一种流行的前端框架,而CodeMirror是一个代码编辑器的库。本文讲述了如何在Vue项目中集成和使用CodeMirror编辑器,具体介绍了两种不同的方法。...同时,作者也感谢大家对网站的支持,并欢迎转载和分享。

    WebOS_Notes_GBK_24072009 开发手册

    文档内容受到版权保护,任何转载需标明出处。此外,作者欢迎读者通过邮件、Facebook或Twitter进行交流与反馈。 #### 第1天: HelloWorld **目标**: 实现一个简单的WebOS应用,能够接收用户输入的名字并显示“Hello...

Global site tag (gtag.js) - Google Analytics