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该。
版权声明:本文博主原创文章,博客,未经同意不得转载。