Javascript之深入浅出prototype

前端之家收集整理的这篇文章主要介绍了Javascript之深入浅出prototype前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们先来讲一个故事,一个大大的池塘,里面有很多鱼。这是属于我们大家的池塘所以里面的鱼我们都可以吃,但是我们也会从集市买一些鱼放在家里,那么放在家里的鱼肯定是属于我们私人的,外人是不会拥有的。那么在js里我们就把这个池塘称为

原型对象

,池塘里面我们所共享的鱼称为

原型中的属性方法

,而我们自己的鱼称为

构造函数中的属性方法

,我们是什么呢?对了,我们是

对象的实例

以上是为了让大家能够趣味性的对prototype有一个概念,接下来就通过代码具体总结一下prototype~

一、理解prototype

我们创建的每一个函数都有一个prototype属性,这个属性是一个指向对象的指针。

构建对象中有一种模式叫做原型模式,意思是将对象实例所不可共享的属性方法定义在构造函数中,而将可共享的属性方法放在原型对象中,也就是prototype指向的对象中。以下是用原型模式创建的一个对象:

这里我将name、age属性定义在构造函数中,将sayName方法定义在原型中。所以p1和p2对象实例的内存空间里面各有一份name和age,但是它们却共享一份sayName方法,意思是它们调用的sayName方法是同一个。

试想如果我们不用prototype,而是直接将sayName写进构造函数呢?

那么p1和p2中将各有一份sayName,这样浪费内存空间,所以用

prototype的好处之一:提高了代码的复用性,减少内存

在了解原型对象的同时我们还有一个小知识要明白:每当代码读取一个对象属性的时候会执行一次搜索搜索目标是给定名字的属性搜索路径为:

对象实例本身---->原型对象---->对象所继承的父类对象---->父类对象原型...---->原型链末端

二、prototype的注意点

基本类型:

非基本类型:

2、同名覆盖性:如果我们在实例中添加了一个与原型属性同名的属性,那么该属性会创建到对象实例中并且会覆盖掉原型中的相应属性

3、使用对象字面量创建原型方法,会切断之前的链而重写原型链

因为prototype指针指向了一个新的对象,切断了构造函数与之前的prototype旧对象的联系,所以p1不能调用了它。那么p1调用新对象的属性呢?

p1.age; // error

所以我做了一个大胆的猜测,就是以前包含sayName的旧对象被“抛弃”了,也就是被内存回收了,然而p1的prototype指针指向的依旧是旧对象,所以会产生error。

三、总结

prototype的用法:构造函数模型用于定义实例的属性,而原型模型用于定义方法和共享的属性

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/41967.html

猜你在找的JavaScript相关文章