javascript 函数属性prototype(转)
在JavaScript中并没有类的概念,但javascript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
1、prototype
在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
2、简单的例子
- var Blog = function( name, url ){
- this.name = name;
- this.url = url;
- };
- Blog.prototype.jumpurl = '';
- Blog.prototype.jump = function(){
- window.location = this.jumpurl;
- };
- /*
- *等同于
- Blog.prototype = {
- jumpurl : '',
- jump : function(){
- window.location = this.jumpurl;
- }
- };
- */
- var rainman = new Blog('jb51', 'http://www.jb51.net');
- var test = new Blog('server', 'http://s.jb51.net');
这是一个非常简单的例子,但却可以很好的解释prototype内在的一些东西,先看下图的内存分配: 
通过上图可以看到下面这些内容:
prototype只是函数的一个属性,该属性的类型是一个对象。
内存分配状况:
函数Blog拥有一个prototype属性,而prototype属性拥有一个变量和一个函数;
test和rainman两个变量都分别有name和url两个变量;
test和rainman两个变量都有一个jumpUrl变量和一个jump函数,但是并没有分配内存,它们是对Blog.protype中的引用
3、扩展1:
- Website.prototype = Blog.prototype
- var Blog = function( name, url ){
- this.name = name;
- this.url = blogurl;
- };
- Blog.prototype.jumpurl = '';
- Blog.prototype.jump = function(){
- window.location = this.jumpurl;
- };
- var rainman = new Blog('jb51', 'http://www.jb51.net');
- var test = new Blog('server', 'http://s.jb51.net');
- var Website = function(){};
- Website.prototype = Blog.prototype;
- var mysite = new Website();

通过上图可以看到下面这些内容:
"Website.prototype = Blog.prototype;":Website的prototype并没有分配内存,只是引用了Blog的prototype属性。
mysite的两个属性也没有分配内存,也只是分别引用了Blog.prototype.jumpurl和Blog.prototype.jump
4、扩展2:
- Website.prototype = new Blog()
- var Blog = function(){};
- Blog.prototype.jumpurl = '';
- Blog.prototype.jump = function(){
- window.location = this.jumpurl;
- };
- var Website = function(){};
- Website.prototype = new Blog();
- var mysite = new Website();

通过上图可以看到下面这些内容:
Website的prototype属性,只是Blog的一个实例( 同rainman=new Blog(); );因此Website的prototype属性就具有了jumpurl变量和jump方法了。
mysite是Website的一个实例,它的jumpurl和jump方法是继承自Website的prototype,而Web.prototype继承自Blog.prototype(这里与其说是继承,不如说是引用)
整段程序在运行的过程中,内存中只分配了一个jumpurl变量和一个jump方法
5、new运算符
JavaScript中new运算符。
JavaScript中new运算符是创建一个新对象。使用方法:
new constructor[(arguments)]
其中constructor是必选项。对象的构造函数。如果构造函数没有参数,则可以省略圆括号。
arguments是可选项。任意传递给新对象构造函数的参数。
JavaScript中new运算符说明
new 运算符执行下面的任务:
创建一个没有成员的对象。
为那个对象调用构造函数,传递一个指针给新创建的对象作为 this 指针。
然后构造函数根据传递给它的参数初始化该对象。
示例
下面这些是有效的 new 运算符的用法例子。
my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");
6、其它
在绝大多数JavaScript版本中,js引擎都会给每个函数一个空的原型对象,即prototype属性。
javascript 函数属性prototype(转)的更多相关文章
- javascript——函数属性和方法
<script type="text/javascript"> //每个函数都包含两个属性:length 和 prototype //length:当前函数希望接受的命 ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- javascript 重要属性之prototype(继承)
转载猫猫小屋 http://www.maomao365.com/?p=831 在javascript中每一个函数都拥有 prototype属性,在javascript中使用prototype,可以向已 ...
- 函数有一个特殊的属性 prototype!
JavaScript 中只有对象,没有类. 实际上,JavaScript 才是真正应该被称为「面向对象」的语言,因为它是少有的可以不通过类,直接创建对象的语言. 函数的 prototype 属性 在 ...
- JavaScript 全局属性/函数
JavaScript 全局 JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示 ...
- JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法
函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留 ...
- js 对象的_proto_属性 和函数的prototype属性分析
bill是 Employee类型的实例,_proto_指向Employee.prototype Employee.prototype有一个constructor属性,指向Employee函数自身 fu ...
- JavaScript全局属性/函数
JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. und ...
- JavaScript全局属性和全局函数
JavaScript全局属性和全局函数可以与所有内置JavaScript对象一起使用. JavaScript全局属性 属性 描述 Infinity 表示正/负无穷大的数值 NaN "Not- ...
随机推荐
- vue-cli与后台数据交互增删改查
1. 安装vue-resource npm install vue-resource --save 2.访问后台地址,在vue中会出现跨域的问题,以下为解决方案 在config下的index.js 中 ...
- jquery Jsonp的使用
<script type="text/javascript"> $(function(){ $.ajax({ url:"test", jsonpCa ...
- AWS:4.VPC
主要介绍 1.Amazon混合云 2.将EC2加入VPC 3.VPC经典场景 4.VPC安全保障 Amazon混合云 : 在公有云的基础上创建私有云 VPC概念 VPC(VPC Virtual Pri ...
- ELK日志收集系统搭建
架构图 ELK 架构图:其中es 是集群,logstash 是单节点(猜想除非使用nginx对log4j的网络输出分发),kibana是单机(用不着做成集群). 1.拓扑图 2.logstash ...
- -es6的部分语法
es6的语法 一 . let 和 var 的区别 : 1 . let 和 val 的区别 : ES6新增了let命令 , 用来声明变量,它的用法类似于 var (ES5), 但是所声明的变量,只在l ...
- Tomcat实现多主多备
Nginx Upstream 实现简单双机主从热备 下面配置多主多从: upstream testproxy { server 127.0.0.1:8080; server 127.0.0.1:808 ...
- Sqooop- 使用Sqoop进行数据的导入导出
Sqoop是Apache旗下的一个开源框架,专门用来做数据的导入和导出. 官网:https://sqoop.apache.org/ Sqoop的安装非常简单,只需要把下载下来的tar包解压设置两个环境 ...
- 我所理解的RESTful Web API [Web标准篇]【转】
原文:http://www.cnblogs.com/artech/p/restful-web-api-01.html REST不是一个标准,而是一种软件应用架构风格.基于SOAP的Web服务采用RPC ...
- legend2---开发日志15(功能需求明确,设计好类和结构的好处是)
legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...
- UVA 111 简单DP 但是有坑
题目传送门:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18201 其实是一道不算难的DP,但是搞了好久,才发现原来是题目没 ...