JS克隆，属性，数组，对象，函数实例分析

2019-11-19 18:48:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS克隆，属性，数组，对象，函数。分享给大家供大家参考，具体如下：

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

结果

这里的console.log很有意思，比alert有意思，alert不能获取全部数据，需要一个个弹出。

js的数组定义也很有意思。

进一步升级

<script type="text/javascript">/* 克隆原型得到对象 */function clone(object) {  function F() {}  F.prototype = object;  return new F;}var Person = { name: 'default name', 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 'default name'.authorClone.name = 'new name'; // 重新赋值console.log(authorClone.name); // Now linked to the primative authorClone.name, which// is the string 'new name'.console.log(Author.getName()); // 没有改变，任然是 'default name'console.log(Author.getBooks()); // 空的authorClone.books.push('new book'); // Author被改了authorClone.books.push('new new book'); // Author被改了console.log(Author.getBooks()); // array 'new book'console.log(authorClone.getBooks()); // array 'new book'authorClone.books = []; // 定义了属于自己的books数组authorClone.books.push('new book2'); // We are now modifying that new array.authorClone.books.push('new book3');authorClone.books.push('new book4');console.log(authorClone.getBooks());console.log(Author.getBooks());var CompoundObject = { string1: 'default value', 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>

结果：