【JavaScript】原型

深碍√TFBOYSˉ_ 2022-07-16 00:21 154阅读 0赞

#   一、原型 #

我们创建的每个函数都有一个 prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype 通过调用构造函数而创建的那个对象的原型对象。 使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

#   二、原型代码 #

function Box() {} //声明一个构造函数
 Box.prototype.name = 'Lee'; //在原型里添加属性
 Box.prototype.age = 100;
 Box.prototype.run = function () { //在原型里添加方法
 return this.name + this.age + '运行中...';
 };
 //比较一下原型内的方法地址是否一致：
 var box1 = new Box();
 var box2 = new Box();
 alert(box1.run == box2.run); //true，方法的引用地址保持一致

为了更进一步了解构造函数的声明方式和原型模式的声明方式， 我们通过图示来了解一下：

![Center][]

![Center 1][]

#    #

#     #

#  三、组合构造函数+  原型模式 #

原型模式创建对象也有自己的缺点， 它省略了构造函数传参初始化这一过程， 带来的缺点就是初始化的值都是一致的。而原型最大的缺点就是它最大的优点，那就是共享。

原型中所有属性是被很多实例共享的， 共享对于函数非常合适， 对于包含基本值的属性也还可以。但如果属性包含引用类型，就存在一定的问题：

var box2 = new Box();
 alert(box2.run()); //共享带来的麻烦，也有'哥哥'了

PS：数据共享的缘故，导致很多开发者放弃使用原型，因为每次实例化出的数据需要保留自己的特性，而不能共享。

为了解决构造传参和共享问题，可以 组合构造函数+ 原型模式：

#   四、继承 #

1、继承是面向对象中一个比较核心的概念。 其他正统面向对象语言都会用两种方式实现继承：一个是接口实现，一个是继承。而 ECMAScript 只支持继承，不支持接口实现，而实现继承的方式依靠原型链完成。

2、原型链继承流程图

![Center 2][]

#    【总结】 #

自己认为原型模式该开始学习的时候还是比较难理解的但是通过自己很好的学习之后觉着好了很多，看来总结的知识是很重要的，无论是新的知识还是旧的知识。

[Center]: /images/20220716/5795f80cb0084125865107281ab29730.png
[Center 1]: /images/20220716/55cf498f5d494d8f91c4ad8415e8be9a.png
[Center 2]: /images/20220716/0ad7ea88cca8422ea1a91856cfaa88c7.png