怎么理解js的原型链继承？

前言

了解java等面向对象语言的童鞋应该知道。面向对象的三大特性就是：封装，继承，多态。

今天，我们就来聊一聊继承。但是，注意，我们现在说的是js的继承。

在js的es6语法出来之前，我们想实现js的继承关系，需要借助于原型链。之前的文章，我有讲过原型和原型链的概念。在这，再重新回顾一下。

js中万物皆对象，每个对象都有一个隐式原型 __proto__ ，指向创建它的构造函数的原型对象。
函数（构造函数）除了有一个隐式原型对象，还有一个属性prototype，它指向一个对象，这个对象就是原型对象，也叫显式原型。
原型对象有一个属性constructor，它指向这个构造函数本身。

而原型链，就是为了实现js的继承，把实例对象的__proto__属性一层一层的指向它的构造函数的原型对象，直到它（Object.prototype）的原型对象为null。

举例分析

我们现在定义一个构造函数Person作为父类，传入一个name属性，给原型对象添加一个getName的方法。

function Person(name){this.name = name;
}Person.prototype.getName = function(){console.log(`姓名:${this.name}`);
}

然后再定义一个构造函数Student，用以继承父类Person

function Student(name){//此处可以通过call方法来改变this的指向Person.call(this,name);//this.name = name;
}var student = new Student("小明");

注意，此时我们只是调用了Person的构造函数，不等同于继承了Person。

可以通过打印 student实例对象来看它的原型链关系:

student  =>  Student.prototype => Object.prototype => null

这不是我们想要的结果，我们需要把原型链的继承关系改为这样的：

student  =>  Student.prototype => Person.prototype => Object.prototype => null

因此，我们需要把Student的原型指向父类Person的一个实例对象：

//创建一个父类构造函数的实例person
var person = new Person();
//把Student的原型指向新创建的 person实例
Student.prototype = person;
//同时需要把Student的构造函数修正为Student，
//因为此时Student的构造函数为Person，可自行 console.log(Student.prototype.constructor)查看
Student.prototype.constructor = Student;//此时就可以正常的调用父类的方法了
student.getName(); //姓名:小明

以上，就可以实现js基于原型链的继承，这是在es6的class概念出来之前。在es6之后，就可以通过class的extends来实现继承。其实，这只是js的语法糖，在js引擎内部帮你实现了原型链的继承关系。

大胆猜测一下，es6这样的语法设计，也是为了迎合大部分面向对象的程序员吧。。。（感兴趣的小伙伴可以了解下typescript和es6）

怎么理解js的原型链继承？相关推荐

从babel实现es6类的继承来深入理解js的原型及继承
先聊个5毛钱的背景吧自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...
JavaScript进阶学习（二）—— 基于原型链继承的js工具库的实现方法
文章来源:小青年原创发布时间:2016-07-03 关键词:JavaScript,原型链,jQuery类库转载需标注本文原始地址: http://zhaomenghuan.github.io... ...
【JS继承】JS继承之原型链继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
记录--JS精粹，原型链继承和构造函数继承的 “毛病”
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装.继承.多态. 这三个特点,以" ...
原型、原型链、原型链继承理解
原型概念: 所有对象都有一个私有的 _proto_ 属性,而这个属性所对应的就是自身的原型: 原型链概念: 所有对像都有一个私有的 _proto_ 属性,而这个属性所指向的就是原型对象, ...
关于js原型链继承机制
原型链继承是js的默认继承机制当我们实例化一个自定义对象时,其实继承已经发生了 eg. //定义一个函数对象 function FF(){} //实例化一个对象 let a=new FF() 这里发 ...
JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
JS中__proto__和prototype都是什么？原型链继承解读
首先要知道,prototype是函数才有的属性,__proto__是每个对象都有的属性随后,先谈一下 1.什么是prototype? prototype对象是JS实现面向对象的一个重要机制. 在很早 ...
js的原型链简单理解
js的原型链首先,在将js的原型链之前我们先来说一下什么是原型,当我们生成一个普通对象x的时候,这个x会有一个隐藏属性x._proto_,这个属性会指向Object.prototype也就是 x._ ...

怎么理解js的原型链继承？

前言

举例分析

怎么理解js的原型链继承？相关推荐

最新文章

热门文章