关于JS中的 this 的指向

概述

在绝大多数情况下,函数的调用方式决定了this的值。在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

this 中的四种绑定方式 ?

一 默认绑定

console.log(this === window); 
console.log(this.document === document); 
this.a = 91;
console.log(window.a); 

全局环境中,this默认绑定到window。

例子:

var a = 0;
function foo(){
    (function test(){
        console.log(this.a);
    })()
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo();  

等价于上例

var a = 0;
var obj = {
    a : 2,
    foo:function(){
            function test(){
                console.log(this.a);
            }
            test();
    }
}
obj.foo();//0

函数独立调用时,this默认绑定到window。

(function () {
     console.log(this === window); // true
})();

function foo(){
    console.log(this === window);
}
foo();

二 隐式绑定

function foo() {
    console.log( this.a )
  }

  var obj2 = { 
      a: 42,
      foo: foo
   }

   var obj1 = {
      a: 2,
      obj2: obj2
   }

  obj1.obj2.foo();  

结合上面的例子,this的指向可以总结为一下三种情况。

情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,在js的严格版中this指向的不是window,而是undefined

情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

隐式丢失
var o = {
a:10,
b: {
       a:12,
       fn:function(){
        console.log(this.a);  
        console.log(this);    
    }
  }
}
var j = o.b.fn;
j();

函数别名的情况
赋值操作和调用不是同一个概念,上面说的 this是指向上一级调用它的对象,跟赋值操作没有上面关系。例子中虽然函数 fn 是被对象b 所引用,但是在将 fn 赋值给变量 j 的时候并没有执行所以最终指向的是 window。

var a = 2;
function foo() {
    console.log( this.a );
}
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); 

(p.foo = o.foo)();

间接引用的情况
等价于函数别名的情况。
如果要输出 4 ,该怎么做?

var a = 2;
function foo() {
    console.log( this.a );
}
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); 
p.foo = o.foo;
p.foo();

三 显示绑定

就是给this指定值,如:new,call, apply, bind绑定等

1)call 和 apply 绑定

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
}

var bar = function() {
    return foo.apply( obj, arguments)
}

var b = bar(3); 
console.log(b);

类型转换

function bar() {
   console.log(Object.prototype.toString.call(this));
}

bar.call(7); 

使用 callapply函数时要注意,如果传递给this的值不是一个对象,JS会尝试使用内部的ToObject操作将其转化为对象。因此,如果传递的值是一个原始值比如 7 ,那么就会使用相关构造函数将它转换为对象,所以原始值7会被转换为对象,像new Number(7)这样。

2) bind 绑定

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

var unboundGetX = module.getX;
console.log(unboundGetX());          

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());

调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数,但是在这个新函数中,this将永久地被绑定到了bind的第一个参数,无论这个函数是如何被调用的。返回由指定的this值和初始化参数改造的原函数拷贝

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}

var obj = {
    a: 2
 }

var bar = foo.bind(obj)

var b = bar(3); 
console.log(b); 

注意 bind指生效一次

3) new 绑定

在传统面向类的语言中,使用new初始化类的时候会调用类中的构造函数,但是JS中new的机制实际上和面向类和语言完全不同。

使用new来调用函数,或者说发生构造函数调用时,会自动执行下面的操作:

  • 创建(或者说构造)一个全新的对象

  • 这个新对象会被执行[[Prototype]]连接

  • 这个新对象会绑定到函数调用的this

    function fn() {
        this.a = 2;
    }
    var test = new fn();
    console.log(test); 
    

当 this 遇到 return 时

在构造函数中使用this分为两种情况

 function fn()  
  {  
     this.user = 'zhong';  
     return undefined;       
  }
  var a = new fn;  
  console.log(a);   

函数当作构造函数使用且函数内没有返回值,或返回值是5种基本型(Undefined类型、Null类型、Boolean类型、Number类型、String类型)之一,指向实例后的对象

  function fn()  
  {  
      this.user = 'zhong';   
      return [1,2,3,4];
  }
  var a = new fn;  
  console.log(a);    

函数当作构造函数使用且有return值,返回是数组、对象等,this指向返回值

function C2() {
  this.a = 1;
  return {
    a: 2
  };
}
o = new C2();
console.log(o); 

Reference

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

推荐阅读更多精彩内容

  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,127评论 0 2
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 6,925评论 15 54
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,550评论 0 5
  • #100天阅读计划#29/100。《王者速读法》,为什么下决心看一本书的时候往往失败告终,因为我们从小被教育“万般...
    肌肉控阅读 163评论 0 0
  • 春天万物复苏,沉睡了很久的种子在黑暗的土壤里应运而苏醒,慢慢地生根发芽,在太阳和细雨中不断向外伸展,这段时间是新...
    柯瑞娜阅读 292评论 0 0