js中的this进修

2024年5月12日 238次阅读 来源: Uniquec

在之前的对象原型的文章中，我们讲到了在函数前面加new然后举行挪用以后发作的4件事变，当时只把跟原型有关的东西引见了一下。如今我们来进修一下其他的内容。

起首先来回忆一下会有哪四件事变发作吧：

  • 一个全新的对象被竖立
  • 这个新的对象会被接入到原型链
  • 这个新的对象被设置为函数挪用的this绑定
  • 除非函数有返回对象，不然这个被new挪用的函数将自动返回这个新的对象

这里有个新的东西this绑定，也就是接下来我们要引见的东西啦。

第一个题目就是this是什么？（以下回复摘自You-Dont-Know-JS）

this是在函数被挪用的时刻竖立的一个绑定，指向的内容完全由函数被挪用的挪用点来决议的。

简朴点说，this就是一个绑定，指向一个内容。

那末this指向的内容又是什么呢？前面说到这个内容由函数被挪用的挪用点来决议。所谓的挪用点，就是函数在代码中被挪用的处所。也就是说，我们须要找到函数在那里被挪用，从而肯定this指向的内容。斟酌这个题目还须要相识一个观点：挪用栈（抵达当前实行位置而被挪用的一切要领的客栈）。
看段代码来深切明白一下挪用栈和挪用点这两个观点：

function foo() {
    // 挪用栈是: `foo`
    // 挪用点是global scope（全局作用域）
    console.log( "foo" );
    bar(); // <-- `bar`的挪用点
}
function bar() {
    // 挪用栈是: `foo` -> `bar`
    // 挪用点位于`foo`
    console.log( "bar" );
    baz(); // <-- `baz`的挪用点
}
function baz() {
    // 挪用栈是: `foo` -> `bar` -> `baz`
    // 挪用点位于`bar`
    console.log( "baz" );
}
foo(); // <-- `foo`的挪用点

上面这个代码跟诠释应当已很清晰相识释了挪用栈和挪用点这两个观点了。

搞清晰这些观点以后，我们照样不晓得this会指向什么。既然说this指向的内容完全由挪用点决议，那末挪用点又是怎样决议的呢？

还记得文章最最先提到的东西么，关于new的4件事变，第三点讲的是新对象被设置为函数挪用的this绑定。
看下代码：

   function foo(){
      this.a = a;
  }
  var bar = new foo(2); //挪用foo函数来竖立一个新对象bar
  console.log(bar.a);

运用new来挪用函数foo的时刻，我们竖立了一个新对象bar而且把bar绑定到了foo()内里的this.这就是所谓的new绑定。

那末在JavaScript中，关于this绑定，除了new绑定，另有3种别的的划定规矩：

  • 默许绑定
  • 隐式绑定
  • 显现绑定

下面我们顺次来逐一引见。

  1. 默许绑定
    看名字我们就能够看出来，这是最平常最基础的绑定。平常来说，自力函数挪用的时刻this就是默许绑定。
    来看个例子：

    function foo(){
    console.log(this.a);
}
var a = 2;
foo(); //2

    代码很简朴，我们重要体贴的是this。我们先看效果：this绑定到了全局变量。
    具体分析一下也很简朴，这里的函数挪用就是我们平常在运用的最简朴的自力函数的挪用，跟前面引见的划定规矩也很相符。
    这里有一个要注重的小细节就是假如是在严厉形式下，默许绑定的值会变成undefined。假如黑白严厉形式的话，就是绑定到全局变量了。

  2. 隐式绑定
    这个划定规矩平常是看函数挪用的位置是不是有上下文对象，或许说是不是被某个对象具有或许包括。
    经由过程代码来深切明白一下：

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

    代码一样很好明白，函数foo()作为援用属性增加在对象obj内里，但这并不能申明函数foo()属于obj对象。然则从挪用的位置上看，会运用obj这个对象来援用函数foo，那末函数在被挪用的时刻，是被obj这个对象具有或许包括的。
    简朴点说，函数在被挪用的时刻，是经由过程对象来援用的，那末函数里的this就会绑定到这个对象上面。
    再来看一个轻微庞杂一点的例子：

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

    这里的话，我们会发明多了一个obj1这个对象，而且这个对象里有属性a和对象obj。然后我们挪用的时刻会发明效果输出的是obj内里的属性a的值。
    简朴的结论就是，在多层的对象援用属性中，只需最顶层或许说末了一层才会影响挪用位置。

  3. 显式绑定
    经由过程上面隐式绑定的划定规矩引见能够晓得，它是经由过程对象间接绑定this的，那末很明显显式绑定就是直接的，或许说就是强行指定我们想要让this绑定的对象。那末怎样来举行强行绑定呢？
    平常来说，是运用函数的call()和apply()要领（绝大部分函数都邑有这两个要领）。
    这两个要领的作用都是一样的，就是替代this指向。唯一差别的就是吸收参数的要领不一样。apply()要领吸收两个参数，第一个参数是一个对象（也就是我们想要让this指向的新的对象，不填的话就是全局对象），第二个参数一个参数数组。call()要领的话第一个参数跟apply是一样的，然则背面要把通报的参数全部都枚举出来。
    简朴来看个例子：

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

    末了一行代码，函数foo挪用了call要领，强行把this绑定到了obj对象上。

至此，关于this绑定的基础的4种划定规矩就引见得差不多了，实际上有些划定规矩在运用的时刻能够不那末尽善尽美，我们照旧从代码入手：

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

一最先我们能够都邑以为输出的效果应当是2。因为bar这个对象在竖立的时刻挪用了obj内里的foo函数。但实际上只是另一个foo本身的援用。而且bar函数在挪用的时刻是作为自力函数挪用的，跟我们前面讲的默许绑定的划定规矩很相符，所以这里的this就绑定到了全局对象。
这类状况在回调函数里更容易发作，比方下面的代码：

 function foo(){
     console.log(this.a);
 }
 function doFoo(f){
    f();
 }
 var obj = {
    a:2,
    foo:foo
 };
 var a = 1;
 doFoo(obj.foo); //1

末了一行代码实际上就是f = obj.foo，天然效果就跟上面是一样的。
那末有什么要领能够处理这个题目呢？
在显现绑定中，有一个它的变种，我们称之为硬绑定，能够处理上面的题目。
继承看代码：

 function foo(){
     console.log(this.a);
 }
 var obj = {
    a:2
 };
 var bar = function(){
    foo.call(obj);
 }
 bar(); //2
 setTimeout(bar,1000);
 bar.call(window); //2

这段代码诠释了硬绑定的事情道理：它竖立了一个函数bar，然后在函数内里经由过程foo.call(..)强行把this绑定到了obj对象上面。以后只需挪用函数bar，就会挪用函数foo，绑定的值始终不变。

然后我们轻微转变一下，让它变成一个可复用的协助函数：

 function foo(){
     console.log(this.a);
 }
 function bind(f,obj){
     return function(){
         return f.apply(obj,arguments);
     };
 }
 var obj = {
    a:2
 };
 var bar = bind(foo,obj);
 var b = bar(3);  
 console.log(b);  //2

因为硬绑定经常被运用，所以它在ES5的时刻就作为内建东西了：Function.prototype.bind。上面的代码就是bind要领的道理。
bind要领的作用和call和apply一样，都是替代this指向，它的参数也和call一样。不一样的就是bind要领返回的是一个函数。

然后我们要引见一个比较特别的函数，因为它不能依据前面引见的4条划定规矩来推断this的指向。就是ES6中新增的函数：箭头函数（=>）。它是依据外层作用域或许全局作用域来决议this指向的。
看段代码：

function foo(){
    return (a) => {
        console.log(this.a);
    };
}
var obj1 = {
    a:1
};
var obj2 = {
    a:2
};
var bar = foo.call(obj1);
bar.call(obj2);//1

foo()内部竖立的箭头函数会捕捉挪用时foo()的this。因为foo运用了call要领，所以foo()的this绑定到了obj1。然后bar对象被竖立的时刻援用了箭头函数，所以bar的this也被绑定到了obj1上面。而且箭头函数的绑定是没法被修正的。所以末了输出的效果是1而不是2。

末了，虽然我们已相识了this绑定的基础划定规矩，然则假如说我们找到了函数在那里挪用，然后又发明4种划定规矩里有多种划定规矩能够实用，那我们应当挑选哪种呢？

这就触及到了这些划定规矩的优先级：

  1. 起首看是不是有new挪用，假如是的话就绑定到新竖立的对象；
  2. 然后看是不是有call或许apply或许bind挪用，假如是那就绑定到指定对象；
  3. 再以后看是不是由上下文挪用，假如是就绑定到谁人上下文对象；
  4. 末了的话就只剩下默许绑定了（注重严厉形式下是undefined，非严厉形式下绑定到全局对象）。
    原文作者：Uniquec
    原文地址: https://segmentfault.com/a/1190000013991854
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞