高级面向对象之原型链

亦凉 2022-06-14 05:22 239阅读 0赞

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原型链</title> </head> <body> <script> 知识点: 1:实例对象与原型之间的连接,叫做原型链 2:_proto_或([[prototype]]) (隐式链接),存在于实例 对象中,这个属性对脚本是不可见的 3:Object对象类型是原型链的最外层(Object.prototype) 原型对象: 无论什么时候,只要我们创建一个新函数,就会根据一个特定的组织规则,为该函数创建一个prototype属性, 这个属性指向函数的原型对象,在默认情况下,原型对象会自动获取一个constructor(构造函数)属性, 它是一个指针,指向prototype属性所在的函数 demo: function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); } var person1 = new Person(); person1.sayName(); // "Nicholas" var person2 = new Person(); person2.sayName(); //"Nicholas" alert(person1.sayName == person.sayName); Demo 中 我们创建了一个构造函数Person,这时候系统会默认给Person对象添加一个prototype属性, 这个属性指向Person 对象的原型对象,当然系统也会给原型对象添加一个constructor属性,这个属性是一个指针,指向prototype 属性所在的函数(既Person构造函数)。此时我们没有给Person原型对象添加属性和方法,但是object对象的原型上的方法 我们却可以访问,因为object对象的原型对象是原型链上的最外层。然后我们给Person对形象的原型上添加了3个属性和一个 方法,这三个属性和一个方法将会被Person对象的所有实例对象共享,如实例对象person1和person2都能调用sayName方法 ,并且这个两个实例对象调用的是同一个方法,的到的结果也相同。 然后我们通过构造函数(new)创建了两个实例对象person1和person2,系统会默认的给这两个实力对象添加一个属性[[prototype]] 它是一个指针,它指向构造函数的原型对象,虽然在脚本中没有标准的方式来访问这个属性,但是在firefox和chrome中,我们可以 通过_proto_来实现访问,这个链接(_proto_)存在于实例对象与构造函数的原型对象之间,而不是存在于实例对象与构造函数之间 具体流程我们可以看下图 </script> </body> </html>

![Center][]

[Center]: /images/20220614/4aecb8088248429da1b8ba9d97a3d700.png