当前位置: 首页 > Web前端 > HTML5

你真的明白javascript中的原型和原型链了吗

时间:2023-04-05 18:21:58 HTML5

你真的了解javascript中的原型和原型链吗?有一个__proto__属性。在JavaScript中,函数是一等公民,即函数也是对象原型,什么是__proto__prototype?下面这段代码,我们慢慢看//Animal是一个构造函数,所以它有一个原型属性functionAnimal(){}//在原型上定义eat方法Animal.prototype.eat=function(food){console.log("它正在吃东西"+食物);}//构造函数实例化a1consta1=newAnimal();//构造函数实例化a2consta2=newAnimal();//调用实例方法a1.eat("food");a2.eat("食物");从上面的代码我们可以看出:函数的原型指向了一个对象。函数实例化后的对象可以获得原型指向该对象的方法(和属性)。关系如何?从图中我们可以看出,Animal的原型指向一个对象Animal的实例,通过__proto__与Animal的原型所指向的对象相关联。用官方的话说,函数原型指向的对象就是函数创建的实例。原型(即:a2和a2的原型是Animal.prototype)那么问题来了,什么是原型?在JavaScript中,每个对象(null除外)在创建时都与另一个对象关联,对象和原型通过__proto__关联。原型的作用在上面的代码中,我们可以看到实例对象是没有eat方法的,但是每个实例对象都可以调用eat方法,那么这中间的过程是怎样的呢?当我们调用实例对象(a1和a2)的方法(eat)时,如果找到了,就直接调用实例对象的方法或属性;如果找不到,我们会检查关联的原型上是否有这个方法,如果原型不存在,则会继续查找原型的原型(原型的原型将在后面讨论).prototype的原型上面已经提到了。如果在网上找不到对应的属性或方法,就会在原型的原型上搜索,那么原型的原型是什么?首先,文章开头我们说了每个对象都有原型,而原型也是对象,所以原型也有原型(听起来有点绕)。前面代码点中的Animal.prototype的原型(也就是Animal.prototype.__proto__)在哪里给谁呢?这里Animal.prototype是由JavaScript内置构造函数Object生成的,那么它应该指向Object.prototype吗?答案是肯定的,Object.prototype也是一个对象,那它的原型呢?Object.prototype.__proto__指向哪个对象?答案是:无;即:Object.prototype.__proto__===null//true//表示如果在查找属性时仍然没有Object.prototype,则停止,如果没有,最后画一张图:原型链通知上图是中间的蓝线部分,这就是著名的原型链。补充知识constructor:这是prototype中内置的属性,指向constructor__proto__:这个属性实际上是浏览器实现的,不是访问prototype的标准方式;ES5官方规定的方法是:Object.getPrototypeOffang'faObject.getPrototypeOf(a1)===Animal.prototype//true上面的知识,最后的图如下:思考题:我们在文章开头说的是函数也是对象。既然对象都有原型,那么Animal的原型指向谁呢?Function.prototype===Function.__proto__是真的吗?