JavaScript中通过原型添加方法,解决数据共享问题…

涉及知识点：（1）原型的引入（2）构造函数、原型对象和实例对象之间的关系（3）__proto__和prototype的理解

直接举例：在自定义构造函数创建对象时，因为创建的对象使用的不是同一个方法，所以创建对象越多，就会开辟大量空间造成内存浪费。

验证：在<script>标签中写如下代码，浏览器中打开，按F12可以看到所创建的对象都拥有各自的方法。其中的console.dir(per);可以把这个对象的结构显示出来。

?                   ?

而且将方法放在构造函数外部来指向同一个函数也不好，虽然可以使用相同方法但是在外部函数定义时容易引起变量命名冲突的问题，<script>中写入代码，验证如下：

?                ?

所以引入原型的概念，在<script>中写入代码，控制台看到对象的各自的方法是相同的（true），共享的，就不会开辟多余空间造成内存浪费。

?   ?

那么这就有一个问题：实例对象中根本没有eat方法,但是能够使用,这是为什么？要明白这个问题，首先需要知道一些知识。就是要知道__proto__和prototype之间的关系，以及构造函数、原型对象和实例对象三者之间的关系。先上图再解释！

?

1、在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。

2、JS里所有的对象都有__proto__属性，也可称为隐式原型，指向构造该对象的构造函数的原型。保证了实例能够访问在构造函数原型中定义的属性和方法。

3、只有函数function才具有prototype属性。这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

4、实例对象的__proto__和构造函数中的prototype相等--->true。又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype，实例对象的__proto__指向了构造函数的原型对象prototype。对象.proto=构造器.prototype。

5、实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性，__proto__也可以叫原型对象

构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性，prototype可以叫原型对象

 

接下来对上图进行解析（重点）：由Person.prototype.eat=function () 知道eat方法不在实例对象中，而是在构造函数的原型对象中，但是实例对象可以使用eat方法，是因为实例对象的原型__proto__指向了原型对象，原型对象中有eat方法，所以p1就可以使用eat方法而原型对象是在构造函数里面的prototype属性中。

以上内容属于个人学习总结，便于以后的回忆复习，有误之处，还望指正。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有