js中prototype的理解

来源：互联网发布：淘宝未发货退款影响吗编辑：程序博客网时间：2024/04/27 09:47

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>prototype理解</title>
</head>
<body>
<button onclick="People('zhangsan')">点一下</button>
</body>
<script type="text/javascript">
//js的方法可以分为三类：对象方法、类方法和原型方法
//对象方法
function People(name){
this.name=name;
this.introduct=function(){
alert("My name is"+this.name);
console.log("My name is"+this.name);
}
}
/* var p=new People("zhangsan");
console.log(p); */
//类方法
/* People.Run=function(){
alert("I can run");
}
console.log(People.Run()); */
//原型方法
/* People.prototype.introduceChinese=function(){
alert("我的名字是"+this.name);
}
var p=new People("zhangsan");
console.log(p.introduceChinese()); */
//prototype是一个对象，因此我们可以给它添加属性，
//我们添加给prototype的属性或者方法将会成为通过这个构造方法生成的对象的通用属性和方法
/**
function Fish(name,color){
this.name=name;
this.color=color;
this.swim1=function(){
alert("I can swim");
}
}
Fish.prototype.liveIn='water';
Fish.prototype.price=20;
Fish.prototype.swim=function(){
alert("I swiming in water");
}
function test(){
var fishs=new Array();
var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");
fishs.push(fish1);
fishs.push(fish2);
fishs.push(fish3);
for (var i=0; i<fishs.length; i++){
alert(fishs[i].name+","+fishs[i].color+","+fishs[i].liveIn+","+fishs[i].price);
//fishs[i].swim1();
}
}
console.log(test());
**/
//子类重写父类的属性和方法，要注意不能修改父类的属性和方法，可以这样写Aclass2.prototype=new Aclass();
//把父类的一个实例对象赋值给子类的prototype属性，我们调用实例对象的时候，首先会调用构造函数的属性和方法，然后是
//prototype中写的和父类的属性和方法
/**
function Aclass(){
this.property=1;
this.method=function(){
alert(1);
}
}
function Aclass2(){
this.property=2;
this.method=function(){
alert(2);
}
}
Aclass2.prototype.property=3;
Aclass2.prototype.method=function(){
alert(4);
}
Aclass2.prototype=new Aclass();
var obj=new Aclass2();
//首先弹出的是构造函数中定义的所以是2，2，如果构造函数中没有写的话，prototype和继承父类中的是平级，谁在最后写着先调用谁
alert(obj.property);
obj.method();
**/
//可以给实例增加方法和属性，但是只是使用该实例，重新new的实例不适应
/* function Aclass(){
this.Property = 1;
this.Method = function(){
alert(1);
}
}
var obj = new Aclass();
obj.Property2 = 2;
obj.Method2 = function(){
alert(2);
}
alert(obj.Property2);
obj.Method2();
*/
function baseClass(){
this.showMsg = function(){
alert("baseClass::showMsg");
}
}

function extendClass(){
this.showMsg =function (){
alert("extendClass::showMsg");
}
}
//extendClass.prototype = new baseClass();
var instance = new extendClass();
//注意，new出来的对象没有prototype这个属性
var baseinstance = new baseClass();
//alert(baseClass.prototype.constructor);
//alert(baseinstance.prototype);
//类方法只能通过类名.函数名来调用，构造函数的方法只能通过对象名.方法名来调用，反之没有效果
extendClass.showMsg1=function(){
alert("类方法");
}
//baseinstance.showMsg1.call(instance);
instance.showMsg.call(baseinstance);
</script>
</html>

阅读全文

0 0