this 的使用方法 —— javascript中的this讲解! (share)

简介:

我一同学总结的关于this的用法,个人感觉总结的挺全面的,和大家分享一下。

原文:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201251935720333/

从自己刚刚开始学习javascript到现在已经很久了,今天得益于新酱的细心讲解,总算是把this这个“雾中花”看清晰了。

在此首先感谢新酱的讲解
下面将this的一些基本使用和大家分享一下:

查看this指向的一句话法则:
 
永远指向其所在函数的所有者如果没有所有者时,指向window。
理解this的要点:关键在于将函数与函数名分开看待。同一个函数,在不同的执行方法下,会有不同的效果
 
如何来进行理解呢,来看几个实例
1)全局函数中的this指向

function test(){
alert(this);//test这个函数没有所有者,因此此时this指向的是window
}

2)对象方法中的this指向

o.test =function(){

alert(this==o);//输出true,o.test表示的是test这个函数的所有者是对象o,因此this应当是指向o的

}

3)绑定函数时的this 1
如下代码,test1和test2中this并不相同

var test2 = o.test1;//test2这个函数并没有所有者,在此,test2虽然调用了test1这个函数,但是this仍然指向window,而不是指向test1的拥有者:对象o
test2();
o.test1 =function(){

alert(this===o);

}

这便是上面所说的,要将函数与函数名分开看待
4)绑定函数时的this 2
此时如果我们对3)中的代码进行一些修改:

function test (){
alert(this=== o);
}
test();//this指向window
var o ={};
o.test2 = test;
o.test2();//此时test2的所有者为o,而test没有所有者,this在此时指向的是o
alert(o.test2);

5)鼠标单击事件等进行函数的绑定时,this的指向

document.onclick=function(){

alert(this===document);//输出为true,onclick事件的拥有者是document。因此,此处this指向document。我们可以将document.onclick理解为一个对象方法,如同例4中的o.test2一样。

}

6)setTimeout等传参形式的this指向
不要去看传的参数中函数的所有者,看执行函数的所有var obj = {};

obj.=1;
obj.=2;
window.=100;
window.=200;
obj.add =function(){
alert(this.+this.y);
}
setTimeout(obj.add,1000);//this指向window,输出为300
setTimeout(function(){//this指向obj,输出为3
obj.add();
},1000);

改变this的方法:call,apply
call和apply(两者用于改变函数的作用域)

var oo ={};
oo.test3 =function(){
alert(this== oo);//返回false
}
var ooo ={};
oo.test3.call(ooo);//this指向的是()内的第一个参数,此处为ooo

 


window.=100;
var oo ={};

oo.test3 =function(y,z,k){//函数的参数与apply、call中第二个以及之后的参数相对应
alert(this.x+y+z+k);
}
var arr=[2,3,4]
oo.test3.call(window,2,3,4);//this指向window,输出为109
oo.test3.apply(window,[2,3,4]);//同上,使用apply进行元素罗列时需要使用中括号[]将所有参数包裹起来
oo.test3.apply(window,arr);//同上,使用apply对于一个数组的访问很简单,使用数组名称即可
oo.test3.call(window,arr[0],arr[1],arr[2]);//同上

本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699143.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
2月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
2月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
28天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
42 3
|
10天前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
10 0
|
10天前
|
JavaScript 前端开发
|
18天前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
2月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
25天前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
|
2月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
25 1
|
2月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
15 2