JS中prototype关键字的功能介绍及使用示例

prototype 关键字可以为 JS原有对象 或者 自己创建的类 中添加方法或者属性。
也可以实现继承。
例子：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS中 prototype 关键字的使用</title>
</head>
<script>
<!-- demo1 JS中原有对象中 添加方法 -->
Number.prototype.add = function (num){
return this+num;
}
function but1_click(){
alert((3).add(8));
}
<!-- demo2 JS中新建对象中， 添加属性 ，方法 -->
function Car(cColor,cWeight){
this.cColor = cColor;
this.cWeight = cWeight;
}
Car.prototype.drivers = new Array('zhangsan','lisi');
Car.prototype.work = function (cLong){
alert("我跑了"+cLong+"公里");
}
function but2_click(){
var c = new Car("red","5");
c.drivers.push('zhaoliu');
alert(c.drivers);
c.work(1);
}
<!-- demo3 JS中新建对象中， 添加属性 ，方法 紧凑的写法 -->
function Rectangle(rWeight,rHeight){
this.rWeight = rWeight;
this.rHeight = rHeight;
if( typeof this._init == 'undefined'){
Rectangle.prototype.test = function (){
alert("test");
}
}
this._init = true;
}
function but3_click(){
var t = new Rectangle(6,8);
t.test();
}
<!-- demo4 prototype 继承 -->
function objectA(){
this.methodA = function (){
alert("我是A方法");
}
}
function objectB(){
this.methodB = function (){
alert("我是B方法");
}
}
objectB.prototype = new objectA();
function but4_click(){
var t = new objectB();
t.methodB();
t.methodA();
}
</script>
<body>
<h2> prototype 关键字的使用 </h2>
<hr />
<input id="but1" type="button" value="demo1" onclick="but1_click()" />
<input id="but2" type="button" value="demo2" onclick="but2_click()" />
<input id="but3" type="button" value="demo3" onclick="but3_click()" />
<input id="but4" type="button" value="demo4" onclick="but4_click()" />
</body>
</html>

赞 (0)

相关推荐

  • js类定义函数时用prototype与不用的区别示例介绍

    一直在使用js编写自以为是面向对象的方法,遇到一个问题,就是定义一个方法,如下: 复制代码 代码如下: function ListCommon2(first,second,third) { this.First=function () { alert("first do"+first); } } ListCommon2.do1=function(first) { // this.First(); alert("first do"+first); } ListComm

  • javascript 进阶篇3 Ajax 、JSON、 Prototype介绍

    javascript 进阶篇3 Ajax 、JSON、 Prototype介绍

    Ajax 这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下. Ajax技术的创新之处在于,改善了传统的"请求-等待-响应-刷新-返回数据"模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新.这样大大的提高了交互性. Ajax其实并不是一个技术,而是由许多技术组成的.最大的特色之一就是可以异步传输,实现多线程服务. Ajax的异步传输,依靠的是js中的XMLHttpRequst对象,于是我们从它入手. XMLHttpRequest是XMLHttp组建

  • JS中的prototype与面向对象的实例讲解

    复制代码 代码如下: <script language="javascript" type="text/javascript">         //(1)把一个方法变成一个对象,为对象创建方法和属性         var Name = function () {             //通过prototype给一个对象创建方法             Name.prototype.Add = function (num, title) {    

  • js中继承的几种用法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

  • 深入浅析JavaScript中prototype和proto的关系

    深入浅析JavaScript中prototype和proto的关系

    prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性). __proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome.firefox中名称为__proto__,并且可以被访问到).原型链正是基于__proto__才得以形成 (note:不是基于函数对象的属性prototype). 简单的说:__proto__是内部原型,pr

  • js使用Array.prototype.sort()对数组对象排序的方法

    本文实例讲述了js使用Array.prototype.sort()对数组对象排序的方法.分享给大家供大家参考.具体分析如下: 在讲对数组对象进行排序时,我们先来简单的了解一下Array.prototype.sort().sort方法接受一个参数--Function,function会提供两个参数,分别是两个进行比较的元素,如果元素是String类型则通过Unicode code进行比较,如果是Number类型则比较值的大小.如果比较的函数中返回1则两个元素交换位置,0和-1不交换位置.先看一个例

  • 深入分析js中的constructor和prototype

    深入分析js中的constructor和prototype

    我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性.我们来看一个例子,来说明这个 复制代码 代码如下: function a(c){ this.b = c; this.d =function(){ alert(this.b); } } var obj = new a('test'); alert(typeof obj.prototype);//undefine alert(typeof a

  • 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    1.typeof(param) 返回param的类型(string) 这种方法是JS中的定义的全局方法,也是编译者们最常用的方法,优点就是使用简单.好记,缺点是不能很好的判断object.null.array.regexp和自定义对象. 示例代码: 复制代码 代码如下: var str='str';var arr=['1','2'];var num=1;var bool=true;var obj={name:'test'};var nullObj=null;var undefinedObj=un

  • 为JS扩展Array.prototype.indexOf引发的问题探讨及解决

    Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.indexOf(),这样用起来就比较方便了.但是这个自定义的indexOf在对数组进行遍历的时候却出现了问题. Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.indexOf(),这样用起来就比较方便了. 复制代码 代码如下

  • JS 面向对象之神奇的prototype

    JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念. 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,

  • js的Prototype属性解释及常用方法

    js的Prototype属性解释及常用方法

    函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文).这个属性非常有用:为一个特定类声明通用的变量或者函数. prototype的定义 你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在.你可以看看下面的例子: Example PT1 复制代码 代码如下: function Test(){}alert(Test.prototype); // 输出 "Object" 给prototype添加属性 就如你在上面所看到

  • 解析jQuery与其它js(Prototype)库兼容共存

    一.在运行这个函数后,可以恢复使用别名 $ ,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用.jQuery Code: 复制代码 代码如下: jQuery.noConflict();(function($) {  $(function() {    // 使用 $ 作为 jQuery 别名的代码  });})(jQuery);// 基于其他库用 $ 作为别名的代码 二.在运行这个函数后,可以创建一个新的 jQuery 别名来替换原来的 jQuery 别名 $ 来使用.jQuer

随机推荐