JS中的this变量的使用介绍_基础知识

JavaScript中this的使用

在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。

对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂。而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象。

示例一、

复制代码 代码如下:

var obj = {};

obj.x = 100;

obj.y = function(){ alert( this.x ); };

obj.y(); //弹出 100

这段代码非常容易理解,当执行 obj.y() 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会弹出100。

示例二、

复制代码 代码如下:

var checkThis = function(){

alert( this.x);

};

var x = 'this is a property of window';

var obj = {};

obj.x = 100;

obj.y = function(){ alert( this.x ); };

obj.y(); //弹出 100

checkThis(); //弹出 'this is a property of window'

这里为什么会弹出 'this is a property of window',可能有些让人迷惑。在JavaScript的变量作用域里有一条规则“全局变量都是window对象的属性”。当执行checkThis() 时相当于window.checkThis(),因此,此时checkThis函数体内的this关键字的指向变成了window对象,而又因为window对象又一个x属性('thisis a property of window'),所以会弹出 'thisis a property of window'。

上面的两个示例都是比较容易理解的,因为只要判断出当前函数是作为哪个对象的方法调用(被哪个对象调用)的,就可以很容易的判断出当前this变量的指向。

this.x 与apply()、call()

通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。

示例三:call()

复制代码 代码如下:

function changeStyle( type , value ){

this.style[ type ] = value;

}

var one = document.getElementByIdx( 'one' );

changeStyle.call( one , 'fontSize' , '100px' );

changeStyle('fontSize' , '300px'); //出现错误,因为此时changeStyle中this引用的是window对象,而window并无style属性。

注意changeStyle.call()中有三个参数,第一个参数用于指定该函数将被哪个对象所调用。这里指定了one,也就意味着,changeStyle函数将被one调用,因此函数体内this指向是one对象。而第二个和第三个参数对应的是changeStyle函数里的type和value两个形参。最总我们看到的效果是Dom元素one的字体变成了20px。

示例四:apply()

复制代码 代码如下:

function changeStyle( type , value ){

this.style[ type ] = value;

}

var one = document.getElementByIdx( 'one' );

changeStyle.apply( one , ['fontSize' , '100px' ]);

changeStyle('fontSize' , '300px'); //出现错误,原因同示例三

apply的用法和call大致相同,只有一点区别,apply只接受两个参数,第一个参数和call相同,第二个参数必须是一个数组,数组中的元素对应的就是函数的形参。

无意义(诡异)的this用处

示例五:

复制代码 代码如下:

var obj = {

x : 100,

y : function(){

setTimeout(

function(){ alert(this.x); } //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined

, 2000);

}

};

obj.y();

如何达到预期的效果

复制代码 代码如下:

var obj = {

x : 100,

y : function(){

var that = this;

setTimeout(

function(){ alert(that.x); }

, 2000);

}

};

obj.y(); //弹出100

事件监听函数中的this

复制代码 代码如下:

var one = document.getElementByIdx( 'one' );

one.onclick = function(){

alert( this.innerHTML ); //this指向的是one元素,这点十分简单..

};

注意:js中的全局变量都会动态添加到Window 的实例 window,作为其属性。

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

1、纯粹函数调用。

复制代码 代码如下:

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

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

复制代码 代码如下:

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

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

2、作为方法调用,那么this就是指这个上级对象。

复制代码 代码如下:

function test() {
alert(this.x);
}

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

3、作为构造函数调用。所谓构造函数,就是生成一个新的对象。这时,这个this就是指这个对象。

复制代码 代码如下:

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

4、apply调用

this指向的是apply中的第一个参数。

复制代码 代码如下:

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

var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1

当apply没有参数时,表示为全局对象。所以值为0。

时间: 2024-10-22 20:11:15

JS中的this变量的使用介绍_基础知识的相关文章

js中document.write的那点事_基础知识

记住,在载入页面后,浏览器输出流自动关闭.在此之后,任何一个对当前页面进行操作的document.write()方法将打开-个新的输出流,它将清除当前页面内容(包括源文档的任何变量或值).因此,假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量,使用一个document.write()方法完成写操作.不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作. 关于document.write()方法还有一点要说明的是它的相关方法d

java中String类型变量的赋值问题介绍_基础知识

运行下面这段代码,其结果是什么? package com.test; public class Example { String str = new String("good"); char[] ch = { 'a', 'b', 'c' }; public static void main(String[] args) { Example ex = new Example(); ex.change(ex.str, ex.ch); System.out.println(ex.str);

js闭包引起的事件注册问题介绍_基础知识

背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1"&

在JS中操作时间之getUTCMilliseconds()方法的使用_基础知识

 javascript Date.getUTCMilliseconds()方法按照通用时间的返回指定日期的毫秒数.通过getUTCMilliseconds返回的值是在0和999之间的一个整数.语法 Date.getUTCMilliseconds() 下面是参数的详细信息:     NA 返回值: 返回按照通用时间指定日期的毫秒数.例子: 下面的例子打印的当前时间变量hrs的毫秒部分. <html> <head> <title>JavaScript getUTCMilli

JavaScript中的运算符种类及其规则介绍_基础知识

JavaScript中的运算符有很多,主要分为算术运算符,等同全同运算符,比较运算符,字符串运算符,逻辑运算符,赋值运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的运算符. 一.JavaScript运算符的种类 1.算术运算符:+ . - .* . / . % . -(一元取反) . ++ . -- 2.等同全同运算符:== . ===. !== . !=== 3.比较运算符:< . > . <= . >= 4.字符串运算符:< .

JavaScript中的分号插入机制详细介绍_基础知识

仅在}之前.一个或多个换行之后和程序输入的结尾被插入 也就是说你只能在一行.一个代码块和一段程序结束的地方省略分号. 也就是说你可以写如下代码 复制代码 代码如下: function square(x) {     var n = +x     return n * n } 但是却不可以写的像下面代码一样,这样就报错了哦 复制代码 代码如下: function area(r) {    r = +r    return Math.PI*r*r }//error 仅在随后的输入标记不能解析时插入

js jq 单击和双击区分示例介绍_基础知识

一:原理: 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick: 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会.也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果

js css后面所带参数含义介绍_基础知识

浏览一些网站,经常看到网页链接的js css后面总是带有一些参数,今天详细查了一下: 出现此种情况,主要有两个可能: 脚本不存在,而是服务器端动态生成的,带一个参数表示生成脚本文件的版本号. 为加快响应速度,有些客户端会缓存相应的js css,因此每次升级了js css 版本号后,改变相应的版本号,客户端浏览器会自动去更新的新版本的js或是css 第二种情况应该是最多的

JS中 用户登录系统的解决办法_基础知识

当用户输入 pwd 密码是 123 就跳到第二个页面,4秒后,自动跳转到第三个页面login.html 复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><script type="text/javascript">     //进行检查    function check