Heim > Web-Frontend > js-Tutorial > JS-Klon-, Attribut-, Array-, Objekt-, Funktionsinstanzanalyse

JS-Klon-, Attribut-, Array-, Objekt-, Funktionsinstanzanalyse

高洛峰
Freigeben: 2016-12-05 10:13:56
Original
1023 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben das JS-Klonen, Attribute, Arrays, Objekte und Funktionen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<script type="text/javascript">
/* 克隆原型得到对象 */
function clone(object) {
  function F() {}
  F.prototype = object;
  return new F;
}
var Person = {
 name: &#39;default name&#39;,
 getName: function() {
  return this.name;
 }
};
var reader = clone(Person);
console.log(reader.getName()); // This will output &#39;default name&#39;.
reader.name = &#39;John Smith&#39;;
console.log(reader.getName()); // This will now output &#39;John Smith&#39;.
/* Author Prototype Object. */
var Author = clone(Person);
Author.books = []; // 书数组
Author.getBooks = function() {
 return this.books;
}
var author = [];
author[0] = clone(Author);
author[0].name = &#39;Dustin Diaz&#39;;
author[0].books = [&#39;JavaScript Design Patterns&#39;];
author[1] = clone(Author);
author[1].name = &#39;Ross Harmes&#39;;
author[1].books = [&#39;JavaScript Design Patterns&#39;,&#39;PHP&#39;,&#39;Mysql&#39;];
console.log(author[0].getName());
console.log(author[0].getBooks());
console.log(author[1].getName());
console.log(author[1].getBooks());
</script>
Nach dem Login kopieren

Das console.log hier ist sehr interessant, interessanter als die Warnung. Alert kann nicht alle Daten abrufen und muss einzeln angezeigt werden eins.

Die Array-Definition von js ist ebenfalls sehr interessant.

Weiteres Upgrade

<script type="text/javascript">
/* 克隆原型得到对象 */
function clone(object) {
  function F() {}
  F.prototype = object;
  return new F;
}
var Person = {
 name: &#39;default name&#39;,
 getName: function() {
  return this.name;
 }
};
var Author = clone(Person);
Author.books = []; // 书数组
Author.getBooks = function() {
 return this.books;
}
var authorClone = clone(Author);
console.log(authorClone.name); // string &#39;default name&#39;.
authorClone.name = &#39;new name&#39;; // 重新赋值
console.log(authorClone.name); // Now linked to the primative authorClone.name, which
// is the string &#39;new name&#39;.
console.log(Author.getName()); // 没有改变,任然是 &#39;default name&#39;
console.log(Author.getBooks()); // 空的
authorClone.books.push(&#39;new book&#39;); // Author被改了
authorClone.books.push(&#39;new new book&#39;); // Author被改了
console.log(Author.getBooks()); // array &#39;new book&#39;
console.log(authorClone.getBooks()); // array &#39;new book&#39;
authorClone.books = []; // 定义了属于自己的books数组
authorClone.books.push(&#39;new book2&#39;); // We are now modifying that new array.
authorClone.books.push(&#39;new book3&#39;);
authorClone.books.push(&#39;new book4&#39;);
console.log(authorClone.getBooks());
console.log(Author.getBooks());
var CompoundObject = {
 string1: &#39;default value&#39;,
 childObject: {
  bool: true,
  num: 10
 },
 getChild: function() { // 返回对象Object
  return this.childObject;
 }
}
var compoundObjectClone = clone(CompoundObject);
compoundObjectClone.childObject.num = 5; // 不好的方式
compoundObjectClone.childObject = { // 好一点的方式
 bool: true,
 num: 5
};
console.log(compoundObjectClone.getChild());
</script>
Nach dem Login kopieren


Verwandte Etiketten:
js
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