- 浏览: 1092041 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
JS中的phototype是JS中比较难理解的一个部分
一、知识点
本文基于下面几个知识点:
1. 原型法设计模式
原型法的主要思想是:
现在有一个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。
我们称B的原型为A。
2. javascript的方法可以分为三类:
1) 类方法
2) 对象方法
3) 原型方法
例子:
二、正式开始
1、prototype是什么含义?
Javascript中的每个对象都有prototype属性。
Javascript中对象的prototype属性的解释是:返回 “对象原型” 的引用。
2、什么是函数的“对象原型”(prototype)?
Function.prototype 属性可以被使用 new 关键字创建的 Function 的实例所继承。
Function.prototype 属性不能被删除。
prototype 不应与继承混淆:
A.prototype = new B();
A 的 prototype 为 B 的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。
A 能使用 B 的方法和属性,这里强调的是克隆而不是继承。
可以出现这种情况:
A 的prototype是 B 的实例,同时 B 的prototype也是 A 的实例。
例子:
首先定义 Base 类。
然后定义 Extended,以 Base 的一个实例作为 Extended 的函数原型。
那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?
下面是扩展实验2:
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行。找不到则去prototype中寻找函数。
那么又会有一个新的问题:
如果我想使用 Extended 的一个实例 instance 调用 Base 的方法showMsg怎么办?
答案是可以使用 call:
下面这个代码如果理解清晰,那么对“类方法、原型方法、对象方法”就已经理解了:
函数的 prototype 对象,是一个普通的对象。
函数的 prototype 对象,不是函数对象,不具有函数对象的 prototype 属性。
三、面向对象编程:prototype 中的 function 与 this
prototype 既然是用来共享于函数的实例之间,
那么在 prototype 的 function 类型中使用 this 是面向对象编程不可缺少的实现。
因为 this 总是指向 function 的不同实例。但是可以只写一次 this。
—————————————
javascript 函数基础系列文章
1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()
___________
javascript 面向对象编程系列文章:
1、javaScript之面向对象编程
2、javascript之面向对象编程之属性继承
3、javascript之面向对象编程之原型继承
-
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/1896682
--
引用地址:
http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html
-
一、知识点
本文基于下面几个知识点:
1. 原型法设计模式
原型法的主要思想是:
现在有一个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。
我们称B的原型为A。
2. javascript的方法可以分为三类:
1) 类方法
2) 对象方法
3) 原型方法
例子:
function People(name){ this.name=name; //对象方法 this.Introduce=function(){ console.log("My name is "+this.name); } } //类方法 People.Run=function(){ console.log("I can run"); } //原型方法 People.prototype.IntroduceChinese=function(){ console.log("我的名字是"+this.name); } //测试 var p1=new People("Windking"); p1.Introduce(); People.Run(); p1.IntroduceChinese();
二、正式开始
1、prototype是什么含义?
Javascript中的每个对象都有prototype属性。
Javascript中对象的prototype属性的解释是:返回 “对象原型” 的引用。
2、什么是函数的“对象原型”(prototype)?
Function.prototype 属性可以被使用 new 关键字创建的 Function 的实例所继承。
Function.prototype 属性不能被删除。
prototype 不应与继承混淆:
A.prototype = new B();
A 的 prototype 为 B 的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。
A 能使用 B 的方法和属性,这里强调的是克隆而不是继承。
可以出现这种情况:
A 的prototype是 B 的实例,同时 B 的prototype也是 A 的实例。
例子:
function Base(){ this.showMsg = function(){. console.log("Base::showMsg"); } } function Extended(){} Extended.prototype = new Base(); var instance = new Extended(); instance.showMsg(); // 显示 Base::showMsg
首先定义 Base 类。
然后定义 Extended,以 Base 的一个实例作为 Extended 的函数原型。
那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?
下面是扩展实验2:
function Base(){ this.showMsg = function(){ console.log("Base::showMsg"); } } function Extended(){ this.showMsg =function (){ console.log("Extended::showMsg"); } } Extended.prototype = new Base(); var instance = new Extended(); instance.showMsg(); //显示:Extended::showMsg
实验证明:函数运行时会先去本体的函数中去找,如果找到则运行。找不到则去prototype中寻找函数。
那么又会有一个新的问题:
如果我想使用 Extended 的一个实例 instance 调用 Base 的方法showMsg怎么办?
答案是可以使用 call:
Extended.prototype = new Base(); var extend = new Extended(); var base = new Base(); base.showMsg.call(extend); //显示:Base::showMsg
下面这个代码如果理解清晰,那么对“类方法、原型方法、对象方法”就已经理解了:
// //Base function Base(name){ this.name = name || "BASE"; this.showMsg = function(){ console.log(this.name, "::showMsg"); } this.baseShowMsg = function(){ console.log(this.name, "::baseShowMsg"); } } Base.showMsg = function(){ console.log(this.name, "::showMsg static"); } Base.prototype.protoShowMsg = function(){ console.log(this.name, "::protoShowMsg"); } // //Extended function Extended(name){ this.name = name || "Extended"; this.showMsg =function (){ console.log(this.name, "::showMsg"); } } Extended.showMsg = function(){ console.log(this.name, "::showMsg static"); } Extended.prototype = new Base(); //Test var base= new Base(); var extended = new Extended(); extended.showMsg(); //显示: Extended ::showMsg extended.baseShowMsg(); //显示: Extended ::baseShowMsg extended.protoShowMsg(); //显示: Extended ::protoShowMsg Base.showMsg.call(extended); //显示: Extended ::showMsg static base.showMsg.call(extended); //显示: Extended ::showMsg //
函数的 prototype 对象,是一个普通的对象。
函数的 prototype 对象,不是函数对象,不具有函数对象的 prototype 属性。
三、面向对象编程:prototype 中的 function 与 this
prototype 既然是用来共享于函数的实例之间,
那么在 prototype 的 function 类型中使用 this 是面向对象编程不可缺少的实现。
因为 this 总是指向 function 的不同实例。但是可以只写一次 this。
// var Person = function(name) { this.name = name; }; Person.prototype.getName = function() { // use "this" in prototype. return this.name; }; //test var john = new Person("John"); console.log(john.getName()); // John var Tomi = new Person("Tomi"); console.log(Tomi.getName()); // Tomi
—————————————
javascript 函数基础系列文章
1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()
___________
javascript 面向对象编程系列文章:
1、javaScript之面向对象编程
2、javascript之面向对象编程之属性继承
3、javascript之面向对象编程之原型继承
-
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/1896682
--
引用地址:
http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html
-
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2449为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1052一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2255刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 561点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1553jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1626HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3897浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 91325 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 629效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 687jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 624attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 619Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2135JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1044前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 808详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 882通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4213概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10031. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 834函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 657一、用法 undefined 关键字有两种用法: 1. 如 ...
相关推荐
From: JavaEye.com prototype提供了一套JavaScript面向对象基础设施,我们可以使用它来进行面向对象编程,定义对象类型方式如下: var Person = Class.create(); Person.prototype = { initialize : ...
本文实例讲述了JavaScript通过prototype给对象定义属性的用法。分享给大家供大家参考。具体分析如下: 下面的JS代码定义了movie对象。在使用对象的过程中又通过prototype给对象添加了isComedy属性,调用的时候直接...
每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。 在通过new创建一个类的实例对象的时候,...
本文实例讲述了JavaScript使用Prototype实现面向对象的方法。分享给大家供大家参考。具体分析如下: prototype 是 Function 对象的一个属性,这个属性指向另一个对象。 这个对象的所有属性和方法,都会被构造函数的...
function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别。在prototype对象中又有一个constructor属性,这个constructor...
主要介绍了Javascript Function.prototype.bind详细分析的相关资料,需要的朋友可以参考下
在JavaScript中,prototype对象是实现面向对象的一个重要机制。 每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的...
主要介绍了理解javascript中的Function.prototype.bind的方法,具有一定参考价值,有兴趣的可以了解一下。
JavaScript prototype(原型对象) 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。 在前面的章节中我们学会了如何使用对象的构造器(constructor): 实例 function Person(first, ...
本文实例讲述了javascript 对象 与 prototype 原型用法。分享给大家供大家参考,具体如下: 我们做程序开发的,经常面对的就是一个一个对象。那么在javascript中我们怎么去创建一个类以及一个对象呢? [removed] /...
Javascript当然也不例外,可是关于对象的引用问题,你考虑过么?通常的做法是一系列对象共享类的方法,而不是为每个对象复制一份函数。下面看看为每个对象复制一份函数的做法。 代码如下:var myobject=function...
在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象。 代码如下: <!– lang: js ...
Javascript中的每个对象(object)都会有 prototype 。试一下: 代码如下: var Richard = new Object(); alert(typeof(Richard.prototype)); 结果令人郁闷,浏览器弹出来的是 undefined…… 到底是怎么回事呢...
JavaScript 的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该...
function.prototype.name 符合ES2015规范的Function.prototype.name垫片。 如果不可用,则调用其“ shim”方法来对Function.prototype.name进行填充。 注意: Function#name需要一个真正的ES5环境-特别是一个带有ES5...
prototype属性本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。 如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数。 比如下面一个简单的场景: 代码如下: // 构造...
2.8. 在 prototype.js中定义的新对象和类 2.9. PeriodicalExecuter 对象 2.10. Prototype 对象 2.11. Class 对象 2.12. Ajax 对象 2.13. Ajax.Base 类 2.14. Ajax.Request 类 2.15. options 参数对象 2.16. Ajax....
1、prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。 2、简单的例子 代码如下: var Blog = ...