(转)js prototype 详解

转载自:http://blog.csdn.net/chaojie2009/article/details/6719353(也是转载的。鄙视一下此人转载不著名出处。)

注意:必须带着怀疑的态度去看这篇文章,里面部分描述有些微问题。顺便要看看评论。
ps:可以把prototype当作一个成员变量,思考js语法的特性造成的搜索成员的顺序.



JavaScript 是基于对象的,任何元素都可以看成对象。然而,类型和对象是不同的。本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于 重用的类型。毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的。

网上对于prototype的文章很多,一直没明白核心的思想。最后写了很多例子代码后才明白:prototype只能用在类型上。

以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系:


 

例子代码

说明

1

Object.prototype.Property = 1;
Object.prototype.Method = function ()

{

alert(1);

}

var obj = new Object();

alert(obj.Property);

obj.Method();


可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。

JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String


2

var obj = new Object();
obj.prototype.Property = 1; //Error

//Error

obj.prototype.Method = function()

{

alert(1);

}


在实例上不能使用prototype,否则发生编译错误

3

Object.Property = 1;

Object.Method = function()

{

alert(1);

}

alert(Object.Property);

Object.Method();


可以为类型定义“静态”的属性和方法,直接在类型上调用即可

4

Object.Property = 1;

Object.Method = function()

{

alert(1);

}

var obj = new Object();

alert(obj.Property); //Error

obj.Method(); //Error


实例不能调用类型的静态属性或方法,否则发生对象未定义的错误。

5

function Aclass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

var obj = new Aclass();

alert(obj.Property);

obj.Method();


这个例子演示了通常的在JavaScript中定义一个类型的方法

6

function Aclass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

Aclass.prototype.Property2 = 2;

Aclass.prototype.Method2 = function

{

alert(2);

}

var obj = new Aclass();

alert(obj.Property2);

obj.Method2();


可以在外部使用prototype为自定义的类型添加属性和方法。

7

function Aclass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

Aclass.prototype.Property = 2;

Aclass.prototype.Method = function

{

alert(2);

}

var obj = new Aclass();

alert(obj.Property);

obj.Method();


在外部不能通过prototype改变自定义类型的属性或方法。

该例子可以看到:调用的属性和方法仍是最初定义的结果。


8

function Aclass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

var obj = new Aclass();

obj.Property = 2;

obj.Method = function()

{

alert(2);

}

alert(obj.Property);

obj.Method();


可以在对象上改变属性。(这个是肯定的)

也可以在对象上改变方法。(和普遍的面向对象的概念不同)


9

function Aclass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

var obj = new Aclass();

obj.Property2 = 2;

obj.Method2 = function()

{

alert(2);

}

alert(obj.Property2);

obj.Method2();


可以在对象上增加属性或方法

10

function AClass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

function AClass2()

{

this.Property2 = 2;

this.Method2 = function()

{

alert(2);

}

}

AClass2.prototype = new AClass();

var obj = new AClass2();

alert(obj.Property);

obj.Method();

alert(obj.Property2);

obj.Method2();


这个例子说明了一个类型如何从另一个类型继承。

11

function AClass()

{

this.Property = 1;

this.Method = function()

{

alert(1);

}

}

function AClass2()

{

this.Property2 = 2;

this.Method2 = function()

{

alert(2);

}

}

AClass2.prototype = new AClass();

AClass2.prototype.Property = 3;

AClass2.prototype.Method = function()

{

alert(4);

}

var obj = new AClass2();

alert(obj.Property);

obj.Method();


这个例子说明了子类如何重写父类的属性或方法。

以上例子中,关于通过类型实现重用方面,重要的有:

·例子1:JavaScript中允许添加行为的类型

·例子2:prototype使用的限制

·例子3:如何定义类型上的静态成员

·例子7:prototype在重定义类型的成员上的限制

·例子10:如何让一个类型继承于另一个类型

·例子11:如何在子类中重新定义父类的成员

可见JavaScript能够实现的面向对象的特征有:

·公有属性(public field)

·公有方法(public Method)

·私有属性(private field)

·私有方法(private field)

·方法重载(method overload)

·构造函数(constructor)

·事件(event)

·单一继承(single inherit)

·子类重写父类的属性或方法(override)

·静态属性或方法(static member)


4楼 lvzhuyiyi4 2012-07-18 13:23发表 [回复]
第7个例子,
在外部不能通过prototype改变自定义类型的属性或方法。这个好像写错了,不是不能,而是obj.Method();
它是先在自己找有没有这个方法,如果有,就执行,如果没有就到prototype中去找。
不能,表述上像是禁止,但这段程序没有报错!其实是优先级问题!
3楼 tongkaihong 2012-04-11 20:45发表 [回复]
第十条貌似有点儿问题。
AClass2.prototype = new AClass();之后貌似应该加上:
AClass2.prototype.constructor = AClass2;
2楼 foreal3 2012-02-21 14:23发表 [回复] [引用] [举报]
例子挺好的,不过
第七条说的我感觉不是很准确,虽然对,但是容易给人造成误解
“在外部不能通过prototype改变自定义类型的属性或方法。” 其实内部自定义类型的属性或方法 和 prototype自定义类型的属性或方法就是两个东西,只是调用的时候选先在内部自定义中的寻找而已。
Re: xiaoxinmiao 2012-03-27 16:11发表 [回复]
回复foreal3:如果你认为是2个东西的话 怎么解释第6条呢
时间: 2024-11-07 19:57:14

(转)js prototype 详解的相关文章

JavaScript prototype 详解(对prototype 使用的一些讲解)

对JavaScript有一定了解的你,对jquery不陌生吧,那你看jQuery源代码的时候对prototype 也一定有见过,如果对prototype有疑问或者想更深入的去了解与使用它,欢迎你继续往下阅读. 最初的用法是, 为了避免方法在构造器里随机数据被实例化时而产生重复的副本  后来被用在"继承"上面了, 注意, JS语义上是没有继承的, 这里说的是人为的实现.对于下面对JavaScript中类型名称叫做"对象"."函数"."类型

开胃小菜——impress.js代码详解

README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看impress.js并没有遇到太大的阻碍,读代码用了一个小时,写这篇文章用了近三个小时,果然写文章比读代码费劲多了. 个人感觉impress.js的代码量(算上注释一共不到1000行)和难度(没有jQuery的各种black magic= =)都非常适合新手学习,所以写一个总结,帮助大家理解源码. 考

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

Node.js npm 详解

Node.js npm 详解 一.npm简介 安装npm请阅读前辈的文章,很详细的介绍. npm的全称:Node Package Manager. (1)通俗的理解 其实从字面意思就可以理解这个产品有什么作用翻译为"Node包管理器".对,就是Node的包的一个管理工具,目前我尝试的有 下载并安装包(npm install [pkg]) 升级安装包(npm update [pkg]) 卸载安装包(npm uninstall/rm [pkg]),可以指定卸载包的版本号 - 其实这些命令很

require('./expample.js).default详解

最近总碰到类似于 var a = require('./expample.js).default 这样的代码,感觉很奇葩,总结一波. 为什么会出现这个问题? import 是静态编译的,而 require 可以动态加载,也就是说你可以通过判断条件来决定什么时候去 require ,而 import 则不行,所以有时候我们会面临需要通过require 去导入一个es6模块(比如react-hot-loader官方demo :P) 当然,这只是场景之一. 前置知识 ES6 Module常用语法.譬如

第三天:JS事件详解-事件流

学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件冒泡的方式来解释,先点击到接受时间的按钮,然后是div,因为按钮包含在div中,然后是html5然后到文档 事件的捕获,首先是文档接收, 然后是html 然后是div 最后是最具体的元素button来接收 学后感: 只是记住了它的意思,但是并没有明白有什么实际意义

JS正则表达式详解 转

开篇,还是得说说 ^    和    $    他们是分别用来匹配字符串的开始和结束,以下分别举例说明 "^The": 开头一定要有"The"字符串; "of despair$":    结尾一定要有"of despair" 的字符串; 那么, "^abc$": 就是要求以abc开头和以abc结尾的字符串,实际上是只有abc匹配 "notice": 匹配包含notice的字符串 你可以看

js对象详解

为什么要有对象 function printPerson(name, age, sex....) {}// 函数的参数如果特别多的话,可以使用对象简化function printPerson(person) {  console.log(person.name);  ……} 什么是对象 现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征.举例: 一部车,一个手机车是一类事物,门口停的那辆车才是对象 特征:红色.四个轮子 行为:驾驶.刹车 JavaScript中的对象 J

Vue.js 插件开发详解

前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段,比较少自己开发.所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用. 原文作者:林鑫,作者博客:https://github.com/lin-xin/blog 认识插件 想要开发插件,先要认识一个插件是什么样子的. Vue.js 的插件应当有一个公开方法 instal