博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单易懂的谈谈 javascript 中的继承
阅读量:6293 次
发布时间:2019-06-22

本文共 2322 字,大约阅读时间需要 7 分钟。

知识储备

ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

我们知道 js 并没有类的概念,所谓的类是在原型链的基础之上。例如我们通常所使用的 function 实际上是继承于 Function 类的对象。

function fool(a, b) {  return a + b}var fool = new Function("a, b", "return a+b");复制代码

两者所做的事情是相同的,函数 fool 其实是 Function 的一个实例,也就是说 fool.__proto__ === Function.prototype的返回值是 true。

于是问题来了,Function 的构造函数是如何生成的呢?

同时我们知道 Function 并不是这一条原型链的终点,Function 是继承于 Object 的。

那么问题又来了 Object 的构造函数是如何生成的呢?

ECMA中关于 Object 的构造函数是这么描述的:

是内置对象 %Object%,同样的 Function 的 constructor 也是内置对象 %Function%,事实上这个问题也不重要。我们只需要知道 这两个 constructor 都不是 Function 的实例即可。

原型继承

有对象的概念,就会有子类的概念。在 ES2015 中,新增了 关键字 extends

class ChildClass extends ParentClass { ... }复制代码

我们只知道 extends 的作用相当于从 ChildClass 的原型链上可以获取 ParentClass 的原型对象,但是具体做了什么事情呢? 首先我们要明白,如何创建子类。

核心内容: B的实例继承自B.prototype,后者同样也要继承自A.prototype。

我们知道 B.prototype 和 A.prototype 究其根本 都是 对象(Object),那对象的继承概念是什么?

于是我们自然而然的写下两行代码,

B.prototype  = new A();B.prototype.constructor = B;复制代码

此时我们开始起草我们的 继承方法 inherit。

function inherit(SuperClass, ChildClass) {	ChildClass.prototype = new SuperClass();	ChildClass.prototype.constructor = ChildClass;	return ChildClass  }复制代码

我们再看看 babel 里对 extends 的实现:

function _inherits(subClass, superClass) {  if (typeof superClass !== "function" && superClass !== null) {	throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);  }  subClass.prototype = Object.create(superClass && superClass.prototype, {	constructor: {	  value: subClass,	  enumerable: false,	  writable: true,	  configurable: true	}  });  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass)	  :	  subClass.__proto__ = superClass;}复制代码

这里使用了方法。

这里其实和以下代码类似,只不过回避了对父类构造函数的调用(父类构造函数内如果有生成实例属性的话,也将在原型链继承了)不至于产生多余的属性。

let obj = new superClass();obj.constructor = subClasssubClass.prototype = obj复制代码

如果要在继承时回避对父类构造函数的调用又不使用 Object.create 方法,可以使用过桥函数,如下代码。

function inherit2(SuperClass, ChildClass) {	function F() {	}	F.prototype = SuperClass.prototype;	ChildClass.prototype = new F();	ChildClass.prototype.constructor = ChildClass;	return ChildClass;  }复制代码

总结: 其实构造函数的 prototype 就是个普通的对象,只不过他具有特殊意义,同时这个对象 有个 constructor 属性(不是必须的),这个属性指向构造函数本身。

对象的 __proto__属性是 非标准 但许多浏览器实现了的用于访问对象原型的属性,现在可以通过和访问器来访问。

转载于:https://juejin.im/post/5b4f2f975188251af662207a

你可能感兴趣的文章
浅论服务端应用程序开发中的CAP思想(非分布式系统中的CAP理论)
查看>>
socket.io的 Python客户端中文encode问题
查看>>
[LintCode] Shape Factory
查看>>
html5手机页面的那些meta
查看>>
最长回文子串问题
查看>>
SpringBoot配置属性之MQ
查看>>
0x01 念念Python,必有回响
查看>>
Vim实战指南(一):基础编辑命令
查看>>
学习 PHP SOAP 扩展的一些笔记
查看>>
PHP SOAP 扩展的使用
查看>>
CSS基础篇--css reset重置样式有那么重要吗?
查看>>
为 UWP 应用提供的 .NET 网络 API
查看>>
图书馆自动化系统 Evergreen 3.3 发布,迁移到 Angular
查看>>
kube-proxy源码解析
查看>>
SQL优化--inner、left join替换in、not in、except
查看>>
如何用纯 CSS 创作气泡填色的按钮特效
查看>>
IM热门功能讨论:为什么微信里没有消息“已读”功能? ...
查看>>
实现滑动菜单(富文本版本)
查看>>
Python入门
查看>>
8Manage:企业管理软件要通用型还是定制开发?
查看>>