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 相关文章推荐
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
第十节--抽象方法和抽象类
2006/11/16 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Django 自定义分页器的实现代码
2019/11/24 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
社区母亲节活动方案
2014/03/05 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
节能环保演讲稿
2014/08/28 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
党校党性分析材料
2014/12/19 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
详解Python中__new__方法的作用
2022/03/31 Python