Heim  >  Artikel  >  Web-Frontend  >  Gemeinsames JavaScript-Grundwissen zur Verstärkung des Lernens_Javascript-Fähigkeiten

Gemeinsames JavaScript-Grundwissen zur Verstärkung des Lernens_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:26:581204Durchsuche

Lassen Sie uns zunächst eine offiziellere Textbeschreibung verwenden, um JavaScript zu erklären:

JavaScript ist eine wörtliche Skriptsprache. Es handelt sich um eine dynamisch typisierte, schwach typisierte, prototypbasierte Sprache mit integrierter Unterstützung für Typen. Sein Interpreter heißt JavaScript-Engine , ist Teil des Browsers und wird häufig in clientseitigen Skriptsprachen verwendet. Er wurde erstmals in HTML (einer Anwendung unter dem Standard Universal Markup) verwendet Sprache). Wird auf Webseiten verwendet, um dynamische Funktionen zu HTML-Webseiten hinzuzufügen.
JavaScript hat die folgenden Eigenschaften:

  • · Skriptsprache. JavaScript ist eine interpretierte Skriptsprache. Sprachen wie C und C werden zuerst kompiliert und dann ausgeführt, während JavaScript während der Ausführung des Programms Zeile für Zeile interpretiert wird.
  • · Objektbasiert. JavaScript ist eine objektbasierte Skriptsprache, die nicht nur Objekte erstellen, sondern auch vorhandene Objekte verwenden kann.
  • · Einfach. Die JavaScript-Sprache verwendet schwach typisierte Variablentypen und stellt keine strengen Anforderungen an die verwendeten Datentypen. Es handelt sich um eine Skriptsprache, die auf den grundlegenden Anweisungen und Steuerelementen von Java basiert und deren Design einfach und kompakt ist.
  • · Dynamisch. JavaScript ist eine ereignisgesteuerte Skriptsprache, die auf Benutzereingaben reagieren kann, ohne einen Webserver zu durchlaufen. Beim Besuch einer Webseite kann JavaScript direkt auf diese Ereignisse reagieren, wenn die Maus angeklickt, nach oben oder unten bewegt oder im Fenster bewegt wird.
  • · Plattformübergreifend. Die Skriptsprache JavaScript ist nicht vom Betriebssystem abhängig und erfordert lediglich Browserunterstützung. Daher kann ein JavaScript-Skript nach dem Schreiben auf jedem Computer zur Verwendung bereitgestellt werden, sofern der Browser auf dem Computer die JavaScript-Skriptsprache unterstützt. Derzeit wird JavaScript von den meisten Browsern unterstützt.

JavaScript besteht aus folgenden Teilen:

  • ·ECMAScript beschreibt die Syntax und die grundlegenden Objekte der Sprache.
  • · Das Document Object Model (DOM) beschreibt die Methoden und Schnittstellen zur Verarbeitung von Webinhalten.
  • · Browser Object Model (BOM), das die Methoden und Schnittstellen für die Interaktion mit dem Browser beschreibt.

Welche Datentypen gibt es in JavaScript?

  • · Objektobjekt umfasst Funktion, Zeichenfolge, Array, Objekt, Datum usw.
  • · Zeichenfolge
  • ·Nummer
  • · Boolescher Wert
  • · null
  • · undefiniert

Der folgende Teil des Codes beweist das oben Gesagte:
String und Number sind Objekte, String und Number sind unterschiedliche Datenformate...

 var str = "abc";
 var Str = new String("abc");
 var num = 100;
 var Num = new Number(100);
 console.log(typeof str, typeof Str, typeof num, typeof Num); // string object number object

Was ist die Objektprototypkette?
Wenn wir ein neues Objekt verwenden (mit dem Konstruktor erstellt) oder ein Objekt mit Object.create erstellen, verfügt das Objekt über einen Prototyp und eine Prototypenkette.
Beispiel: Wir erstellen einen Konstruktor _obj und verwenden dann _obj, um ein neues obj zu erstellen. Dann lautet die Prototypenkette zu diesem Zeitpunkt: obj → _obj → Object.prototype → null.
Lassen Sie es uns durch Code veranschaulichen:

 function _obj(){};
 _obj.prototype.name = "野兽"; //每个函数都包含一个prototype属性,这个属性指向一个对象的引用,这个对象就是“原型对象”。
 _obj.prototype.age = 21;
 _obj.prototype.sayHello = function(){
   console.log("Hello "+this.name);
 };
 var obj = new _obj();
 console.log(obj); //_obj{} 而其的__proto__里包含了_obj里的各个属性,包括name,age,sayHello 
 console.log(obj.__proto__ == _obj.prototype); //true
 obj.sayHello(); // Hello 野兽
 console.log(Object.prototype.__proto__); // null 当我们追究到Object(也就是object的源头时)其指向的是null

Es ist zu beachten, dass die Prototypkette von Object.create(null) direkt null ist, was bedeutet, dass die Prototypkette sehr kurz ist...

Wie verwende ich den Bereich in JavaScript?
Wenn wir var verwenden, um eine Variable in JavaScript zu deklarieren, fügen wir dem Objekt, auf das der Bereich zeigt, tatsächlich ein Attribut und einen Attributwert hinzu.
In JavaScript gibt es keinen Bereich auf Blockebene. Im aktuellen Bereich deklarierte Variablen sind nur innerhalb des aktuellen Bereichs und Funktionen innerhalb des aktuellen Bereichs verfügbar, während innerhalb einer Funktion deklarierte Variablen nur innerhalb der Funktion verfügbar sind (wenn keine Operation ausgeführt wird). Wenn Sie diese Variable außerhalb der Funktion aufrufen, wird ein nicht definierter Fehler gemeldet.
Lassen Sie uns den Code durchgehen, um den Umfang zu verstehen:

 var firstNum = 1;
 ~function(){
   var secondNum = 2;
   console.log("在里面打印:"+firstNum ,secondNum); // 在里面打印:1 2
 }();
 console.log("在外面打印:"+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…)

Bereiche haben auch Bereichsketten:

 var firstNum = 1;
 console.log("在最外层打印:"+firstNum); // 在最外层打印:1
 ~function(){
   var secondNum = 2;
   console.log("在中间层打印:"+firstNum,secondNum); // 在中间层打印:1 2
   ~function(){
     var thirdNum = 3;
     console.log("在最里层打印:"+firstNum,secondNum,thirdNum); // 在最里层打印:1 2 3
   }();
   console.log("在中间层打印:"+firstNum,secondNum,thirdNum); // Uncaught ReferenceError: thirdNum is not defined(…)
 }();
 console,log("在最外层打印:"+firstNum,secondNum,thirdNum); // 由于上面已经报错,而浏览器执行JavaScript又是单线程的,所以压根没执行到这句...

Mit anderen Worten, im aktuellen Bereich deklarierte Variablen sind weiterhin in ihren Unterbereichen verfügbar, was cool ist, haha...

Was ist eine Schließung? Wie wird gespielt?
Die Ausführung der Funktion hängt vom Variablenbereich ab. Dieser Bereich wird bei der Definition der Funktion festgelegt, nicht beim Aufruf. Um diese Art der lexikalischen Festlegung des Gültigkeitsbereichs zu erreichen, enthält der interne Status eines JavaScript-Funktionsobjekts nicht nur den logischen Code der Funktion, sondern muss auch auf die aktuelle Bereichskette verweisen. Funktionsobjekte können über Bereichsketten miteinander in Beziehung gesetzt werden, und Variablen innerhalb des Funktionskörpers können im Bereich der Funktion gespeichert werden. Diese Funktion ist eigentlich „Abschluss“.
Schauen wir uns den Code weiter an:

 function counter(){
  var num = 0;
  return {
   count : function(){ return num++; },
   reset : function(){ return num = 0; }
  }
 };
 var firstNum = counter();
 var secondNum = counter();
 console.log(firstNum.count()); // 0
 console.log(secondNum.count()); // 0
 firstNum.reset();
 console.log(firstNum.count()); // 0 num已被重置,所以返回的为0
 console.log(secondNum.count()); // 1 num未被重置,所以返回的是1
 console.log(firstNum,secondNum); // 都为 Object{ count:function(),reset:function(),__proto__} 并且并不能在其中找到counter里var的n,这也实现了函数里的私有变量,只将需要暴露的两个方法给暴露在外。

闭包用的多的两个作用:读取函数内部的变量值;让这些变量值始终保存着(在内存中)。
同时需要注意的是:闭包慎用,不滥用,不乱用,由于函数内部的变量都被保存在内存中,会导致内存消耗大。

JavaScript中的this
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。
全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身
验证代码:

 console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 全局下执行console.log,所以此处指向的是Window
 ~function seeThis(){
  console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 由于我是在全局下写的这个函数,所以此处指向的还是Window
 }();
 var obj = {
  name:"野兽",
  showThis:function(){
   console.log(this); // Object {name: "野兽",showThis:function(),__proto__} 此处打印的是对象本身
  }
 };
 obj.showThis();

arguments
在Javascript函数体内,arguments像数组一样(并不是真的数组),有length属性,可以代表传给函数的参数的个数。
简单来说,arguments函数执行时所传的实际参数。
比如:arguments[0]表示传入第一个参数。
用代码验证:

 function argumentsTest(){
  console.log(arguments[0]?arguments[0]:"Hello World",arguments[1]?arguments[1]:"你好 世界")
 };
 argumentsTest(); // Hello World 你好 世界
 argumentsTest("This is firstValue => arguments[0].","This is secondValue => arguments[1]."); // This is firstValue => arguments[0]. This is secondValue => arguments[1].

暂时就为大家分享这些JavaScript常用基础知识,希望对大家进一步学习掌握javascript程序设计有所帮助。

Stellungnahme:
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