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

    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该。

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

Java程序猿JavaScript学习笔记(2——复制和继承财产)的更多相关文章

  1. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  2. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  3. JavaScript学习笔记(散)——继承、构造函数super

    构造函数中的super 今天看<JavaScript设计模式与开发实践>时,在书中看到一段代码出现super语句,第一次看到这个关键字,所以上网查了下它的作用,发现这个关键字是来自java ...

  4. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  5. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  6. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿的JavaScript学习笔记(1——理念)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码)

    前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. 本文原创地址:http://www.cnblog ...

  2. SQL数据库基础(四)

    聚合函数:sum,avg,max,min,count 使用方法示例: group by  分组的使用方法 分组的练习: 数学函数:ABS.ceiling.floor.power.round.sqrt. ...

  3. C#编程使用Managed Wifi API连接无线SSID

    C#编程使用Managed Wifi API连接无线SSIDhttp://www.2cto.com/kf/201307/227623.html Managed Wifi API - Homehttp: ...

  4. apache开源项目--kafka

    kafka是一种高吞吐量的分布式发布订阅消息系统,她有如下特性: 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能. 高吞吐量:即使是非常普通的 ...

  5. oracle 优化or 更换in、exists、union all几个字眼,测试没有问题!

    oracle 优化or 更换in.exists.union几个字眼.测试没有问题! 根据实际情况选择相应的语句是.假设指数,or全表扫描,in 和not in 应慎用.否则会导致全表扫描.  sele ...

  6. 【LeetCode】24. Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  7. HandlerMapping 和 HandlerAdapter

    HandlerMapping 负责根据request请求找到对应的Handler处理器及Interceptor拦截器,将它们封装在HandlerExecutionChain 对象中给前端控制器返回. ...

  8. [JSOI2008]最大数maxnumber

    [JSOI2008]最大数maxnumber 标签: 线段树 单独队列 题目链接 题解 线段树裸题. 如果一直RE可能是你用的cin/cout. Code #include<cstdio> ...

  9. etcd 启动错误

    Apr 26 16:17:25 ceph-0 etcd: f281dc69fb4dd3d8 became candidate at term 3574Apr 26 16:17:25 ceph-0 et ...

  10. ubuntu16.04如何安装floodlight并且连接eclipse

    按顺序走,亲测没出错.用的是Luna R版本的eclipse https://floodlight.atlassian.net/wiki/spaces/floodlightcontroller/pag ...