美文网首页
『跟着老谭学 JavaScript』使用原型

『跟着老谭学 JavaScript』使用原型

作者: zhiwei1988 | 来源:发表于2018-01-05 21:57 被阅读0次

原型是什么

我们创建的每个函数都有一个 prototype 属性,这个属性是一个引用,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

为什么要使用原型

我们知道通过构造函数,我们可以方便地创建对象,但同时也存在一个问题,那就是每个方法都要在每个实例中重新创建一遍

<script src="https://gist.github.com/zhiwei1988/d1ac7d5cb25b1529a5df651469eeb76b.js">
</script>

使用原型对象的好处是可以让所有实例共享它所包含的属性和方法。

组合使用构造函数模式和原型模式

单纯地使用原型模式存在的问题:

  1. 所有实例在默认情况下都取得相同的属性值;
  2. 原型中所有属性都是被很多实例共享的,这一点对于包含引用类型值的属性来说,可能就不是我们想要的了。

利用构造函数和原型对象各自的特点,构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性。这样即使所有实例共享同一个方法,减少代码的冗余,又使每个实例有自己特有的属性。

<script src="https://gist.github.com/zhiwei1988/6050a04a74c80501eac65f7097eb6ad9.js">
</script>

原型是动态的:任何时刻原型中添加了新的属性或方法,集成该原型的对象都能立刻使用该属性或方法。

重写原型:任何情况下,都可重写原型的属性和方法;调用对象方法时,如果在对象中找不到,将在原型中查找它。如果在对象中找到了,对象中的属性或方法会覆盖原型中的属性或方法。

建立原型链

ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

没错,建立原型链的目的就是为了继承。

我们先来看下构造函数、原型和实例的关系:

[图片上传失败...(image-ab70b7-1515160669449)]

  1. 每个构造函数都有一个原型对象(prototype 属性);
  2. 原型对象都包含一个指向构造函数的指针;
  3. 实例都包含一个指向原型对象的内部指针;
  4. SubType 类型的原型对象是 SuperType 类型的实例;

注意:instance.constructor 现在指向的是 SuperType,这是因为现在 instance 实例所指向的原型对象中并没有指向构造函数的指针,它是 SuperType 类型的一个实例,这个实例中又存在指向原型对象的指针,这个原型对象所指向的构造函数是 SuperType。

确定原型和实例的关系

有两种方式可确认原型和实例的关系:

alert(instance instanceof SubType);
alert(SubType.prototype.isPrototypeOf(instance));

原型链的问题

包含属性值的原型对象,其属性值会被所有实例共享,而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。下列代码可以用来说明这个问题:

<script src="https://gist.github.com/zhiwei1988/b4b5d685c0a17479083f9b615db02c38.js">
</script>

组合继承

组合继承使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。下面来看一个例子。

<script src="https://gist.github.com/zhiwei1988/597291e4ebe0fd6c63497f9446d28929.js">
</script>

组合继承避免了原型链和借用构造函数的缺陷,并结合了它们的优点,是 JavaScript 中最常用的继承模式。而且,instanceof 和 isPrototypeOf() 也能够用于识别基于组合继承创建的对象。

相关文章

  • 『跟着老谭学 JavaScript』使用原型

    原型是什么 我们创建的每个函数都有一个 prototype 属性,这个属性是一个引用,指向一个对象,而这个对象的用...

  • JS中的原型我们来搞懂它

    原型是什么? JavaScript对象可以从其他对象那里继承属性和行为,更具体的来说,JavaScript使用原型...

  • 原型与原型链

    JavaScript仍然大量地使用了对象,为了保证对象之间的联系,JavaScript引入了原型与原型链的概念。 ...

  • Javascript 基于原型的面向对象系统编程

    Javascript是使用克隆的原型模式。 1. 原型编程的规则 所有的数据都是对象(javascript中不是所...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • 设计模式之原型模式(Prototype 模式)

    引入原型模式 原型模式的实例 为什么需要使用原型模式 引入原型模式 如果读者很熟悉javascript的话,对原型...

  • JavaScript-1

    JavaScript的基本使用 JavaScript原名liveScript, 是一门动态类型,弱类型基于原型的脚...

  • 原型、原型链

    理解JavaScript原型 彻底理解JavaScript原型 原型 原型是一个对象,所有对象都可以成为原型,其...

  • JavaScript Class 完全指南

    JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法。 Java 或 Swift 等语言中作为创...

网友评论

      本文标题:『跟着老谭学 JavaScript』使用原型

      本文链接:https://www.haomeiwen.com/subject/aoqenxtx.html