Sprechen Sie über vielfältige Verständnisse von Funktionen in JavaScript_Javascript-Kenntnissen

Funktion in JavaScript hat mehrere Bedeutungen. Es kann sich um einen Konstruktor (Konstruktor) handeln, der die Rolle einer Objektvorlage spielt; kann eine Methode des Objekts sein (Methode), die für das Senden von Nachrichten an das Objekt verantwortlich ist . kann auch eine Funktion sein, ja, es ist eine Funktion, eine Funktion, die unabhängig existiert und ohne Beziehung zum Objekt aufgerufen werden kann.

Aufgrund der Kompromittierung des Sprachdesigners wurden JavaScript einige klassenbezogene Funktionen hinzugefügt, damit JavaScript wie Java aussieht und „objektorientiert“ sein kann. Obwohl JavaScript neu hinzugefügt wurde, gibt es keine Klasse (ES hat sie hinzugefügt). Schließlich übernimmt die Funktion vorübergehend die Aufgabe der Klasse.

Semantik 1: Funktion als Konstruktor

/**
 * 页签
 *
 * @class Tab
 * @param nav {string} 页签标题的class
 * @param content {string} 页面内容的class
 *
 */
function Tab(nav, content) {
  this.nav = nav;
  this.content = content;
}
Tab.prototype.getNav = function() {
  return this.nav;
};
Tab.prototype.setNav = function(nav) {
  this.nav = nav;
};
Tab.prototype.add = function() {
};
// 创建对象
var tab = new Tab('tab-nav', 'tab-content');

Hier wird eine Klassenregisterkarte definiert und eine Objektregisterkarte erstellt. Funktion, this, new werden oben verwendet. Dies sind neue Schlüsselwörter in gängigen objektorientierten Sprachen, und die Funktion spielt hier die Rolle der Klasse in traditionellen objektorientierten Sprachen. Natürlich folgt die Benennung von Bezeichnern zu diesem Zeitpunkt im Allgemeinen der Regel der „Großschreibung des ersten Buchstabens“.

Semantik 2: Funktion als Objektmethode

Da Objekte ohne Klassen direkt in JavaScript erstellt werden können, gibt es zwei Möglichkeiten, Objekten Methoden hinzuzufügen. Die erste besteht darin, zuerst die Klasse zu definieren und die Methoden an den Prototyp zu hängen, wie z. B. Tab im obigen Beispiel. Der Prototyp verfügt über die Methoden getNav, setNav und add. Es gibt eine andere Möglichkeit, Methoden direkt innerhalb der Funktion hinzuzufügen.

function Tab(nav, content) {
  this.nav = nav
  this.content = content
  this.getNav = function() {
    // ...
  }
  this.setNav = function() {
    // ...
  }
  this.add = function() {
    // ...
  }
}

Hier ist Tab die Semantik, this.getNav/this.setNav/this.add ist die Semantik als Methode des Objekts. Darüber hinaus können Objekte und deren Methoden direkt definiert werden

var tab = {
  nav: '',
  content: '',
  getNav: function() {
    // ...
  },
  setNav: function() {
    // ...
  },
  add: function() {
    // ...
  }
}

tab.getNav/tab.setNav/tab.add sind semantisch, als Methoden des Objekts tab.

Semantik 3: Als unabhängige Funktion

/*
 * 判断对象是否是一个空对象
 * @param obj {Object}
 * @return {boolean}
 */
function isEmpty(obj) {
  for (var a in obj) {
    return false
  }
  return true
}
// 定义一个模块
~function() {
  // 辅助函数
  function now() {
    return (new Date).getTime()
  }
  // 模块逻辑...
}();
// 采用CommonJS规范的方式定义一个模块
define(require, exports, moduel) {
  // 辅助函数
  function now() {
    return (new Date).getTime()
  }
  // 模块逻辑...
})

isEmpty existiert als globale Funktion und existiert jetzt in der Moduldefinition als lokale Funktion. Ob isEmpty oder now, die Funktion bezieht sich hier auf eine Funktion. Sie hängt nicht von Objekten und Klassen ab und kann unabhängig aufgerufen werden.

Semantik 4: Anonymes Funktionsdefinitionsmodul

// 全局命名空间
var RUI = {}
// ajax.js
~function(R) {
  // 辅助函数...
  ajax = {
    request: function() {
      // ...
    }
    getJSON: function() {
      // ...
    }
    ...
  }
  // 暴露出模块给 R
  R.ajax = ajax
}(RUI);
// event.js
~function(R) {
  // 辅助函数...
  // 事件模块定义...
  // 暴露出模块给 R
  R.event = event
}(RUI);
// dom.js
~function(R) {
  // 辅助函数...
  // DON模块定义...
  // 暴露出模块给 R
  R.dom = dom
}(RUI);

Nachdem die anonyme Funktion hier ausgeführt wurde, wird das API-Objekt der RUI ausgesetzt. Unabhängig davon, wie viel Arbeit in der anonymen Funktion ausgeführt wird, ist es außerhalb der entsprechenden anonymen Funktion nicht sichtbar und es besteht keine Notwendigkeit, darauf zu achten dazu. Das letzte Problem sind die öffentlichen API-Methoden. Solange Sie die Parameter und die Bedeutung dieser Methoden verstehen, können Sie sie sofort verwenden.

Semantik 5: Anonyme Funktionen verarbeiten bestimmte Spezialeffekte, wie z. B. die Verarbeitung einiger Daten, ohne zu viele Variablen offenzulegen

// 判断IE版本的hack方式
var IEVersion = function() {
  var undef, v = 
  var div = document.createElement('div')
  var all = div.getElementsByTagName('i')
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[]
  );
  return v > &#63; v : undef
}();

Am Ende gibt es nur eine Ergebnis-IEVersion, und einige lokale Variablen, die in der anonymen Funktion verwendet werden, können alle isoliert werden. Diese Methode ist für einige temporäre Datenverarbeitungen sehr effektiv und kompakt.

Zusammenfassung:

JavaScript wurde von Eich in wenigen Tagen entwickelt. Es war ursprünglich eine kurze und kompakte Skript-/Funktionssprache. Aus Marketinggründen wurden einige Java-ähnliche objektorientierte Funktionen hinzugefügt (Konstruktor, neu). ). This und new werden kopiert, aber die Funktionen der Klasse werden an die Funktion übergeben. Daher sind JavaScript-Funktionen verwirrend. Manchmal werden sie zum Definieren von Klassen verwendet, manchmal werden sie als Methoden oder Funktionen verwendet. Einige Leute haben auch entdeckt, dass es zum Definieren von Modulen usw. verwendet werden kann.

All dies endete mit der Einführung von ES. Das reservierte Wort „Klasse“ wurde in ES endlich implementiert. Es wird empfohlen, Klasse zum Definieren von Klassen zu verwenden. Es gibt auch das Schlüsselwort „extend“, das im Grunde die „Klassenvererbung“ herbeiführt. Douglas bemerkte auf der Nordic.js-Konferenz, dass eines der schlechtesten ES-Designs die Verwendung von this und new sei. Dies zeigt, dass er immer noch die Verwendung funktionaler Sprache zum Schreiben von JavaScript bevorzugt -orientiert nach Klassen.

Der obige Inhalt ist mein persönliches vielfältiges Verständnis der Funktionen in JavaScript. Freunde mit unterschiedlichen Verständnissen sind herzlich eingeladen, sich auszutauschen und gemeinsam zu lernen und Fortschritte zu machen.