Heim > Web-Frontend > js-Tutorial > Vier Modi dieses Wertes in JS

Vier Modi dieses Wertes in JS

小云云
Freigeben: 2018-02-24 14:22:34
Original
1528 Leute haben es durchsucht


Dieser Artikel teilt hauptsächlich die vier Modi dieses Werts in JS und hofft, allen zu helfen.

1. Einführung in Funktionen

In jeder Funktion in JavaScript, mit Ausnahme der Anweisung Ming definiert sind, verfügt jede Funktion auch über zwei zusätzliche Parameter: this<span style="font-size: 14px;">this</span> und <code><span style="font-size: 14px;">arguments</span>Argumente.

Parameter<code><span style="font-size: 14px;">arguments</span><span style="font-size: 14px;">Argumente</span><span style="font-size: 14px;">parameters</span> ist eine Variable vom Typ Array. Der Wert im Array ist das, was übergeben wird, wenn die Funktion wird tatsächlich aufgerufen. Beim Definieren einer Funktion gibt es formale Parameter der Funktion Parameter<code><span style="font-size: 14px;">arguments</span>. Beim Aufruf der Funktion werden die tatsächlichen Parameter verwendet <span style="font-size: 14px;">parameters</span>Argumente Wenn die Anzahl der nicht mit der Anzahl der formalen Parameter <span style="font-size: 14px;">undefined</span><span style="font-size: 14px;">Parameters</span>

übereinstimmt, liegt kein Laufzeitfehler vor wird auftreten. Wenn zu viele tatsächliche Parameter vorhanden sind, werden die überschüssigen Parameterwerte ignoriert. Wenn zu wenige tatsächliche Parameterwerte vorhanden sind, werden die fehlenden Werte durch

<span style="font-size: 14px;">undefiniert</span><span style="font-size: 14px;">this</span> ersetzt. Bei der Ausführung der Funktion findet keine Typprüfung der Parameterwerte statt, was bedeutet, dass jeder Werttyp an jeden Parameter übergeben werden kann. <span style="font-size: 14px;">new</span>Parameter<span style="font-size: 14px;">this</span>dies ist ein sehr wichtiges Konzept in objektorientierten Programmiersprachen, es bezieht sich auf bestimmte An Die Instanz eines Klassenobjekts ist das spezifische Objekt selbst, das aus der Klasse

<h1>new<span style="font-size: 14px;"></span> </h1> hervorgeht. Der Wert von <p>this<span style="font-size: 14px;"></span></p> in JavaScript hängt jedoch vom Aufrufmodus ab. In JavaScript gibt es vier Aufrufmodi: Methodenaufrufmodus, Funktionsaufrufmodus, Konstruktoraufrufmodus und Anwendungsaufrufmodus.
<span style="font-size: 14px;">var obj = {    value: 1,<br/>    add: function() {        // 这里的 this 是绑定在 obj 这个对象上的<br/>        this.value += 1;        return this.value;<br/>    }<br/>};<br/>console.info(obj.add()); // 2console.info(obj.add()); // 3<br/></span>
Nach dem Login kopieren

<span style="font-size: 14px;">obj.add</span>2. Methodenaufrufmodus <span style="font-size: 14px;">this</span>Wenn eine Funktion für ein Attribut eines Objekts definiert ist, dann sagen wir, dass die Funktion das Objekt ist eine Methode. Wenn diese Methode aufgerufen wird, zeigt dies innerhalb der Funktion auf das Objekt. Das Beispiel lautet wie folgt: <span style="font-size: 14px;">obj</span></strong>obj.add</span><span style="font-size: 14px;">this</span>Methoden können über </span>dieses</p>

auf ihre eigenen Objekte </span>obj</h1>

zugreifen, So kann es den Wert vom Objekt abrufen oder das Objekt ändern. Die Bindung dieses an das Objekt erfolgt beim Aufruf der Methode. Methoden, die über

<blockquote>dies<p> den Kontext des Objekts abrufen können, zu dem sie gehören, werden als öffentliche Methoden bezeichnet.

<span style="font-size: 14px;">var a = 1;var add = function(b) {<br/>  // 这里的 this 是绑定在全局作用于 window 上的<br/>  return this.a + b;<br/>};<br/>console.info(add(2)); // 3<br/></span>
Nach dem Login kopieren
3. Funktionsaufrufmodus

Wenn eine Funktion keine Eigenschaft eines Objekts ist, wird sie als Funktion aufgerufen.

<span style="font-size: 14px;">var a = 1;var obj = {<br/>  a: 2,<br/>  add: function(b) {<br/><br/>    var innerAdd = function(innerB) {<br/>      // 这里的 this 绑定的还是 window 对象上的 this<br/>      return this.a + innerB;<br/>    };<br/>    console.info(innerAdd(0)); // 1<br/>    // 这里的 this 是绑定在 obj 对象上的<br/>    return this.a + b;<br/>  }<br/>};<br/>console.info(obj.add(0)); // 2<br/></span>
Nach dem Login kopieren

Beispiel 1

Beispiel 2

<span style="font-size: 14px;">var a = 1;var obj = {<br/>  a: 2,<br/>  add: function(b) {<br/>    // 将绑定在 obj 对象上的 this 赋值给变量 that<br/>    var that = this;    var innerAdd = function(innerB) {<br/>      // 这里调用的是变量 that,这个 that 是绑定在 obj 对象上的<br/>      return that.a + innerB;<br/>    };<br/>    console.info(innerAdd(0)); // 2<br/>    // 这里的 this 是绑定在 obj 对象上的<br/>    return this.a + b;<br/>  }<br/>};<br/>console.info(obj.add(0)); // 2<br/></span>
Nach dem Login kopieren

Wie aus den beiden obigen Beispielen ersichtlich ist, wird beim Aufruf einer Funktion in diesem Modus diese an das globale Objekt gebunden. Wenn wir nach dem Methodenaufrufmuster

argumentieren, sollte dies hier an die externe Funktion gebunden sein, aber dieser Konstruktionsfehler ist nicht unlösbar. Wir können dies der externen Funktion einer Variablen zuweisen. Das folgende Beispiel:

<span style="font-size: 14px;">new</span>Beispiel 3<span style="font-size: 14px;">prototype</span>

<🎜>Vier <🎜><🎜>Wenn Sie eine Funktion mit <🎜><🎜>new<🎜><🎜> aufrufen, wird intern ein mit der Funktion verbundenes <🎜>< erstellt Objekt des Code><🎜>prototype<🎜><🎜>-Mitglieds, und dieses wird an dieses neue Objekt gebunden. <🎜><🎜>

如果函数定义时内部存在<span style="font-size: 14px;">return</span>关键词,这时return 出去的就是<span style="font-size: 14px;">this</span>(新创建的对象)。

<span style="font-size: 14px;">// 定义一个 Person 函数(类)var Person = function(name) {  // 这里的 this 绑定的就是 new 出来的那个实例对象<br/>  this.name = name;<br/>};// 定义 Person 函数(类)的原型对象Person.prototype = {<br/>  run: function() {    /**<br/>    * 这里的 this 并没有绑定在 Person.prototype 对象上<br/>    * 而是绑定在 new 出来的那个实例对象上<br/>    */<br/>    console.info(this.name + &#39;的 run 方法。&#39;);<br/>  }<br/>};var lily = new Person(&#39;lily&#39;);<br/>lily.run(); // lily的 run 方法。<br/></span>
Nach dem Login kopieren

提示:一个函数,如果定义的目的就是结合 new 前缀来调用,那它就被称为构造函数。并且按照约定,它们定义的函数名以大写字母开头。

五、apply调用模式

因为JavaScript是一门函数式的面向对象编程语言,所以函数也可以拥有方法,apply就是<span style="font-size: 14px;">Function.prototype</span>上的一个方法。

apply方法让我们构建一个参数数组传递给调用函数,它还可以容许我们选择this的值。apply方法接受两个参数,第一个是要绑定 this 的值,第二个就是这个函数执行时的实参 参数 数组了。

例一

<span style="font-size: 14px;">var add = function(a, b) {<br/>  return a + b;<br/>};var result = add.apply(null, [1, 2]);<br/>console.info(result); // 3<br/></span>
Nach dem Login kopieren

例二

<span style="font-size: 14px;">var obj = {<br/>  name: &#39;obj&#39;,<br/>  introduction: function() {<br/>    console.info(&#39;My name is &#39; + this.name);<br/>  }<br/>};<br/>obj.introduction.apply(obj, []); // My name is objvar anotherObj = {<br/>  name: &#39;anotherObj&#39;};<br/><br/>obj.introduction.apply(anotherObj, []); // My name is anotherObj<br/></span>
Nach dem Login kopieren

总结:以上就是JavaScript中用到this的几种情况了,在面向对象中搞清楚this的指向是非常重要的,在JavaScript中也同等重要。

相关推荐:

javascript函数中的this的四种绑定形式

JS中的this、apply、call、bind实例分享

html的标签中的this应该如何使用

Das obige ist der detaillierte Inhalt vonVier Modi dieses Wertes in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage