this

这个系列的文章尽量每个点都能从一下三个方面来梳理自己的思路:
1、使用场景
2、能解决什么问题
3、怎么解决
先从this来看吧,什么是this?
    1、this是js的关键字之一,他是对象 自动生成的一个内部对象,只能在 对象内部使用。随着函数的使用场合的不同,this的值会发生变化;
2、this指向什么,安全取决于什么地方以什么方式调用,而不是创建时。
举个例子吧

var  coldMan = {
        name = "栗老师",
     getName = function({
     
        console.log(this.name)
    })
};

var example = coldMan.getName;
example();  // undefined


this并没有按照我们想的指向coldMan,这样也向我们展示了this的指向并不是在函数创建确定的而是在函数调用的时候,接下来就让我们来看看函数调用的时候是怎么来判断this的指向的;

第一种方式:默认绑定

上栗子:
    function foo(){
        var a = 1;
        console.log(this.a); //10
    }
    var a = 10;
    foo()

WFT,居然不是1,是的打印出来的是外面的 a = 10;实际上像这样直接使用的函数,函数内的this指向的是全局变量window;

第二种方式: 隐性绑定

栗子来了
       function foo(){
           console.log(this.a);
           
       }
       var object = {
           a : 1,
           foo : codeMan
       }
       foo();  //undefined
       
       object.foo();  // 1


当foo函数执行的时候有了上下文,那么this默认将绑定上下文对象,this即为object,等价于输出object.a;还可以这样理解,函数作为对象的一个属性时,并且作为对象的一个属性被调用的时候,函数的this指向该对象;
总结一下

  • 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

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

  • 情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,例子3可以证明,如果不相信,那么接下来我们继续看几个例子。

第三种显示绑定

从刚才的栗子中我们可以看出,要使用隐式绑定,那么我们的函数就必须包含于上下文中,那么我们的显示绑定就该出场了

call、apply、bind
这三个函数的作用就是改变函数的this指向


又有栗子了:
    function foo(a,b){
        console.log(a + b)
    }
    foo.call(null,'栗','老师'); //栗老师
    foo.apply(null,['栗','老师']); //栗老师
    
apply和call的不同支出在于apply只有两个参数,第一个放 this对象,第二个是以数组的形式放置原函数的参数

而bind函数的用法为:

function foo(){
    console.log(this.a);
}
var obj = { a : 10};
foo = foo.bind(obj);
foo();  //10

在这个栗子里,bind的作用是将obj绑定到foo()函数的this上
还有一种就是new 绑定

上代码
function Foo(){
    this.name = '栗老师';
    this.age = 22;
    
    console.log(this);//Foo {name: '栗老师',age: 22}
}

var f = new Foo();
console.log(f.name);//栗老师
console.log(f.age);//22


如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象。


总结一下

1.如果函数被 new 修饰

this绑定的是新创建的对象,例:var bar = new foo(); 函数 foo 中的 this 就是一个叫foo的新创建的对象 , 然后将这个对象赋给bar , 这样的绑定方式叫 new 绑定 。

2.如果函数是使用 call,apply,bind来调用的

this绑定的是 call,apply,bind 的第一个参数.例: foo.call(obj); , foo 中的 this 就是 obj , 这样的绑定方式叫 显性绑定 .

3.如果函数是在某个 上下文对象 下被调用

this绑定的是那个上下文对象,例 : var obj = { foo : foo }; obj.foo(); foo 中的 this 就是 obj . 这样的绑定方式叫 隐性绑定 .

4.如果都不是,即使用默认绑定

例:function foo(){...} foo() ,foo 中的 this 就是 window.(严格模式下默认绑定到undefined).


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

推荐阅读更多精彩内容