Java程序员的JavaScript学习笔记(5——prototype和Object内置方法)

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

  1. 理念。
  2. 属性复制和继承。
  3. this/call/apply。
  4. 闭包/getter/setter。
  5. prototype。
  6. 面向对象模拟。
  7. jQuery基本机制。
  8. jQuery选择器。
  9. jQuery工具方法。
  10. jQuery-在“类”层面扩展。
  11. jQuery-在“对象”层面扩展。
  12. jQuery-扩展选择器。
  13. jQuery UI。
  14. 扩展jQuery UI。

这是笔记的第5篇,聊聊prototype、内置的Object对象和Object对象的属性和方法。

1、prototype

上一篇我们了解了如何实现控制对象属性的访问权限,实现了对象属性的封装。

第1篇我们通过对函数prototype的扩展,实现了对函数创建的所有对象的扩展。也使用prototype属性实现了继承。

结合前几篇所学,我们看看如何实现如下Java代码类似的功能.

public class UiObject{
	private String _author = 'liuhailong';
	private String _utype  = 'UiObject';
	private String _uname  = 'UiObject';	

	public UiObject(String name){
		this._uname = name;
	}

	public void setUname(name){this._uname = name;}

	public String getAuthor(){ return this._author; }
	public String getUtype(){ return this._utype; }
	public String getUname(){ return this._uname; }
}

尝试编写代码如下:

function UiObject(uname) {
    var _uname = uname || 'RootUiObject';
}
UiObject.prototype = {
    _utype : "UiObject",
    _author : 'liuhailong',

    get utype(){ return this._utype;},
    get author(){ return this._author;},

    get uname(){ return this._uname;},
    set uname(uname){ this._uname = uname;},

    render : function(){
        console.log('Render Me!');
    }
}  

var uiRoot = new UiObject();
uiRoot.uname = 'new name';
uiRoot.utype = 'new type';
uiRoot.author = 'new autho';
console.log(uiRoot.uname); // output : new name
console.log(uiRoot.utype); // output : UiObject
console.log(uiRoot.author);// output : liuhailong

代码中综合使用了prototype和闭包,从输出来看,达到效果。

这段代码将作为我以后实现类的范本,随着不断积累,我也会尽量更新这个范本,找到在JavaScript中定义类的最佳实践。

prototype为JavaScript中一等对象(Function)提供了基本类型定义的强力支持,足见其重要性。

而且通过prototype为函数功能提供了及其方便易用的扩展功能,足见其强大。

2、内置Object对象

看下面代码:

function UiObject(){}
var ui = new UiObject();
console.log(ui.toString());  // output : [object object]

var o = {};
console.log(o.toString());   // output : [object object]

定义了两个“空的”对象,调用其toString方法都返回了值,不是应该返回undefined吗?

相信Java程序员会心一笑,已经猜到发生了什么。

通过firefox调试观察,两个空对象真的是“空”的。怎么回事?

如果只算自有属性,而且两个对象的确是“空”的,但他们的prototype应该是有默认赋值的。

记得我们上一篇聊到的属性的4个特性吗?其中一个特性是:是否可遍历。比如prototype属性,就不可遍历。

改用IE调试,看到了两个对象的prototype属性(灰色的,应该是因为不可遍历)和默认的prototype的内部结构。

如下图所示。

观察各个对象的类型,可以发现,UiObject、ui的prototype的prototype类型都是Object,o本身和prototype的类型就是Object

Object已经露出了真身佛面,展开可看到其内部的属性(如果有)和方法。

3、Object的属性和方法

能看到的类型都是Function,有的可以通过赋值覆盖,有的不可以。

没有看到上一篇提到过的Object.defineProperty,也没有看到Object.create(),可能是各浏览器对ECMAScript 5支持程度不同的原因,也可能是调试器因为某种原因没有列出。

大家可以自行问度娘了解Object的属性和方法,需注意:上面列出的不是全集。

时间: 2024-08-02 02:49:07

Java程序员的JavaScript学习笔记(5——prototype和Object内置方法)的相关文章

Java程序员的JavaScript学习笔记 (目录)

终于完结了,历时半个月. 内容包括: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源码级解析. jQuery EasyUI源码级解析. Java程序员的JavaScript学习笔记(1——理念) Java程序员的JavaScript学习笔记(2——属性复制和继承) Java程序员的JavaScript学习笔记(3——this/call/apply) Java程序员的JavaScript学习笔记(4——this/闭包/getter/setter) Java

Java程序员的JavaScript学习笔记(14——扩展jQuery UI)

计划按如下顺序完成这篇笔记: 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程序员

Java程序员的JavaScript学习笔记(汇总目录)

终于完结了,历时半个月. 内容包括: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源码级解析. jQuery EasyUI源码级解析. Java程序员的JavaScript学习笔记(1--理念) Java程序员的JavaScript学习笔记(2--属性复制和继承) Java程序员的JavaScript学习笔记(3--this/call/apply) Java程序员的JavaScript学习笔记(4--this/闭包/getter/setter) Java

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

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. this/闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第2篇,聊聊属性复制和继承的事情.非常基础,同样,也非常重要. 一切皆

Java程序员的JavaScript学习笔记(4——闭包/getter/setter)

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第4篇,聊聊闭包/getter/setter,看看JavaScript中的变量作

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

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第6篇,对前面5篇做一个总结,聊聊JavaScript在面向大型复杂任务时候,如

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

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第7篇,聊聊jQuery基本机制,学习的同时,我们试图实现一个缩略版本的jQue

Java程序员的JavaScript学习笔记(1——理念)

计划按如下顺序完成这篇笔记: 理念. 关于属性复制. this和闭包. 应该熟悉的语法习惯. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 每一篇也许几句话,也许长篇大论.短的可能是因为概念难理解,需要慢慢消化:长的,可能是因为内容多而且水,但不提又不行. 现在开始第1篇:理念. 众

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

计划按如下顺序完成这篇笔记: 理念. 属性复制和继承. this/call/apply. 闭包/getter/setter. prototype. 面向对象模拟. jQuery基本机制. jQuery选择器. jQuery工具方法. jQuery-在"类"层面扩展. jQuery-在"对象"层面扩展. jQuery-扩展选择器. jQuery UI. 扩展jQuery UI. 这是笔记的第3篇,聊聊JavaScript中的this,还有两种调用函数的特殊方式:cal