代码

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

js深入研究之克隆,属性,数组,对象,函数的更多相关文章

  1. Js中常用的字符串,数组,函数扩展

    由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...

  2. JS分割字符串并放入数组的函数

    JS分割字符串并放入数组的函数: var InterestKeywordListString = $("#userInterestKeywordLabel").html();  v ...

  3. js中的节点遍历+类数组对象

    firstChild  第一个子元素 lastChild  最后一个子元素 childNodes[n]  =   childNodes.item(n)    第n+1个子元素 parentNode  ...

  4. JS 字符串对象 数组对象 函数对象 函数作用域

    一.内置对象 object对象:ECMAScript 中的所有对象都由这个对象继承而来:Object 对象中的所有属性和方法都会出现在其他对象中 ToString() : 返回对象的原始字符串表示.V ...

  5. 数组 & 对象 & 函数

    数组 数组也是一个对象,不同的是对象用字符串作为属性名,而数组用数字作为索引,数组的索引从0开始 创建数组: //方式一:构造器,可以在创建数组时指定 Var arr = new Array(1,2, ...

  6. JS笔记(三):数组、函数、类

    (一) 数组 //创建数组 var the_array = [1,2,3,4,'5'] console.log(the_array[0]) //读取索引为0的数据 the_array[5] = '赋值 ...

  7. JavaScript 中有关数组对象的方法

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...

  8. python第四十八课——类函数和对象函数

    5.类函数和对象函数 类函数:在定义函数的上面一行书写@classmethod,特点:没有self 有cls 对象函数:定义在class中的普通的def函数 演示类函数和对象函数的定义使用: 总结: ...

  9. js 按指定属性给对象数组排序(json数组)

    有时,我们有一个json对象的数组集合,如何按指定对象属性来进行排序? //fieldArr为一个json对象数组 var fieldArr = fieldArr.sort(compare(" ...

随机推荐

  1. POJ_2488——骑士遍历棋盘,字典序走法

    Description Background The knight is getting bored of seeing the same black and white squares again ...

  2. for

    1,cout在显示bool值之前将他们转换为int,但cout.setf(ios::boolalpha)函数调用设置了一个标记,标记命令cout显示true 和 false 而不是 1 和0;

  3. Java[4] Jetty工作原理介绍(转)

    转自:https://www.ibm.com/developerworks/cn/java/j-lo-jetty/ Jetty 的工作原理以及与 Tomcat 的比较 Jetty 应该是目前最活跃也是 ...

  4. (转)基于企业级证书的IOS应用打包升级功能介绍

    IOS应用程序升级流程介绍:IOS手机端应用程序需要升级时,打开服务器端html文件(本文为ucab.html文件)->点击在线安装->打开plist文件(本文中为ucab.plist文件 ...

  5. [Angular 2] Refactoring mutations to enforce immutable data in Angular 2

    When a Todo property updates, you still must create a new Array of Todos and assign a new reference. ...

  6. 解决从github下载web的源代码部署到eclipse的问题

    2015年6月2日 天气晴 github官网:https://github.com/ 以下以pdf.js作为案例说明:https://github.com/mozilla/pdf.js 1).点击案例 ...

  7. 编译lua5.3.2报错提示libreadline.so存在未定义的引用解决方法

    从官网上下载5.3.2的源码后,make linux进行编译,提示报错: gcc -std=gnu99 -o lua lua.o liblua.a -lm -Wl,-E -ldl -lreadline ...

  8. 【iOS开发之静态库、动态库】

    什么是库? 库 就是程序代码的集合, 是共享程序代码的一种方式,库一般分两类:开源库和闭源库.github中共享一般是开源库:闭源库分为:静态库和动态库,闭源库不开放源代码,是经过编译的二进制文件,一 ...

  9. Char Tools,方便的字符编码转换小工具

    工作关系,常有字符编码转换方面的需要,写了这个小工具 Char Tools是一款方便的字符编码转换小工具,基于.Net Framework 2.0 Winform开发 主要功能 URL编码:URLEn ...

  10. Objective-C中instancetype和id的区别

    要区分instancetype和id,首先要弄清楚什么是关联返回类型(Related Result Type). 关联返回类型即一个方法的返回类型就是调用这个方法的调用者的类型.具有下列条件的方法具有 ...