HTML5学堂-码匠 HTML5学堂

您当前位于:JavaScript高级 ——> 原生JavaScript this相关知识详解

原生JavaScript this相关知识详解

2015/04/30 12:27:58 | 作者:HTML5学堂(码匠) | 分类:JavaScript高级 | 关键词:this,this指向

JavaScript中的this详解

HTML5学堂:this属于JS的底层知识,了解this之后,能够实现一些基本的功能,但是感觉最重要的是,this是面向对象必不可少的组成部分,如果希望能够逐渐的掌握面向对象,this必然是不可少的。

查看this指向的一句话法则:

永远指向其所在函数的所有者如果没有所有者时,指向window。

理解this的要点:关键在于将函数与函数名分开看待。同一个函数,在不同的执行方法下,会有不同的效果。

如何来进行理解呢,来看几个实例

1)全局函数中的this指向

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

2)对象方法中的this指向

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

3)绑定函数时的this

如下代码,test1和test2中this并不相同

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

这便是上面所说的,要将函数与函数名分开看待

4)绑定函数时的this

此时如果我们对3)中的代码进行一些修改:

  1. function test () {
  2.     alert(this === h5course);
  3. }
  4. test();//this指向window
  5. var h5course = {};
  6. h5course.test2 = test;
  7. h5course.test2();//此时test2的所有者为h5course,而test没有所有者,this在此时指向的是h5course
  8. alert(h5course.test2);

欢迎沟通交流~HTML5学堂

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

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

6)setTimeout等传参形式的this指向

不要去看传的参数中函数的所有者,看执行函数的所有var obj = {};

  1. obj.x = 1;
  2. obj.y = 2;
  3. window.x = 100;
  4. window.y = 200;
  5. obj.add = function () {
  6.     alert(this.x + this.y);
  7. }
  8. setTimeout(obj.add,1000);//this指向window,输出为300
  9. setTimeout(function(){//this指向obj,输出为3
  10.     obj.add();
  11. },1000);

7)改变this的方法:call,apply

call和apply(两者用于改变函数的作用域)

  1. var oo = {};
  2. oo.test3 = function(){
  3.     alert(this == oo);//返回false
  4. }
  5. var h5course = {};
  6. oo.test3.call(h5course);//this指向的是()内的第一个参数,此处为h5course
  7.  
  8.  
  9.  
  10. window.x = 100;
  11. var oo = {};
  12. oo.test3 = function(y,z,k){//函数的参数与apply、call中第二个以及之后的参数相对应
  13.     alert(this.x+y+z+k);
  14. }
  15. var arr=[2,3,4]
  16. oo.test3.call(window,2,3,4);//this指向window,输出为109
  17. oo.test3.apply(window,[2,3,4]);//同上,使用apply进行元素罗列时需要使用中括号[]将所有参数包裹起来
  18. oo.test3.apply(window,arr);//同上,使用apply对于一个数组的访问很简单,使用数组名称即可
  19. oo.test3.call(window,arr[0],arr[1],arr[2]);//同上

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端