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 es6 属性 __proto__ prototype 原型链 简介
目录 prototype __proto__ 原型链 构造函数创建对象实例 今天同事小英童鞋问了我一个问题: function Foo(firstName, lastName){this.firstN ...
- JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目 录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...
- JS中函数的prototype属性和对象的__proto__属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- javascript中的prototype原型、_proto_属性、原型链
prototype原型 JavaScript是面向对象的语言,那么继承自然是其重要特征之一.与标准面向对象语言不同,JavaScript继承主要通过prototype原型实现.每一个函数都具有prot ...
- JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法...
函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留 ...
- 函数的prototype属性(原型对象)
1.函数的prototype属性 每个函数都有一个prototype属性,它默认是一个空的Object的实例对象(即称为:原型对象),而原型对象中有一个属性constructor,它指向函数对象.这说 ...
- 201506230818_《JavaScript权威指南(第六版)——callee和caller、对象属性用作实参、自定义函数属性》(P175-180)...
1. callee 正在执行的函数.使用方法:arguments.callee... caller 正在调用执行函数的函数. 2.对象属性用作实参,形如:function fn(arg) { var ...
- JavaScript 函数
词语翻译列表: function:函数(Function未翻译) declare:定义 assign:指派,分配 functionbody:函数体(就是函数的内容) object:对象 propert ...
- Javascript函数执行、new机制以及继承
JS函数执行 一个JavaScript函数fn,被执行有三种途径: fn() new fn() fn.call()或fn.apply() new机制以及继承 JavaScript中定义了一种对象,称之 ...
最新文章
- 剑指offer-丑数
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法...
- 大话云计算——认识云——“瑞友杯”虚拟化征文
- 图片在线转换base64
- 难过的要命。。。。。。
- 老生常谈session,cookie的区别,安全性
- 【Java面试题】19 final,finally和finalize的区别
- 用SoapUI进行WebService接口测试
- 如何高效并快速的掌握NLP与深度学习路径?来公众号寻找经验吧~
- vue全局组件中再创建多个组件
- 黑群晖二合一已损毁_黑群晖DSM6.2硬盘引导二合一镜像以及安装方法
- Java导出Excel(自定义格式)
- IDEA菜单栏不见了怎么办
- 360linux 杀毒软件,Linux下用360安全卫士/360杀毒国产系统适配专版显示有木马或是误报...
- 【数据分析与可视化】Pandas-Dataframe-IO操作
- Python人脸识别——从入门到工程实践
- c语言 周期性矩形脉冲,【转载】微分电路和积分电路
- 用了这么多年的MCU,你知道哪些MCU原厂最牛?
- 盛大吸金“传奇”不再 陈天桥帝国梦碎
- 区块链社交时代 或许永远不会到来