Detaillierte Erklärung dieser Bindung in JavaScript

Man kann sagen, dass dies die faszinierendste Funktion in JavaScript ist, genau wie die verschiedenen Zeitformen im High-School-Englisch, wie z. B. Passiv, Vergangenheitsform, Gegenwartsform und Vergangenheitsform, egal wie oft Sie es übersehen , beim nächsten Mal wird es immer noch dasselbe sein. Könnte ein Fehler sein. Dieser Artikel ist von „JavaScript You Don't Know Volume 1“ inspiriert und bietet eine Zusammenfassung davon in Javascript.

Der erste Schritt, um dies zu lernen, besteht darin, zu verstehen, dass dies weder auf die Funktion selbst noch auf den Umfang der Funktion hinweist. Dabei handelt es sich tatsächlich um die Bindung, die beim Aufruf der Funktion auftritt, und wohin sie zeigt, hängt ganz davon ab, wo die Funktion aufgerufen wird.

Standardbindung

In Javascript ist der am häufigsten verwendete Typ von Funktionsaufrufen der unabhängige Funktionsaufruf. Daher kann diese Regel als Standardregel angesehen werden, wenn andere Regeln nicht angewendet werden können. Wenn die Funktion ohne Änderungen aufgerufen wird, also „kaum“ aufgerufen wird, werden die Standardbindungsregeln angewendet und die Standardbindung verweist auf den globalen Bereich.

function sayLocation() { 
    console.log(this.atWhere) 
} 
 
var atWhere = "I am in global" 
 
sayLocation() // 默认绑定，this绑定在全局对象,输出 “I am in global”

Schauen Sie sich ein anderes Beispiel an

var name = "global" 
function person() { 
    console.log(this.name) //  (1) "global" 
      person.name = 'inside' 
    function sayName() { 
        console.log(this.name) // (2) "global"  不是 "inside" 
    } 
    sayName() // 在person函数内部执行sayName函数,this指向的同样是全局的对象 
} 
person()

In diesem Beispiel wird die Personenfunktion im globalen Bereich aufgerufen, sodass diese in Satz (1) an das globale Objekt gebunden ist (Fenster im Browser, global im Knoten), daher ist die natürliche Ausgabe von Satz (1) das Namensattribut eines globalen Objekts, das natürlich „global“ ist. Die Funktion sayName wird innerhalb der Personenfunktion aufgerufen. Dennoch bezieht sich dies in Satz (2) immer noch auf das globale Objekt, auch wenn die Personenfunktion das Namensattribut setzt.

Dies ist die Standardbindungsregel, die in JavaScript am häufigsten vorkommt. Die Bindungsregel ist auch die einfachste der vier Bindungsregeln, das heißt, die Bindung hat eine globale Wirkung .

Strikter Modus in der Standardbindung

Wenn in Javascript der strikte Modus verwendet wird, kann dies nicht an das globale Objekt gebunden werden. Ich nehme immer noch das erste Beispiel, aber dieses Mal füge ich die strikte Modusdeklaration hinzu

'use strict' 
function sayLocation() { 
    console.log(this.atWhere) 
} 
var atWhere = "I am in global" 
sayLocation() 
// Uncaught TypeError: Cannot read property 'atWhere' of undefined

Es ist ersichtlich, dass es im strikten Modus beim Binden an das globale Objekt tatsächlich an gebunden ist Es ist undefiniert, Daher meldet der obige Code einen Fehler.

Implizite Bindung

Wenn eine Funktion aufgerufen wird und die Funktion einen sogenannten „Fußhalt“ hat, d. h. wenn ein Kontextobjekt vorhanden ist, binden die impliziten Bindungsregeln dieses ein die Funktion Set auf dieses Kontextobjekt. Wenn Sie der Meinung sind, dass der obige Absatz nicht einfach genug ist, werfen wir einen Blick auf den Code.

function say() { 
    console.log(this.name) 
} 
var obj1 = { 
    name: "zxt", 
    say: say 
} 
 
var obj2 = { 
    name: "zxt1", 
    say: say 
} 
obj1.say() // zxt 
obj2.say() // zxt

Es ist ganz einfach, nicht wahr? Im obigen Code sind obj1 und obj2 die Ausgangspunkte der sogenannten Say-Funktion. Ein professionellerer Begriff ist das Kontextobjekt. Wenn dieses Kontextobjekt der Funktion zugewiesen wird, verweist dies natürlich auf dieses Kontextobjekt. Dies ist auch ein sehr häufiges Funktionsaufrufmuster.

Der Kontext geht während der impliziten Bindung verloren

function say() { 
    console.log(this.name) 
} 
var name = "global" 
var obj = { 
    name: "inside", 
    say: say 
} 
var alias = obj.say // 设置一个简写   (1)  
alias() // 函数调用 输出"global"  (2)

Sie können sehen, dass die Ausgabe hier „global“ ist. Warum unterscheidet sie sich offensichtlich vom obigen Beispiel? Nur ein Name?

Schauen wir uns zunächst den Code in Satz (1) oben an. Da Funktionen in JavaScript Objekte sind, werden Objekte als Referenz und nicht als Wert übergeben. Daher lautet der Code in Satz (1) nur alias = obj.say = say, d mit dem Objekt obj. Dies wird als „Kontextverlust“ bezeichnet. Abschließend wird die Alias-Funktion ausgeführt, die einfach die Say-Funktion ausführt und „global“ ausgibt.

Explizite Bindung

Explizite Bindung bindet dies, wie der Name schon sagt, explizit an einen Kontext. In JavaScript werden drei explizite Bindungsmethoden bereitgestellt: apply und call,bind. Die Verwendung von apply und call ist grundsätzlich ähnlich. Der Unterschied zwischen ihnen ist:

apply(obj,[arg1,arg2,arg3,...] Die Parameter der aufgerufenen Funktion werden in der Form einer angegeben array

call(obj, arg1, arg2, arg3,...) Die Parameter der aufgerufenen Funktion werden der Reihe nach angegeben

und nach Ausführung der Bindefunktion wird eine neue Funktion zurückgegeben . Das Folgende ist eine Codebeschreibung. 🎜>

// 不带参数 
function speak() { 
    console.log(this.name) 
} 
 
var name = "global" 
var obj1 = { 
    name: 'obj1' 
} 
var obj2 = { 
    name: 'obj2' 
} 
 
speak() // global 等价于speak.call(window) 
speak.call(window) 
 
speak.call(obj1) // obj1 
speak.call(obj2) // obj2

Es ist also ersichtlich, dass die Funktion von apply und call darin besteht, einen Ausführungskontext an die Funktion zu binden, und dieser ist daher explizit innerhalb der Funktion gebunden ist natürlich an das aufgerufene Objekt gebunden

// 带参数 
function count(num1, num2) { 
    console.log(this.a * num1 + num2) 
} 
 
var obj1 = { 
    a: 2 
} 
var obj2 = { 
    a: 3 
} 
 
count.call(obj1, 1, 2) // 4 
count.apply(obj1, [1, 2]) // 4 
 
count.call(obj2, 1, 2) // 5 
count.apply(obj2, [1, 2]) // 5

Das obige Beispiel veranschaulicht den Unterschied in der Verwendung von apply und call.

Die Bindungsfunktion gibt einen gebundenen Ausführungskontext zurück Die angegebene Funktion. Nehmen wir den obigen Code als Beispiel.

// 带参数 
function count(num1, num2) { 
    console.log(this.a * num1 + num2) 
} 
 
var obj1 = { 
    a: 2 
} 
 
var bound1 = count.bind(obj1) // 未指定参数 
bound1(1, 2) // 4 
 
var bound2 = count.bind(obj1, 1) // 指定了一个参数 
bound2(2) // 4  
 
var bound3 = count.bind(obj1, 1, 2) // 指定了两个参数 
bound3() //4 
 
var bound4 = count.bind(obj1, 1, 2, 3) // 指定了多余的参数,多余的参数会被忽略 
bound4() // 4

Die Bind-Methode gibt in dieser Funktion lediglich den Ausführungskontext an, den die zurückgegebene Funktion akzeptieren kann Parameter.

Neue Bindung

Die letzte Bindungsregel, die auftritt, wenn der Konstruktor über den neuen Operator aufgerufen wird, ist, dass es keine gibt Konzept von Klassen in JavaScript wie in anderen Sprachen sind nur gewöhnliche Funktionen, mit der Ausnahme, dass der Funktionsname des Konstruktors mit einem Großbuchstaben beginnt und er über den neuen Operator

aufgerufen werden kann

function Person(name,age) { 
    this.name = name 
    this.age = age 
    console.log("我也只不过是个普通函数") 
} 
Person("zxt",22) // "我也只不过是个普通函数" 
console.log(name) // "zxt" 
console.log(age) // 22 
 
var zxt = new Person("zxt",22) // "我也只不过是个普通函数" 
console.log(zxt.name) // "zxt" 
console.log(zxt.age) // 22

上面这个例子中，首先定义了一个 Person 函数，既可以普通调用，也可以以构造函数的形式的调用。当普通调用时，则按照正常的函数执行，输出一个字符串。 如果是通过一个new操作符,则构造了一个新的对象。那么，接下来我们再看看两种调用方式， this 分别绑定在了何处首先普通调用时，前面已经介绍过，此时应用默认绑定规则，this绑定在了全局对象上，此时全局对象上会分别增加name 和 age 两个属性。当通过new操作符调用时，函数会返回一个对象，从输出结果上来看 this 对象绑定在了这个返回的对象上。

因此，所谓的new绑定是指通过new操作符来调用函数时，会产生一个新对象，并且会把构造函数内的this绑定到这个对象上。

事实上，在javascript中，使用new来调用函数，会自动执行下面的操作。

1.创建一个全新的对象

2.这个新对象会被执行原型连接

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

4.如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

四种绑定的优先级

上面讲述了javascript中四种this绑定规则，这四种绑定规则基本上涵盖了所有函数调用情况。但是如果同时应用了这四种规则中的两种甚至更多，又该是怎么样的一个情况，或者说这四种绑定的优先级顺序又是怎么样的。

首先，很容易理解，默认绑定的优先级是最低的。这是因为只有在无法应用其他this绑定规则的情况下，才会调用默认绑定。那隐式绑定和显式绑定呢?还是上代码吧，代码可从来不会说谎。

function speak() { 
    console.log(this.name) 
} 
 
var obj1 = { 
    name: 'obj1', 
    speak: speak 
} 
var obj2 = { 
    name: 'obj2' 
} 
 
obj1.speak() // obj1 (1) 
obj1.speak.call(obj2) // obj2 (2)

所以在上面代码中，执行了obj1.speak(),speak函数内部的this指向了obj1，因此(1)处代码输出的当然就是obj1，但是当显式绑定了speak函数内的this到obj2上，输出结果就变成了obj2，所有从这个结果可以看出显式绑定的优先级是要高于隐式绑定的。事实上我们可以这么理解obj1.speak.call(obj2)这行代码，obj1.speak只是间接获得了speak函数的引用，这就有点像前面所说的隐式绑定丢失了上下文。好，既然显式绑定的优先级要高于隐式绑定，那么接下来再来比较一下new 绑定和显式绑定。

function foo(something) { 
    this.a = something 
} 
 
var obj1 = {} 
var bar = foo.bind(obj1)  // 返回一个新函数bar，这个新函数内的this指向了obj1  (1) 
bar(2) // this绑定在了Obj1上，所以obj1.a === 2 
console.log(obj1.a) 
 
var baz = new bar(3)  // 调用new 操作符后，bar函数的this指向了返回的新实例baz  (2) 
 
console.log(obj1.a) 
console.log(baz.a)

我们可以看到，在(1)处，bar函数内部的this原本指向的是obj1，但是在(2)处，由于经过了new操作符调用，bar函数内部的this却重新指向了返回的实例，这就可以说明new 绑定的优先级是要高于显式绑定的。

至此，四种绑定规则的优先级排序就已经得出了,分别是

new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定

箭头函数中的this绑定

箭头函数是ES6里一个重要的特性。

箭头函数的this是根据外层的(函数或者全局)作用域来决定的。函数体内的this对象指的是定义时所在的对象，而不是之前介绍的调用时绑定的对象。举一个例子

var a = 1 
var foo = () => { 
    console.log(this.a) // 定义在全局对象中，因此this绑定在全局作用域 
} 
 
var obj = { 
    a: 2 
} 
foo() // 1 ,在全局对象中调用 
foo.call(obj) // 1,显示绑定，由obj对象来调用，但根本不影响结果

从上面这个例子看出，箭头函数的 this 强制性的绑定在了箭头函数定义时所在的作用域，而且无法通过显示绑定，如apply,call方法来修改。在来看下面这个例子

// 定义一个构造函数 
function Person(name,age) { 
    this.name = name 
    this.age = age  
    this.speak = function (){ 
        console.log(this.name) 
        // 普通函数（非箭头函数),this绑定在调用时的作用域 
    } 
    this.bornYear = () => { 
        // 本文写于2016年，因此new Date().getFullYear()得到的是2016 
        // 箭头函数，this绑定在实例内部 
        console.log(new Date().getFullYear() - this.age) 
        } 
    } 
} 
 
var zxt = new Person("zxt",22) 
 
zxt.speak() // "zxt" 
zxt.bornYear() // 1994 
 
// 到这里应该大家应该都没什么问题 
 
var xiaoMing = { 
    name: "xiaoming", 
    age: 18  // 小明永远18岁 
} 
 
zxt.speak.call(xiaoMing) 
// "xiaoming" this绑定的是xiaoMing这个对象 
zxt.bornYear.call(xiaoMing) 
// 1994 而不是 1998,这是因为this永远绑定的是zxt这个实例

因此 ES6 的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this ，具体来说就是，箭头函数会继承 外层函数调用的this绑定 ，而无论外层函数的this绑定到哪里。

小结

以上就是javascript中所有this绑定的情况，在es6之前，前面所说的四种绑定规则可以涵盖任何的函数调用情况，es6标准实施以后，对于函数的扩展新增了箭头函数，与之前不同的是，箭头函数的作用域位于箭头函数定义时所在的作用域。

而对于之前的四种绑定规则来说，掌握每种规则的调用条件就能很好的理解this到底是绑定在了哪个作用域。