你真的懂prototype吗

爱被打了一巴掌 2022-06-11 00:55 294阅读 0赞

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>

运行输出的结果是：

![Center][]

原型里的方法，在我们new对象时js程序会把原型方法复制到对象上，所以new出来的对象都会有原型方法。prototype下面的方法只能通过类的实例（即new后的对象）来调用,

prototype的目的是为了对象的属性的扩展，它本身是个对象，是对象就可以用key-value形势扩展属性的方法。

重点看看原型prototype属性到底是什么？在chrom里设置断点，打开调试可看到如下信息。

![Center 1][]

prototype属性里默认有constructor和\_\_proto2个属性和一个自定义属性HelloProtoType.

constructor就是构造函数的意思，当前环境指的是Prople(sex)方法，

\_\_proto\_\_是原型链的意思，当我们访问一个对象的属性 时，如果这个对象内部不存在这个属性，那么他就会去\_\_proto\_\_里找这个属性，这个\_\_proto\_\_又会有自己的\_\_proto\_\_，于是就这样 一直找下去。

原型方法和类方法的区别：

1.   类方法可以通过类名直接调用，prototype下面的方法只能通过类的实例（即new后的对象）来调用。

2.   this变量，类方法里无法使用this变量来调用本身对象其他的属性，而原型方法可以使用this变量，this指向的是函数本身