Eine Reise zum Erlernen der Abschlüsse, Prototypen und anonymen Funktionen von JavaScript

In diesem Artikel werden JavaScript-Abschlüsse, Prototypen und anonyme Funktionen anhand von Beispielen vorgestellt. Einzelheiten finden Sie weiter unten.

1. Über Abschlüsse

Erforderliche Kenntnisse, um Abschlüsse zu verstehen

1. Umfang der Variablen

Beispiel 1:

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA(); //Führen Sie diese Funktion aus

Beispiel 2:

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  return readC;
}
alert(c); //error c is not defined.

Hinweis: Wenn Sie die Variable c innerhalb einer Funktion deklarieren, achten Sie darauf, var hinzuzufügen, sonst wird c zu einer globalen Variablen

Damit globale Variablen innerhalb der Funktion sichtbar sind , die lokalen Variablen innerhalb der Funktion sind für die Außenwelt unsichtbar
Der Bereich von js ist verkettet. Die Variablen im übergeordneten Objekt sind für das untergeordnete Objekt immer sichtbar, die Objekte des untergeordneten Objekts sind jedoch für das übergeordnete Objekt nicht sichtbar Objekt
Wenn wir interne Variablen innerhalb der Funktion erhalten möchten

Es gibt also Beispiel 3:

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

Der Abschluss ist sehr ähnlich und es gibt eine Variation auf dieser Grundlage erstellt

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

Hinweis:

1. Verwenden Sie Verschlüsse mit Vorsicht und achten Sie auf die Speichernutzung, denn Dadurch wird der Status der übergeordneten Funktion gespeichert
2. Sie können den Wert der internen Variablen der übergeordneten Funktion nicht ändern

Abschluss verstehen

Hinweis: Dies bezieht sich auf das Objekt, zu dem die Funktion, die sie enthält, gehört, wenn sie ausgeführt wird

Beispiel 1:

var name = "The Window";

var object = {
  name : "My Object",

　　getNameFunc : function(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
　　  return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window
　　　　  return this.name;
　　　　};
　　}
};
console.log(object.getNameFunc()()); //the window

Beispiel 2:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){
    var that = this;
  　　return function(){
  　　  return that.name;
  　　};

  }
};
console.log(object.getNameFunc()());  //My Object

2. Anonyme Funktion

Definieren Sie direkt eine anonyme Funktion und rufen Sie sie dann auf Die anonyme Funktion. Diese Form ist in der Definition von JQuery-Plugins sehr verbreitet

1. Übergeben Sie zunächst eine anonyme Funktion und führen Sie sie dann aus

( function(){
  console.log('excute self');
}) ();

2. Durch Priorisieren von Ausdrücken, da Javascript Ausdrücke ausführt. Es geht von der Innenseite der Klammern zur Außenseite, sodass Sie die Klammern verwenden können, um die Ausführung der deklarierten Funktion zu erzwingen

(
  function () {
    alert(2);
  }
  ()
);

3. Void-Operator Verwenden Sie den Void-Operator, um einen einzelnen Operanden auszuführen, der nicht in Klammern eingeschlossen ist

void function(){ console.log('void') } ();

3. Über den Prototyp

Prototyp-Prototyp

Um den Prototyp in js zu verstehen, müssen Sie zuerst Sie müssen das objektorientierte Design von js verstehen

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

Die Instanzobjektmethode kann nur wie folgt sein: new People('leon').introduce(); ruft die statische Methode auf

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

Prototypmethode des Objekts der Klasse

, da sie vor der Verwendung initialisiert werden muss

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

Prototype-Methoden können nur von Objekten dieser Klasse aufgerufen werden

A.prototype = new B();

Prototype Es sieht sehr nach Vererbung aus, ist es aber nicht. Es ähnelt eher einem Klon und ist genauer.

Wenn es in der übergeordneten Klasse und der untergeordneten Klasse Attribute mit demselben Namen gibt, übernehmen Sie das Prinzip der Nähe. Wenn Sie es nicht finden können, gehen Sie eine Ebene nach der anderen nach oben . Finden Sie, wenn Sie das Attribut zum Aufrufen des Vorgesetzten angeben möchten, verwenden Sie die Aufrufmethode

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

Der obige Inhalt ist die Reise zum Erlernen von JavaScript-Abschlüssen, Prototypen und anonymen Funktionen Vom Herausgeber geteilt, ich hoffe, es ist für alle nützlich. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!