this是Javascript的关键字,代表在函数运行时,自动生成一个内部对象,只能在函数内部使用。例如:

function test() {
this.x = 1;
}

随着函数的使用场合不同,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

或者:

var x = 1;
function test() {
this.x = 0;
}
test();
alert(x); //0

注意:javascript的设计缺陷,内部函数的this不会绑定到外层函数上,使用变量替代方式可以解决该问题。约定俗成,该变量命名为that。

var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1

情况二:作为对象方法的调用

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

function test() {
alert(this.x);
} var o = {};
o.x = 1;
o.m = test;
o.m(); //1

情况三:作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(Object)。这时,this就指这个新对象。

var x = 2;
function test() {
this.x = 1;
}
var o = new test();
alert(o.x); //1
alert(x); //2

JavaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。

情况四: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。

参考资料:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/

JavaScript学习笔记(三)this关键字的更多相关文章

  1. JavaScript:学习笔记(4)——This关键字

    JavaScript:学习笔记(4)——This关键字 以前这篇帖子是关于闭包的,但是我想弄明白的其实是This关键字.JavaScript的this和Java等面向对象语言中的this大不一样,bi ...

  2. Javascript学习笔记三——操作DOM(二)

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  3. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. JavaScript学习笔记–(new关键字)

    作用 是创建一个对象实例.这个对象可以是用户自定义的,也可以是一些系统自带的带构造函数的对象. 描述 创建一个对象类型需要创建一个指定了名称和属性的函数:其中这些属性可以指向它本身,也可以指向其他对象 ...

  5. JavaScript学习笔记(三十八) 复制属性继承

    复制属性继承(Inheritance by Copying Properties) 让我们看一下另一个继承模式—复制属性继承(inheritance by copying properties).在这 ...

  6. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  7. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

    JavaScript:学习笔记(7)——VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...

  8. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  9. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  10. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

随机推荐

  1. php zendstudio 常用的一些自定义模板标签

    <?php /** * xxx.php * ============================================== * Copy right 2013-2016 http: ...

  2. HDU 1065 - I Think I Need a Houseboat

    又是恶心人的水题 圆周率取3.1415926就啥事没有.. #include <iostream> #include <cstdio> #include <cmath&g ...

  3. silverlight中鼠标放在对象的提示事件

    1.xaml 中实现 <Rectangle x:Name="toolTip" Grid.Column="0" Grid.Row="1" ...

  4. avalon前端js直接通过ajax请求传一个对象到后台

    代码如下:                //企业开票信息      vm.invoiceInfo = {       companyId : "",            //企 ...

  5. jdbc之二:DAO模式

    详细代码请参见 https://code.csdn.net/jediael_lu/daopattern 1.创建Dao接口. package com.ljh.jasonnews.server.dao; ...

  6. php array 排序 感悟

    array  排序总体有这几个函数sort.rsort.asort.arsort.ksort.krsort.usort.uasort.uksort. 一开始我记来记去总是有点混乱,后来认真对比后终于清 ...

  7. 重读LPTHW-Lesson25

    1.ex25接触了字符串函数split().列表函数sorted().pop()函数,整理一下其用法以及其他常见的字符串.列表操作函数如下. (1)split()函数 split()是拆分字符串函数, ...

  8. PHP配置xdebug

    其实已经做PHP超过2年了,但是今天特别有感触,所以把过程写在这里 环境是win7+apache2.2+php5.3,因为某种原因,必须使用这个版本. 然后就死活配置不出来.apache日志如下: [ ...

  9. jquery load(URL,FUNCTION(){}) 异步加载页面

    $("#btnSearch").click(function () { var queryUrl = '/Report/LoadInsClassifFileNew'; if ($( ...

  10. SQL Server dbcc checkdb 修复

    默认dbcc checkdb 只做数据库的检测数据库是否完好.不会主动做数据库的修复,要修复数据库,需要数据库设单用模式. 1.repair_allow_data_loss  可能导致数据丢失. 2. ...