Javascript 的 this 用法

this是Javascript语言的一个关键字。正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛。

this 不是变量,不是属性,不能为其赋值,它始终指向调用它的对象。
只要记住最重要的一条即可“它始终指向调用它的对象” ,所以找到调用this的对象,就知道this到底指向谁了

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
下面分四种情况,详细讨论this的用法。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

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

var test = function(){
  alert(this === window);
 }
test(); //true

纯粹的函数调用也有感觉上似乎复杂的:

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test();

你不会认为弹出"true"吧,不是按照上面的理论'innerTest'是被'test'调用的,然后'this'就指向'test'吗?
额,错就错在是谁调用的'innerTest', 其实这种函数都是'window'对象调用的,即使你嵌套一千层,调用各个函数的都是'window'对象,奉上下面这段代码为证

var test = function(){
     var innerTest = function(){
           alert(this === window);  //true
           var innerTest1 = function(){
                  alert(this === window);  //true
            }
           innerTest1();
     }
     innerTest(); 
}
test();

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

function test(){
    alert(this.x);
  }
var obj = {};
obj.x = 1;
obj.m = test; //作为对象的方法调用
obj.m(); //1

下面的你不会认为结果为"false"吧!,'test1'和'test' 两个都指向一个对象,所以是true。关键记住”this 始终指向调用它的对象“。

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b();  //true

下面是 "true" 还是 "false" 呢?

var test ={
     'a':1,
     'b':{
           'b1':function(){
           alert(this === test);
         }
     }
 }
test.b.b1();

按照上面的理论,这时 "this" 不再直接被 'test' 调用了,而是被 'test.b' 调用, 奉上下面一段代码为证:

var test ={
     'a':1,
     'b':{
             'b1':function(){
             alert(this === test.b);
          }
     }
 }
test.b.b1();  //true

情况三 作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

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

下面构造函数”new test()“创建了一个新的空对象,然后再由这个对象指向函数"test"中的代码,因此此时this不在是window对象,而是该构造函数创建的新对象

var test = function(){
  alert(this === window);
 }
new test();  //false

情况四 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。
再来一段:

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); //false

apply作用就是”调用一个对象的一个方法,以另一个对象替换当前对象“ 所以了'window' 对象已经被替代为'test1',自然为'false'了,奉上如下代码以为证明:

var test = function(){
     alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1);  //true
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容

  • this是Javascript语言的一个关键字。 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比...
    鲁uin阅读 5,458评论 0 4
  • this是Javascript语言的一个关键字。 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比...
    云端漫记阅读 148评论 0 0
  • 深入浅出 JavaScript 中的 this 在 Java 等面向对象的语言中,this 关键字的含义是明确且具...
    lyzaijs阅读 665评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • 1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 979评论 0 3