原型、原型链和原型继承

原型继承

编程中对象继承，有类继承和原型继承：

类继承形式上就是，extends 关键字，继承之后，子类就会拥有父类的属性和方法，如下：

// 以下是 ES6 class 语法，语法上同类继承一样，但实际上仍然是原型继承
// 但可以说明类继承的套路
class Animal {constructor (x, y) {this.x = x;this.y = y;}run () {console.log('running')}
}class Dog extends Animal {constructor (x, y, z) {super(x, y)this.z = z;}
}const dog1 = new Dog(1, 2, 3);
dog1.run();
console.log(dog1.x);

原型继承则是另外一种形式，要从父类拿到属性或者方法，关键是设置构造函数的 prototype 属性, 如下：

// 构造函数 Animal
function Animal(x, y) {this.x = x;this.y = y
}
Animal.prototype.run = function () {console.log('running')
}
// 构造函数 Dog
function Dog (x, y, z) {Animal.apply(this, [x, y]);this.z = z;
}
Dog.prototype = new Animal();const dog1 = new Dog(1, 2, 3);
dog1.run();
console.log(dog1.x);

原型

上一小节是从继承的层面，介绍原型继承，但是没有具体说什么是原型。只提到构造函数的 prototype, 那么 prototype 是什么？它的作用又是什么？

我们先说清楚原型，再回来解释上面的 prototype 的作用是什么。

在javascript里面，对象都有一个隐藏对象 “[[Prototype]]”, 获取该对象可以通过 target.__proto__ 或 Object.getPrototype(target) 拿到。该对象就是我们说的原型。

它的作用就是用来存放一些方法和属性，当以它为原型的对象，访问本身没有的一些属性或者方法，就会来到原型上面查找。如下：

const animal = {run() {console.log('running');}
}const dog = {__proto__: animal
}dog.run(); // 我们没有在dog定义run方法

这就是原型了，简单吧。那么上面继承过程中，prototype 是什么, 它有什么用呢？

“类” 和 “类的实例” 的关系，就像是工业生产中，模具和具体产品的关系，类是一个模具，实例就是通过类复刻出来的具有类的属性和方法的具体产品。我们实现继标的目的，就是为了复用一些公共的方法或者属性。那么构造函数的 prototype 属性，就是为将生产出来的实例指定原型所需要用到的，那些实例本身没有的属性或方法，就来这里查找。

也就是先有某原型，然后才有以该原型为原型的对象。

构造函数的 prototype 和实例对象的原型，其实是指向同一个对象的。

原型链

上面两节，我们搞清楚原型是什么，以及构造函数 prototype 是什么了。那么原型链又是什么呢？

有道是：万事万物皆对象。那么原型本身也是一个对象，如果查找属性或方法时，到原型还没找到呢，那么就去原型的原型继续找。而javascript 运行环境中是预设了一些对象来作为原型的,如图：

查找属性或方法时，向上追溯，经过的原型，就形成了一条链，所谓原型链。

至于运行环境预设了哪些原型，已经他们的关系如何，为什么？等等，大家可以看看这篇文章：JavaScript 世界万物诞生记, 真的精彩！

原型、原型链和原型继承相关推荐

[js高手之路]从原型链开始图解继承到组合继承的产生
于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 ...
原型继承＋原型链 +　对象继承发展
一.原型继承: 1.说起原型继承,就要先由构造函数创造对象说起,首先了解构造函数内部基本原理: (1).在函数体最前面隐式的加上this = {} (2).执行 this.xxx = xxx; (3) ...
JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链
编程思想面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 优点: 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单 ...
JS 面向对象编程、原型链、原型继承（个人学习总结）
一.面向对象 1. 面向对象是所有语言都有的一种编程思想,组织代码的一种形式基于对象的语言:JS语言面向对象的语言:c++ java c# 2. 面向对象 3大特征封装:将重用代码封装到函数 ...
js中原型，原型链，原型链继承的个人理解
一.什么是原型? 每一个javascript对象在创建的时候就会有一个与之关联的对象B产生,对象B就是所说的"原型". 1)原型也是一个对象,其他对象可以通过原型实现属性继承, 2 ...
js原型和原型链以及原型继承
在js中,每一个对象创建的时候,都会产生一个原型对象,创建出来的对象会从原型对象中继承一些公共的属性和方法. 1,每一个构造函数都有一个prototype属性,这个属性指向构造函数的原型对象. 2,每 ...
【JavaScript】JavaScript模拟实现面向对象一张图帮助你深刻理解原型链和原型对象
文章目录一.JavaScript模拟面向对象 1.函数是类 2.函数中各种变量的声明 3.关于函数内的this 小结:JavaScript中函数是什么? 4.练习:面向对象思想编写Complex类 ...
javascript作用域链与原型链有联系吗?
一般来说,作用域链是针对变量的,js里面大的范围上来说,只有两种作用域,全局作用域和函数内部作用域,如果函数1里面又定义了函数2(一般都是匿名函数), 那么就有了这么一个作用域链全局作用域==> ...
什么是原型，原型链？原型链是如何实现的？(带图清晰理解)
以下认识都属于个人观点: 首先先了解原型对象和原型的概念: 原型对象: 原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先.通过该构造函数产生的对象,可以继承该原型的属性和方 ...
粗解构造函数，原型，原型链，显式原型，隐式原型
构造函数引入:使用工厂函数来创造对象时,使用var obj =new Object(),创建后都是object,无法区分创建一个构造函数,专门用来创建特定类型的对象,例如人的对象,动物的对象.构造 ...

原型、原型链和原型继承

原型继承

原型

原型链

原型、原型链和原型继承相关推荐

最新文章

热门文章