“茴”字有四种写法，this也是一样

Posted 2020-10-23 陌上兮月

　　说到这个地方又想起以前高中还是初中学的《孔乙己》这个梗，但是这里的this显然实用性比那个要大很多，哈哈。

　　简单来说，this有四种应用场景，分别是在构造函数上、对象属性中、普通函数中、call和apply方法中。

　　先来看第一种，构造函数：

1 function Foo(name){
2             this.name=name;
3         }
4 
5         var f=new Foo();

　　在这里，this指向的是新对象f。而在对象属性中，这又有了一点不同。

1 var obj={
2             a:"funny",
3             b:function(){
4                 console.log(this.a);
5             }
6         };
7 
8         obj.b();//打印出funny

　　这里我们把b作为obj对象的一个属性来执行，执行的时候this就指向当前这个对象obj，所以在控制台会打印出funny;接下来看第三种情况，就那这个例子来说，我们稍微改动一下代码。

1         var obj={
2             a:"funny",
3             b:function(){
4                 console.log(this.a);
5             }
6         };
7 
8         var f1=obj.b;
9         f1(); //打印出undefined

　　在第九行中，我们执行f1发现根本取不到“funny”，而是打印出undefined。原因就是当我们这样作为一个普通函数执行的时候，this指向window对象的，而window对象下找不到a这个属性，于是就打印出undefined。顺便说一句，如果是找不到一个属性，会返回undefined;而找不到一个变量，则会返回“xxx is not defined”。

　　最后一种情况，在call和apply中。其实我们可以把call和apply当成一种特殊的执行方法。可以叫它“能自定义this指向的执行方法”，这个名字听起来是不是有点长，但原理的确如此。就是说当我们直接来一个f1()的时候，它的this默认为window。要改变怎么办呢？就要来点特殊执行手段，在中间多插入一个单词---call或者apply。

　　

1         var obj={
2             a:"funny",
3             b:function(){
4                 console.log(this.a);
5             }
6         };
7 
8         var f1=obj.b;
9         f1.call({a:"serious"}); //改变了this的指向，指向这个新对象，打印出serious

　　还是这段代码，不过我稍微改了下，把它的this的指向扭了一下，最终指到我自己写的{a:"serious"}这个对象，然后就可以把serious打印出来了。apply和call差不多，因为这里我只传了一个参数，所以没法演示。call-->第一个参数为this，后面为其他参数；apply-->第一个参数为this，后面为用数组包裹起来的其他参数。就这么点区别。

　　应该还不错吧(｀?ω?′)