深入理解JavaScript中的类继承
由于写本文时全部是在编辑器中边写代码边写感想的,所以,全部思想都写在代码注释里面了
// 类继承 //todo.1 extends 关键字 class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed = speed;
console.log(`${this.name} runs with speed ${this.speed}`);
}
} // 如果“派生类”使用constructor函数,则必须在constructor调用this之前使用super来调用被继承类的constructor
// 如果“派生类”没有使用constructor函数,则默认会生成一个constructor,代码如下
/**
* constructor(...args) {
* super(...args)
* }
*/
// 为什么需要super() ?
// 因为“派生类(derived constructor)的构造函数与其他函数之间的区别在于其具有特殊的内部属性[[ConstructorKind]]:derived”
// 这个属性会影响new 的行为; 当通过new执行一个常规函数时,它将创建一个空对象,并将这个空对象赋值给this;
// 但是当继承的constructor执行时,它不会执行此操作,它期望父类的constructor来完成这项工作。因此派生类必须执行super才能执行
// 父类的constructor来完成这项工作,否则this指向的那个对象不会创建,并且程序会报错!
class Rabbit extends Animal {
constructor(name, color) {
super(name);
this.color = color;
}
} const rabbit = new Rabbit("兔子", "白色"); //todo.2 深入探究内部原理和[[HomeObject]]
// 让我们先来看一个例子。 const animal = {
name:'Animal',
eat() {
console.log('animal');
}
} const tiger = {
__proto__:animal,
name:'tiger',
eat() {
this.__proto__.eat.call(this);
}
} const youngTiger = {
__proto__:tiger,
name:'youngTiger',
eat() {
this.__proto__.eat.call(this);
}
} tiger.eat(); // animal
// youngTiger.eat(); // RangeError: Maximum call stack size exceeded // 为什么会报错?让我们来深入探究一下 /**
* 在youngerTiger.eat中
* this.__proto__.eat.call(this)
* 等于
* youngTiger.__proto__.eat.call(this)
* 等于
* tiger.eat.call(this)
* 在tiger.eat中
* this.__proto__.eat.call(this)
* 等于
* youngTiger.__proto__.eat.call(this)
* 等于
* tiger.eat.call(this)
*/ // 解决方案:[[HomeObject]] // 当一个函数被定义为类或者对象方法时,它的 [[HomeObject]] 属性就成为了该对象。
// 然后 super 使用它来解析(resolve)父原型及其方法。 let plant = {
name:'Plant',
grow() {
console.log(`${this.name} growing`);
}
} let flower = {
__proto__:plant,
grow() {
super.grow();
}
} let greenFlower = {
__proto__:flower,
grow() {
super.grow()
}
} greenFlower.grow();//Plant growing // [[HomeObject]]内置属性是被绑定到JavaScript对象上的,“方法”由哪个对象创建,则
// [[HomeObject]]指向哪个对象,并且[[HomeObject]]一旦创建就是不可变的
// 而且只能被super解析。注意:“方法”不是“函数属性”,
// “方法” {method(){}},“函数属性”{method:function(){}} // 解析,当对象嵌套继承时,为了避免Maximum call stack size exceeded错误,
// 我们可以使用super来代替 this.__proto__.method.call(this)方法,前提是
// [[HomeObject]]属性存在,并且__proto__存在
深入理解JavaScript中的类继承的更多相关文章
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- JavaScript中的类继承
JavaScript是一个无class的面向对象语言,它使用原型继承而非类继承.这会让那些使用传统面向对象语言如C++和Java的程序员们感到困惑.正如我们所看到的,JavaScript的原型继承比类 ...
- 深入理解 JavaScript 中的 class
在 ES6 规范中,引入了 class 的概念.使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代. 但是JS 中并没有一个真正的 class 原始类型, class 仅仅只 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- 【干货理解】理解javascript中实现MVC的原理
理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...
- 理解javascript中的策略模式
理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...
- 全面理解Javascript中Promise
全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...
- JavaScript中的类
JavaScript类的相关知识 1.例子 /* 例1 */// 定义一个构造函数function Range(from, to){ this.from = from; this.to = ...
随机推荐
- Flask之路由系统
路由系统 路由的两种写法 1.第一种方法: def index(): return render_template('index.html') app.add_url_rule('/index', ' ...
- Elasticsearch从入门到放弃:浅谈算分
今天来聊一个 Elasticsearch 的另一个关键概念--相关性算分.在查询 API 的结果中,我们经常会看到 _score 这个字段,它就是用来表示相关性算分的字段,而相关性就是描述一个文档和查 ...
- Ajax中的同源政策
Ajax中的同源政策 Ajax请求限制 Ajax只能向自己的服务器发送请求.比如现在有一个A网站.有一个B网站,A网站中的HTML文件只能向A网站服务器中发送Ajax请求,B网站中的HTML文件只能向 ...
- windows 系统 MySQL_5.6.21安装教程
1.双击安装文件 mysql_installer_community_V5.6.21.1_setup.1418020972.msi,等待安装界面出现,见下图: 2.勾选:I accept thel ...
- 一套高可用、易伸缩、高并发的IM群聊、单聊架构方案设计实践
一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践 一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践-IM开发/专项技术区 - 即时通讯开发者社区! http://www.52im. ...
- 精通MySQL之索引篇,这篇注重练习!
老刘是即将找工作的研究生,自学大数据开发,一路走来,感慨颇深,网上大数据的资料良莠不齐,于是想写一份详细的大数据开发指南.这份指南把大数据的[基础知识][框架分析][源码理解]都用自己的话描述出来,让 ...
- Java 执行过程中的内存模型
一.前言 本文的主要工作:尝试以时间顺序追踪一遍 Java 执行的整个过程,以及展示 JVM 中内存模型的相应变化. 本文的主要目的:希望能够通过 Java 执行过程的冰山一角,增进对编程语言工作原理 ...
- python 中excel表格的操作【转载】
传说中python操作ms office功能最强大的是win32com,但只能要ms上使用. 不过对于比较简单的需求显得有些小题大作.那么来看下简单的,分别是xlrd和xlwt模块, 不过暂时只支持e ...
- 提高效率的Linux命令
提高效率的Linux命令 一.fc 二.disown 三.Ctrl + x +e 四.!! 两个感叹号 五.一次创建多个目录或文件 六.tee 七.删除从开头到光标处的命令文本 八.删除从光标到结尾处 ...
- 天融信Top-app LB负载均衡SQL注入0day
POST /acc/clsf/report/datasource.php HTTP/1.1 Host: Connection: close Accept: text/javascript, text/ ...