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


Posted in Javascript onNovember 26, 2016

本文实例讲述了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>

结果

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

这里的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克隆,属性,数组,对象,函数实例分析

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
JS匿名函数类生成方式实例分析
Nov 26 #Javascript
正则表达式替换html元素属性的方法
Nov 26 #Javascript
js初始化验证实例详解
Nov 26 #Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 #Javascript
JS匿名函数实例分析
Nov 26 #Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 #Javascript
JS类的定义与使用方法深入探索
Nov 26 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
一些常用的Javascript函数
2006/12/22 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python实现partial改变方法默认参数
2014/08/18 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python实现朴素贝叶斯算法
2018/11/19 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
求职推荐信范文
2013/12/01 职场文书
捐赠仪式主持词
2014/03/19 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏