开发者社区> 桃子红了呐> 正文

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>
复制代码

结果

这里的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>
复制代码



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5059199.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端祖传三件套JavaScript的ES6+之各种扩展:字符串、数值、函数、数组、对象、正则.
在前端开发中,ES6+ 为 JavaScript 带来了各种扩展功能,包括字符串、数值、函数、数组、对象、正则等方面的增强。本文将介绍 JavaScript 中各种扩展的基本概念和使用方法。
12 0
js中函数内部属性arguments和this以及方法apply()和call()
js中函数内部属性arguments和this以及方法apply()和call()
17 0
前端祖传三件套JavaScript的函数之箭头函数
当今的前端开发中,JavaScript 语言几乎是必不可少的。而 JavaScript 的函数也是其中最基础、最重要的部分之一。在日常的工作中,我们经常会用到箭头函数,它是 ES6 新增的语言特性,可以帮助程序员更快速地编写出代码。那么,什么是箭头函数?它有哪些优点和注意事项呢?
19 0
前端祖传三件套JavaScript的函数之函数参数
在 JavaScript 中,函数参数是非常重要的概念,它们可以帮助我们向函数中传递数据和信息,并且可以增强函数的灵活性和可维护性。本文将介绍 JavaScript 函数参数的使用方法、传递方式以及一些常见的注意事项.
11 0
前端祖传三件套JavaScript的函数之函数调用
JavaScript 函数可以被调用多次,这使得它们极其灵活和实用。在本文中,我们将讨论 JavaScript 函数的调用方式、传递参数以及一些常见的注意事项。
13 0
前端祖传三件套JavaScript的函数之call()方法/apply()方法
在JavaScript中,函数是一种非常重要的语言特性,可以帮助我们实现各种功能。 Function.prototype上提供了两个函数 call() 和 apply(),它们允许您在调用函数时指定this的值,以及传递参数。本文将介绍这两个方法的用法、区别和注意事项。
12 0
前端祖传三件套JavaScript的函数之闭包
在 JavaScript 中,闭包是一个非常重要的概念,它允许函数访问其外部作用域中定义的变量和函数。本文将介绍闭包的概念、使用方法以及一些常见的注意事项。
15 0
JS:JS中常见的 “函数名 is not a function” 错误
JS:JS中常见的 “函数名 is not a function” 错误
119 0
前端祖传三件套JavaScript的函数之匿名函数
在JavaScript中,函数是实现各种功能和业务逻辑的基本手段。除了常规的函数声明和函数表达式外,JavaScript还支持匿名函数的定义方式。在这篇文章中,我们将介绍JavaScript中的匿名函数,以及其使用方法和注意事项
18 0
+关注
桃子红了呐
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多