深入理解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 = ...
随机推荐
- 实用 nginx.conf 用法大全
服务器拒绝非GET方式请求保障安全性,因为 DELETE.POST.PUT 是可以修改数据的. Nginx 解决方案 在 nginx.conf 配置文件的网站配置区域中添加如下代码片段: 非 GET ...
- Pulsar Pub/Sub Messaging
The Apache Software Foundation Announces Apache Pulsar as a Top-Level Project : The Apache Software ...
- (万字好文)Dubbo服务熔断与降级的深入讲解&代码实战
原文链接:(万字好文)Dubbo服务熔断与降级的深入讲解&代码实战 一.Dubbo服务降级实战 1 mock 机制 谈到服务降级,Dubbo 本身就提供了服务降级的机制:而 Dubbo 的服务 ...
- 基于Vue+ElementUI架构的前端国际化解决方案
1.项目目录结构 ├── build 构建相关配置文件 | |── index.js webpack的基础配置入口 ├── m ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- Spring MVC—拦截器,文件上传,中文乱码处理,Rest风格,异常处理机制
拦截器 文件上传 -中文乱码解决 rest风格 异常处理机制 拦截器 Spring MVC可以使用拦截器对请求进行拦截处理,用户可以自定义拦截器来实现特定的功能,自定义的拦截器必须实现HandlerI ...
- GJ项目技术代码相关总结
第一次实习公司的GJ项目快要结束,自己总结了一些工作中的代码,留到记录学习. 根据下拉条件,进行查询,展示出不同的表单选项:并在鼠标进入到指定区域时显示部分内容,鼠标移出内容区域时,隐藏内容. 焦点移 ...
- 深入理解 ProtoBuf 原理与工程实践(概述)
ProtoBuf 作为一种跨平台.语言无关.可扩展的序列化结构数据的方法,已广泛应用于网络数据交换及存储.随着互联网的发展,系统的异构性会愈发突出,跨语言的需求会愈加明显,同时 gRPC 也大有取代R ...
- 关于RabbitMQ的简单理解
说明:想要理解RabbitMQ,需要先理解MQ是什么?能做什么?然后根据基础知识去理解RabbitMQ是什么.提供了什么功能. 一.MQ的简单理解 1. 什么是MQ? 消息队列(Message Que ...
- linux(11)配置环境变量
前言 在自定义安装软件的时候,经常需要配置环境变量,下面进行详细解析 & nbsp; 环境变量配置文件 用户 配置文件 系统环境 /ect/profile /etc/bashrc /etc/e ...