在JavaScript中并没有类的概念,但javascript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。

1、prototype 
在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。

2、简单的例子

复制代码 代码如下:
[javascript] view plaincopy
  1. var Blog = function( name, url ){
  2. this.name = name;
  3. this.url = url;
  4. };
  5. Blog.prototype.jumpurl = '';
  6. Blog.prototype.jump = function(){
  7. window.location = this.jumpurl;
  8. };
  9. /*
  10. *等同于
  11. Blog.prototype = {
  12. jumpurl : '',
  13. jump : function(){
  14. window.location = this.jumpurl;
  15. }
  16. };
  17. */
  18. var rainman = new Blog('jb51', 'http://www.jb51.net');
  19. 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:

复制代码 代码如下:
[javascript] view plaincopy
  1. Website.prototype = Blog.prototype
  2. var Blog = function( name, url ){
  3. this.name = name;
  4. this.url = blogurl;
  5. };
  6. Blog.prototype.jumpurl = '';
  7. Blog.prototype.jump = function(){
  8. window.location = this.jumpurl;
  9. };
  10. var rainman = new Blog('jb51', 'http://www.jb51.net');
  11. var test = new Blog('server', 'http://s.jb51.net');
  12. var Website = function(){};
  13. Website.prototype = Blog.prototype;
  14. var mysite = new Website();


通过上图可以看到下面这些内容:

"Website.prototype = Blog.prototype;":Website的prototype并没有分配内存,只是引用了Blog的prototype属性。
mysite的两个属性也没有分配内存,也只是分别引用了Blog.prototype.jumpurl和Blog.prototype.jump

4、扩展2: 

复制代码 代码如下:
[javascript] view plaincopy
  1. Website.prototype = new Blog()
  2. var Blog = function(){};
  3. Blog.prototype.jumpurl = '';
  4. Blog.prototype.jump = function(){
  5. window.location = this.jumpurl;
  6. };
  7. var Website = function(){};
  8. Website.prototype = new Blog();
  9. 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(转)相关推荐

  1. javascript es6 属性 __proto__ prototype 原型链 简介

    目录 prototype __proto__ 原型链 构造函数创建对象实例 今天同事小英童鞋问了我一个问题: function Foo(firstName, lastName){this.firstN ...

  2. JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】

    笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目   录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...

  3. JS中函数的prototype属性和对象的__proto__属性

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  4. javascript中的prototype原型、_proto_属性、原型链

    prototype原型 JavaScript是面向对象的语言,那么继承自然是其重要特征之一.与标准面向对象语言不同,JavaScript继承主要通过prototype原型实现.每一个函数都具有prot ...

  5. JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法...

    函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留 ...

  6. 函数的prototype属性(原型对象)

    1.函数的prototype属性 每个函数都有一个prototype属性,它默认是一个空的Object的实例对象(即称为:原型对象),而原型对象中有一个属性constructor,它指向函数对象.这说 ...

  7. 201506230818_《JavaScript权威指南(第六版)——callee和caller、对象属性用作实参、自定义函数属性》(P175-180)...

    1. callee 正在执行的函数.使用方法:arguments.callee... caller 正在调用执行函数的函数. 2.对象属性用作实参,形如:function fn(arg) { var ...

  8. JavaScript 函数

    词语翻译列表: function:函数(Function未翻译) declare:定义 assign:指派,分配 functionbody:函数体(就是函数的内容) object:对象 propert ...

  9. Javascript函数执行、new机制以及继承

    JS函数执行 一个JavaScript函数fn,被执行有三种途径: fn() new fn() fn.call()或fn.apply() new机制以及继承 JavaScript中定义了一种对象,称之 ...

最新文章

  1. 剑指offer-丑数
  2. 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法...
  3. 大话云计算——认识云——“瑞友杯”虚拟化征文
  4. 图片在线转换base64
  5. 难过的要命。。。。。。
  6. 老生常谈session,cookie的区别,安全性
  7. 【Java面试题】19 final,finally和finalize的区别
  8. 用SoapUI进行WebService接口测试
  9. 如何高效并快速的掌握NLP与深度学习路径?来公众号寻找经验吧~
  10. vue全局组件中再创建多个组件
  11. 黑群晖二合一已损毁_黑群晖DSM6.2硬盘引导二合一镜像以及安装方法
  12. Java导出Excel(自定义格式)
  13. IDEA菜单栏不见了怎么办
  14. 360linux 杀毒软件,Linux下用360安全卫士/360杀毒国产系统适配专版显示有木马或是误报...
  15. 【数据分析与可视化】Pandas-Dataframe-IO操作
  16. Python人脸识别——从入门到工程实践
  17. c语言 周期性矩形脉冲,【转载】微分电路和积分电路
  18. 用了这么多年的MCU,你知道哪些MCU原厂最牛?
  19. 盛大吸金“传奇”不再 陈天桥帝国梦碎
  20. 区块链社交时代 或许永远不会到来

热门文章

  1. 还没搭建过Vue3.x项目?几行代码搞定~
  2. 尤大是如何发布vuejs的,学完可以应用到项目
  3. 魅族魅蓝mirror简单打开usb调试模式的步骤
  4. Xampp修改默认端口号
  5. maven正确的集成命令-U-B
  6. [置顶]tcpflow 抓包
  7. Linux命令-网络命令:wall
  8. C#中字符“.NET研究”串的内存分配与驻留池
  9. 分析android动画模块[转]
  10. 如何得到别人的上网帐号和密码