JS中 prototype 关键字的使用

来源:互联网 发布:linux vim 保存 编辑:程序博客网 时间:2022/01/24 05:39

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>