代码

<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. nginx 配置自签名的ssl证书

    最近要搭一个https的测试环境,使用nginx做反向代理. 网上找过不少资料,但过程不是很完整,吃了不少亏,故把自己的操作过程总结下来.如果你刚好遇到这个问题,希望对你有帮助! ********** ...

  2. Could not Build module ImageIO

    错误提示:Could not Build module ImageIO: 原因:修改了XCode API 源文件 措施:从一个干净的未曾修改过的XCode中拷贝一份相应的文件添加到发生错误的XCode ...

  3. Java 将自己定义的对象作为HashMap的key

    须要继承Map的equals函数和hashCode函数 package com.category; import java.util.HashMap; public class GenCategory ...

  4. c++大作业--学籍管理系统--

    1.题目描写叙述 学籍管理系统: 依据信息管理系统的业务流程.要求以及所要实现的目标,完毕下面功能: (1)建立学生档案的管理和维护.实现计算机自己主动化管理体制. (2)建立学生成绩管理机制,在计算 ...

  5. Ngnix安装

    一.pcre安装 yum install pcre 或 https://sourceforge.net/projects/pcre/files/pcre/8.37/ 手动下载后上传至linux 1.y ...

  6. 网页CSS2

    列表与方块 width , hight (top, bottom ,left , right)   只有在决对坐标下才起作用 下面的使用与 ol  ul list-style:none // 取消序号 ...

  7. Java(TM) SE Development Kit 6 卸载不掉怎么办

    错误描述:Java 安装时断电,再次安装java时,提示“您的电脑上已经安装了此软件.是否要重新安装”,点“是”后出现“内部错误2753:RegUtils”,点“确定”又出现上述提示. 解决办法 :使 ...

  8. 打开较大存储量的.sql文件时,出现SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问

    1. “消息 15281,级别 16,状态 1,过程 xp_cmdshell,第 1 行SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访 ...

  9. 使用DataSet数据集删除记录

    使用DataSet删除记录和使用DataSet更新记录非常的相似,DataSet删除记录的步骤如下所示. q  创建一个Connection对象. q  创建一个DataAdapter对象. q  初 ...

  10. 禁止chrome中CORS跨域资源共享错误

    在开发中,可以通过命令行命令chrome --allow-file-access-from-files来 禁止CORS错误. 只在紧急情况下使用这个方法,比如你的老板正站在你身后, 并且所有事情都无法 ...