Java程序猿JavaScript学习笔记（2——复制和继承财产）

计划和完成在这个例子中，音符的以下序列：

1. Java程序猿的JavaScript学习笔记（1——理念）
2. Java程序猿的JavaScript学习笔记（2——属性复制和继承）
3. Java程序猿的JavaScript学习笔记（3——this/call/apply）
4. Java程序猿的JavaScript学习笔记（4——this/闭包/getter/setter）
5. Java程序猿的JavaScript学习笔记（5——prototype）
6. Java程序猿的JavaScript学习笔记（6——面向对象模拟）
7. Java程序猿的JavaScript学习笔记（7——jQuery基本机制）
8. Java程序猿的JavaScript学习笔记（8——jQuery选择器）
9. Java程序猿的JavaScript学习笔记（9——jQuery工具方法）
10. Java程序猿的JavaScript学习笔记（10——jQuery-在“类”层面扩展）
11. Java程序猿的JavaScript学习笔记（11——jQuery-在“对象”层面扩展）
12. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
13. Java程序猿的JavaScript学习笔记（13——jQuery UI）
14. Java程序猿的JavaScript学习笔记（14——扩展jQuery UI）

这是笔记的第2篇。聊聊属性复制和继承的事情。

很基础。相同。也很重要。

作者博客：http://blog.csdn.net/stationxp

作者微博：http://weibo.com/liuhailong2008

转载请取得作者允许

一切皆对象

属性是相对对象来说的。所以问题来了：什么是对象？对象是类的实例。好吧，够了，这是Java程序猿的想法。

怎样从JavaScript的角度考虑这个问题呢。

首先，

为什么要有对象？

简单主要的数据类型在面对复杂的业务逻辑时，不足堪用，所以我们须要更复杂的，针对要解决的问题定制的数据结构。

所以我们须要对象（比方日期）。我们希望对象有自己的属性、能够有自己的方法。甚至还须要事件。

什么是对象？

JavaScript中，数组（Array）、日期（Date）、正則表達式(RegExp)都是对象。他们有自己的属性、方法，甚至事件。

自成一体，描写叙述一类事物，完毕特定的功能。

在Java的世界中。“一切皆对象”，在JavaScirpt中，还能够喊出相同的口号吗？Yes,we can。

JavaScript中：

1. 简单数据类型。有其封装类型。Number，Boolean。
2. 数组。var arr = []; 和var arr = new Array();得到的都是数组对象。
3. 函数也是对象，比Java还彻底，真正做到一切皆对象了。
4. 对象是对象。指的是通过例如以下语句创建的对象：var o = {}; 或 var o = new Object(); 或 var o = Object.create({})。
5. JavaScript的主要战场（window）和用武之地（dom）也都是对象。

怎样得到对象？

通过下面语句能够获得对象。

var str = "我是一个 String 对象。"

 var obj = { intro: "我是一个 Object 对象。" }; 

 var fun = function() { 

    console.log( "我是一个 Function 对象。"); 

 };

上面展示类两种获得自己定义对象的方式，这是最简单的方式，还有其它方式。

简单提一下prototype属性的作用。每一个函数对象都会有一个prototype属性。指向创建函数的“原型”。

以下的代码：

function UiObject() { } 

 UiObject.prototype = {

  type : "RootUiObject"     //UiObject原型的属性

 }

 var u1 = new UiObject();         //创建两个UiObject的实例 

 var u2 = new UiObject();



 console.log(u1.type);           //输出：RootUiObject，原型的属性能够在各实例之间分享

console.log(u1.type === u2.type); // 输出：true，引用的是同一个

正由于prototype的这个威力，我们很多其它地採用上面的代码，创建函数、设定函数原型、创建函数实例。

步骤例如以下所看到的：

function MyFunc(){}

MyFunc.prototype = {}

var myObj = new MyFunc();

接下来。看对象的属性和属性的复制。包含作为属性的方法的复制。

属性的复制

第1篇中。我们聊到了“众生平等”，属性不仅仅是单纯地指对象的数值类型的属性。

我们能够通过 o['name'] = 'liuhailong'; 语句设置对象o的name属性为某个字符串值。

也能够通过 o['write'] = function(){  return 'I am writing study notes on JavaScript';  }语句设置对象o的write属性为某个函数。

两者之间没有差别。

所以提到“属性继承和复制”时，“属性”的概念是广义的。指的是对象全部的属性和方法（“全部的”这个说法不太准确。以后我们会知道，属性也有自己的特性，有的不能被遍历。有的仅仅读，有的不能扩展。这些复杂的情况以后再考虑）。

通过例如以下方法，能够实现将source的属性所有拷贝到destionation对象上。

function(destination, source) {
<span style="white-space:pre">	</span>for (var property in source) {
    <span style="white-space:pre">		</span>destination[property] = source[property];
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>return destination;
}

怎样继承?

什么是继承？

继承是指子元素的对象什么都没做，只靠指定和父元素的关系。就自己主动拥有了父元素的特性和能力。

怎样实现继承？

继承的要点是：指定和父对象的关系。

 /*   定义根对象  */
 function UiObject() {}
 UiObject.prototype = {
 	type : "UiObject",
 	author : 'liuhailong',
 	render : function(){
 		console.log('Render Me!');
 	}
 }

 /*   定义Panel */
 function UiPanel( height, weight ) {
    this.type = "UiPanel";
    this.height = height;
    this.weight = weight;
 }
 UiPanel.prototype = new UiObject(); //指定继承关系

 /*   測试 */
 var p = new UiPanel(100,60);
 console.log(p.author); // ouput  : liuhailong
 p.render();			// output : render me

接下来，给“父类”添加一个“方法”。看看子类是否可以直接使用。

 /*   定义根对象  */
 function UiObject() {}
 UiObject.prototype = {
 	type : "UiObject",
 	author : 'liuhailong',
 	render : function(){
 		console.log('Render Me!');
 	}
 }

 /*   定义Panel */
 function UiPanel( height, weight ) {
    this.type = "UiPanel";
    this.height = height;
    this.weight = weight;
 }
 UiPanel.prototype = new UiObject(); //指定继承关系

 /*   測试1
 var p = new UiPanel(100,60);
 console.log(p.author); // ouput  : liuhailong
 p.render();			// output : render me
 */

 /*  扩展“父类”的功能    */
 UiObject.prototype.init = function(){
 	console.log("Init the Ui Control ");
 } 

 /*   測试2   */
 /*   測试2   */
 var p1 = new UiPanel(100,60);
 var p2 = new UiPanel(200,60);
 p1.init();                            // output : Init the Ui Control 
 console.log(p1.author === p2.author); //true

通过扩展父类，能够添加子类的功能。

O该。

版权声明：本文博主原创文章，博客，未经同意不得转载。