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

最新推荐文章于 2022-04-20 11:16:39 发布

stationxp

最新推荐文章于 2022-04-20 11:16:39 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript 笔记日积月累文章标签： JavaScript 面向对象继承 prototype

本文链接：https://blog.csdn.net/stationxp/article/details/40068345

版权

日积月累同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

笔记

27 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

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

这是笔记的第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了。