浅析JavaScript的prototype
一、JavaScript对象的创建
(1)对象方法
function Student(name){
this.name=name;
this.showName=function(){
alert("my name is "+this.name);
};
}
调用showName方法:
new Student('a').showName();
对象方法的调用,类要生成一个实例,该实例可以调用该方法;
(2)类方法
Student.showAge=function(){
alert('age is 20');
}
调用方式:
Student.showAge();
类方法相当于C#的静态方法,不需要new一个对象实例,可以直接调用;
(3)继承方法
Student.prototype.sayHello=function Hello(){
alert('hello');
}
调用方法:
new Student('a').sayHello();
原型方法一般用与继承父类的方法和方法共享;
(4)对象的字面量方式创建
var p2={
age:21,
name:'jack',
sayAge:function(){
alert(this.age);
}
}
调用方法
p2.sayAge();
二、prototype的用法
(1)创建一个基类对象
function baseClass(){
this.name='jack';
this.showMsg=function(){
alert('base');
};
}
(2)创建一个新的对象
function extendClass(){
this.age=20;
}
(3)新对象引用原型对象
extendClass.prototype=new baseClass();
(4)查看新对象

在此,我们可以看到extendClass继承了baseClass的属性和方法,在extendClass对象中可以调用baseClass的对象和方法;
三、调用原型对象中的方法;
如果当原型对象和本对象均有同名的方法和属性时,调用时会先调用本对象的方法和属性;
(1)原型对象
function baseClass(){
this.name='jack';
this.showMsg=function(){
alert('base');
};
}
(2)新对象
function extendClass(){
this.age=20;
this.name='rose';
this.showMsg=function(){
alert('extend');
}
}
(3)新对象继承原型对象
extendClass.prototype=new baseClass();
(4)调用对象的方法

通过结果我们可以看到,当新对象和原型对象都有同一个属性和方法时,会调用本对象的方法和属性,那么我们该如何调用原型对象的方法和属性呢
4.1 使用__proto__来调用

4.2 使用call来调用
new baseClass().showMsg.call(new extendClass())
将extendClass对象当做bassClass对象,来调用baseClass的对象方法
(5)call和apply的使用和区别
5.1 call和apply主要是用来改变函数运行时的上下文,他俩功能一致;但在参数传递时:call传递参数个数任意,apply传递参数是数组形式;
5.2 call和apply的运用
基础方法
function Dog(name){
this.name='dog';
this.showName=function(){
alert("name1:"+this.name);
}
}
新的对象
function Fish(){
this.name='fish';
}
当Fish对象想要调用showName方法时,可用使用apply,或者call
var dog=new Dog();
var fish=new Fish();
dog.showName.call(fish)
dog.showName.apply(fish,[])
四、小结
五、参考链接
1、http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html
2、http://bbs.csdn.net/topics/390775296
浅析JavaScript的prototype的更多相关文章
- javascript 之 prototype 浅析
prototype 原型 javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别 ...
- 浅析 JavaScript 中的 函数 currying 柯里化
原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- Javascript: 从prototype漫谈到继承(2)
本文同时也发表在我另一篇独立博客 <Javascript: 从prototype漫谈到继承(2)>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 上 ...
- JavaScript 笔记 ( Prototype )
这阵子实在好忙 ( 这样说好像也不是一两个月了... ),然后因为工作伙伴都是 JavaScript 神之等级的工程师,从中也学到不少知识,毕竟就是要和强者工作才会成长呀!为了想好好瞭解他们写的程式码 ...
- Javascript Array.prototype.some()
当我们使用数组时,查找数组中包含某个特殊的项是非常常见的动作.下面例子是一个简单的实现: 01 planets = [ 02 "mercury", 03 " ...
- JavaScript和prototype
Protoype这个词在javascript中可以有两种理解: 第一种是作为javascript中的一个属性,其一般出现的形式为:类名.prototype. prototype 属性让你有能力向对象添 ...
- 在 JavaScript 中 prototype 和 __proto__ 有什么区别
本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
随机推荐
- 用Python实现《芳华》小说中的汉字频率统计
环境: Python 3的代码,亲测可用. 思路: 是先把每个字符提出来放在列表里:再过滤掉其中的标点符号:最后用字典对某个字出现的频率进行累加. 扩展: 用处很多,稍微改改,既可以用来统计小说或文 ...
- Ironic几种不同的场景下的网络拓扑
最近帮领导做了几页ppt,总结几种场景下ironic管理物理机网络的网络拓扑,简单做成一份文章记录下.只是方便自己记忆,没有认真修改.如果对ironic有一定了解,可以看下,加深理解. 1. vlan ...
- MyBatis入门一
本人只是刚刚学习MyBatis,作为学习路程的记录,写的不好,不完善的地方请多多包涵: 首先,先比较一下Hibernate和MyBatis两种框架之间的区别: 两种都是ORM框架,但是Hibernat ...
- 浅谈this关键字
在我学习this关键字的时候,通过查找资料总结出一些this的特殊用法, 供大家参考,代码里面有我总结的分析过程! 箭头函数里的this: var username = "全局"; ...
- Minicom串口工具安装及配置
Minicom串口工具安装及配置 1. 简述 嵌入式开发多采用串口线连接电脑进行开发及调试. 2 安装及配置串口工具(以Minicom为例) Tiny4412开发板提供的有RS232电平的DB9公头接 ...
- R︱Linux+Rstudio Server尝鲜笔记(打造最佳Rstudio体验+报错的解决方案)
Rstudio Server 是Rstudio开发的基于R语言的网页版(只能在Linux),你在手机上都可以运行R,还是挺方便的.就是配置起来有点麻烦. 官方下载链接:https://www ...
- R语言学习笔记︱Echarts与R的可视化包——地区地图
笔者寄语:感谢CDA DSC训练营周末上完课,常老师.曾柯老师加了小课,讲了echart与R结合的函数包recharts的一些基本用法.通过对比谢益辉老师GitHub的说明文档,曾柯老师极大地简化了一 ...
- Linux 系统裁剪笔记1
1.什么裁剪? 本篇文章的主要目的是让笔者和读者更深的认识Linux系统的运作方式,大致内容就是把Linux拆开自己一个个组件来组装,然后完成一个微型的Linux系统.下面,让我们来实现吧..写的不好 ...
- 将搜狗词库(.scel格式)转化为txt格式
参考:http://blog.csdn.net/zhangzhenhu/article/details/7014271 #!/usr/bin/python # -*- coding: utf-8 -* ...
- table行随鼠标变色
table行随鼠标变色 1.设计表格 <body class="html_body"> <div class="body_div"> & ...