计划按如下顺序完成这篇笔记:
- 理念。
- 属性复制和继承。
- this/call/apply。
- this/闭包/getter/setter。
- prototype。
- 面向对象模拟。
- jQuery基本机制。
- jQuery选择器。
- jQuery工具方法。
- jQuery-在“类”层面扩展。
- jQuery-在“对象”层面扩展。
- jQuery-扩展选择器。
- jQuery UI。
- 扩展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 studynotes 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了。
分享到:
相关推荐
java8 Stream API及常用方法,java初级程序员面试(csdn)————程序
程序员晋升.doc————电子版_doc版
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
菜鸟成长之路 Java程序员职场全攻略笔记
我招了个“水货”程序员(csdn)————程序
java程序员必备手册,查询类库及命令相当方便
Java程序员面试笔试宝典-何昊pdf版,高清,带有书签。
观黑马程序员JAVA学习笔记
软考程序员历年真题2004上——2009下 很全的,也很清晰
JAVA程序员简历模板 JAVA程序员简历模板
Java程序员面试资料及简历模版 Java程序员面试资料及简历模版 Java程序员面试资料及简历模版 Java程序员面试资料及简历模版 Java程序员面试资料及简历模版 Java程序员面试资料及简历模版 Java程序员面试资料及简历...
集合—黑马程序员Java学习笔记