Java程序员的JavaScript学习笔记（2——属性复制和继承）

计划按如下顺序完成这篇笔记：

Java程序员的JavaScript学习笔记（1——理念）

Java程序员的JavaScript学习笔记（2——属性复制和继承）

Java程序员的JavaScript学习笔记（3——this/call/apply）

Java程序员的JavaScript学习笔记（4——this/闭包/getter/setter）

Java程序员的JavaScript学习笔记（5——prototype）

Java程序员的JavaScript学习笔记（6——面向对象模拟）

Java程序员的JavaScript学习笔记（7——jQuery基本机制）

Java程序员的JavaScript学习笔记（8——jQuery选择器）

Java程序员的JavaScript学习笔记（9——jQuery工具方法）

Java程序员的JavaScript学习笔记（10——jQuery-在“类”层面扩展）

Java程序员的JavaScript学习笔记（11——jQuery-在“对象”层面扩展）

Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）

Java程序员的JavaScript学习笔记（13——jQuery UI）

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中：

简单数据类型，有其封装类型，Number，Boolean。
数组，var arr = []; 和var arr = new Array();得到的都是数组对象。
函数也是对象，比Java还彻底，真正做到一切皆对象了。
对象是对象，指的是通过如下语句创建的对象：var o = {}; 或 var o = new Object(); 或 var o = Object.create({})。
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了。