JavaScript高级特性之原型
JavaScript的原型
原型prototype属性仅仅适用于函数对象(这里的函数对象是自己为了理解更好定义的,普通对象是没有原型属性的)
1.研究函数原型:
<script type="text/javascript">
//原型是函数对象的一个属性(普通对象是没有原型属性的.).
function Person(){
this.name="李卫康";
this.sayHi=function(){
alert("Hi");
}
};
//调用函数对象Hero的属性和方法:new Hero()
var p=new Person();
//调用函数对象Hero的属性或方法时,实际上调用new之后的hero对象.
alert(p.name);
//调用函数对象的原型属性,是应该调用Hero对象还是hero对象呢? alert(Person.prototype); </script>
javascript中没有类的概念。仅仅有对象的概念.那么原型属性是定义在函数对象(相当于Java中的类)中,还是new的对象中呢.普通情况下我们研究是JavaScript的函数对象中的原型.
2.函数对象中添加属性和方法的方式(分散式和集中式)
定义函数对象:
function Person(){
this.name="李卫康";
this.sayMe=function(){
alert("Hi");
}
}
(1)分散式定义属性和方法:
Person.prototype.value="是头猪";
Person.prototype.sayHi=function(){
alert("Hi");
}
通过new对象的方式測试:
var p=new Person();
alert(p.value);
p.sayHi();
(2).集中式为函数原型添加属性
Person.prototype={
value:"是猪";
sayHi:function(){alert("Hi");}
}
分散和集中式都能够为函数添加属性。可是我们推荐集中式的为函数添加属性
3.函数对象的属性或方法与原型的属性或方法同名时:
<script type="text/javascript">
//这表明了原型上的属性和方法加上去了可是优先级是函数对象上的属性和方法的优先级要高于函数对象的原型上的属性和方法的
/*
* 函数对象的属性或方法与原型的属性或方法同名时:
* * 调用的属性和方法,是函数对象的属性和方法
* * 函数对象本身的属性和方法与原型的属性和方法同一时候存在
* * 函数对象本身的属性和方法的优先级要高于原型上的熟悉感和方法
*/
function Hero(){
this.name = "李卫康";
this.sayMe = function(){
alert("我是李卫康.");
}
} //原型添加的属性和方法,究竟有没有添加上去呢? Hero.prototype = {
name : "周芷若",
sayMe : function(){
alert("我是周芷若.");
}
} var hero = new Hero(); alert(hero.name); //output zhangwuji delete hero.name; alert(hero.name); //output zhouzhiruo </script>
測试:第一个打印的是李卫康.而不是周芷若.这说明函数原型中的属性和函数定义的重名的时候不会被覆盖..函数对象的是函数对象的 原型的是原型的....把函数对象中的属性删除后..我们在打印:周芷若...
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
4.利用原型又一次定义函数对象:也就是说我们定义函数对象的时候定义一个空的,把全部的属性和方法定义在原型中.
<script type="text/javascript">
//定义一个空的函数
function Person(){};
//把属性和方法定义在函数原型上
Person.prototype={
name:"程崇树",
seeAV:function(){
alert("树哥喜欢蔡司!");
}
}
var p=new Person();
alert(p.name);
p.seeAV(); </script>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
5.扩展内建对象的属性和方法(我们为Array对象添加了一个函数....)
<script type="text/javascript">
Array.prototype.inArray=function(color){
for(var i=0;i<Array.length;i++){
if(this[i]=="red"){
return true;
}
}
return false;
}
var color=["red","blue"];
alert(color.inArray("red")); </script>
最新文章
- 浅谈iOS开发中方法延迟执行的几种方式
- UITableView相关知识点
- [VSTS] 从零开始 Team Foundation Server 2010 安装配置详细图文教程
- 关于动态URL地址设置静态形式
- C#设计模式——抽象工厂模式(原文转自:http://blog.jobbole.com/78059/)
- XX宝面试题——JS部分
- matalab(绘图)
- phpstom 实用laravel 需要附加的 命令
- vim 添加到右键 windows
- JAVA中的static修饰的方法不能被重写
- bzoj2818
- 常用的50条linux 命令
- cygwin--简单备忘
- onvif规范的实现:server端Discovery实现,通过OnvifTestTool12.06测试
- IIS 添加mime 支持 apk,exe,.woff,IIS MIME设置 ,Android apk下载的MIME 设置 苹果ISO .ipa下载mime 设置
- 采用Eclipse中间Maven构建Web项目错误(一)
- WebSocket 示例
- 使用open live writer客户端写博客
- Scala常用变量生命周期
- GDI基础(2):绘制文本
热门文章
- android 可拖动控件 ontouchevent
- 自学Python五 爬虫基础练习之SmartQQ协议
- input表单(02)
- 关于改变安卓Button样式,这里有一个好方法。
- PL/SQL之基础篇
- 分割字符串 ExtractStrings
- Canopy聚类算法分析
- We wanted {";required";:[";value";]} and you sent [";text";,";value";,";id";,";sessionId";]
- <;meta http-equiv=";refresh"; content=";3";>; 什么意思?
- 【转载】JSTL 标签大全详解