prototype是学习js的一个重要的概念,即原型的意思,它是属于类型的一个属性,我们知道js里任何元素都要当成对象处理,而类型和对象是不一样的,类型像java里的Class,对象类似java里new出来的对象。我们今天介绍的prototype是属于类型的。
先上个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试protytype</title>
</head>
<body>
</body>
<script>
function People(sex)
{
this.sex=sex;
//对象方法
this.hello=function(){
console.log("我的性别是: " + this.sex);
}
}
//类方法,类似于静态方法
People.Hello=function(sex){
console.log("我的性别是: " + sex);
}
//原型方法,对象实例化后才能调用
People.prototype.HelloProtoType=function(sex){
console.log("我的性别是: " + sex);
}
//测试对象方法
var p1=new People("男");
p1.hello();
//测试类方法
People.Hello("未知");
//测试原型方法
p1.HelloProtoType("女");
//new 出来的对象是没prototype的,prototype属于类型
console.log("p1.prototype:" + p1.prototype);
console.log("People.prototype:" + People.prototype);
</script>
</html>
运行输出的结果是:
原型里的方法,在我们new对象时js程序会把原型方法复制到对象上,所以new出来的对象都会有原型方法。prototype下面的方法只能通过类的实例(即new后的对象)来调用,
prototype的目的是为了对象的属性的扩展,它本身是个对象,是对象就可以用key-value形势扩展属性的方法。
重点看看原型prototype属性到底是什么?在chrom里设置断点,打开调试可看到如下信息。
prototype属性里默认有constructor和__proto2个属性和一个自定义属性HelloProtoType.
constructor就是构造函数的意思,当前环境指的是Prople(sex)方法,
__proto__是原型链的意思,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去。
原型方法和类方法的区别:
1. 类方法可以通过类名直接调用,prototype下面的方法只能通过类的实例(即new后的对象)来调用。
2. this变量,类方法里无法使用this变量来调用本身对象其他的属性,而原型方法可以使用this变量,this指向的是函数本身