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 相关文章推荐
jQuery 性能优化手册 推荐
Feb 23 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
微信小程序自定义组件
Aug 16 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
详解小程序云开发数据库
May 20 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
用JS写一个发布订阅模式
Nov 07 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
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
jquery tools之tooltip
2009/07/25 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
中英双版中文教师求职信
2013/10/27 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
中学生自我评价范文
2014/02/08 职场文书
学生周末长期请假条
2014/02/15 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
预备党员综合考察材料
2014/05/31 职场文书
债务追讨律师函
2015/06/24 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers