6.26学习 es6中的类

学习 es6中的类

  • 1.了解构造函数的属性
  • 2.类的继承
    • 2.1继承父类实例上的属性
    • 2.2继承父类原型上的属性或则方法(公共属性或则方法)
      • 2.2.1 Object.create
      • 2.2.2 Object.setPrototypeOf
  • 3.es6中的类
    • 3.1定义
    • 3.2 继承

1.了解构造函数的属性

先上一份代码思考一下它的结果,

function Animal(name) {//属性分为两种 实例上的属性 公有属性this.name = name;this.arr = [1,2,3]
}Animal.prototype.address = {location: '山间'}let a1 = new Animal('猴子')
let a2 = new Animal('小鸡')console.log(a1.arr === a2.arr)
console.log(a1.address === a2.address)

结果是false,true;为什么呢
在这里插入图片描述a1和a2相当于是从Animal拷贝了一份包含name,arr等的数据,明显他俩不是一个内存空间()的,所以他俩的arr肯定是不等的;但是a1和a2都是有一个__proto__属性的,他俩的__proto__刚好指向的就是Animal的prototype,所以他俩的address是一块相同的内存空间,所以是相等的

//每个实例都有一个__proto__指向所属类的原型
console.log(a1.__proto__ === Animal.prototype) //当然这个的结果也是true的

在这里插入图片描述
当然a1的constructor就是Animal了

console.log(a1.constructor === Animal) //true

2.类的继承

先创建两个类

function Animal(name) {this.name = name;this.arr = [1,2,3]
}
Animal.prototype.address = {location: '山间'}function Tiger(name) {this.name = name;this.age = 10;}Tiger.prototype.say = function(){console.log('说话')}

2.1继承父类实例上的属性

function Tiger(name) {this.name = name;this.age = 10;Animal.call(this)
}
Tiger.prototype.say = function(){console.log('说话')
}
let tiger = new Tiger()
console.log(tiger.arr) //[1,2,3]

一般都是不叫私有属性的,因为js来说,基本没有拿不到的属性,不算私有。

2.2继承父类原型上的属性或则方法(公共属性或则方法)

我们是不能直接把tiger的实例直接指向Animal的原型的,应该是先指向自己的tiger原型,如果原型上找不到的话,才去指向Animal的原型
在这里插入图片描述

Tiger.prototype.__proto__ = Animal.prototype;
let tiger2 = new Tiger()
console.log(tiger2.address) //{ location: '山间' }

2.2.1 Object.create

其实还可以用es5的object.create()来实现

Tiger.prototype = Object.create(Animal.prototype);

也可以自己写写Object.create的实现原理

function create(parentPrototype) {let Fn = function () {}Fn.prototype = parentPrototype;return new Fn()
}
Tiger.prototype = create(Animal.prototype);

在这里插入图片描述
这里有点小饶的,原本是tiger的实例__proto__指向Animal的原型(prototype),现在是tiger的实例指向了Fn的实例(new Fn()),Fn的prototype指向的Animal的prototype。
但是这样写又会有个问题的,如果我们现在打印tiger2的constructor,会是谁呢???

console.log(tiger2.constructor)//[Function: Animal]

会发现是Animal的构造函数,原生的Object.create也是这个结果的,那如果要tiger2的constrctor是Tiger呢,那该怎么写呢,有两种方法:

//1.自定义的create改造下
function create(parentPrototype) {let Fn = function () {}Fn.prototype = parentPrototype;let fn = new Fn();fn.constructor  = Tiger;return fn
}
//2.Object.create方法加参数配置
Tiger.prototype = Object.create(Animal.prototype,{constructor:{value:Tiger}});

这两种方法是都可以把iger2的constrctor改为Tiger的。

2.2.2 Object.setPrototypeOf

其实还有种es6的写法也可以,还更简洁

Object.setPrototypeOf(Tiger.prototype,Animal.prototype)

一样的效果的,小小的总结下,要继承父类的实例上的属性和公共属性,一般就call+Object.create或则call+Object.setPrototypeOf来实现。

3.es6中的类

3.1定义

class Animal{static flag(){return 222} //es7支持静态属性 es6只支持静态方法constructor(name){this.name = name;this.arr = [1,2,3]}//公共的属性方法怎么写呢//公共的方法say(){console.log('say')console.log(this)}
}
// 1)类不能当作函数调用
//Animal()  //TypeError: Class constructor Animal cannot be invoked without 'new'
let animal = new Animal()
animal.say()
console.log(Animal.flag())//有个错误的写法
let say = animal.say
say() 
//这样看着是没有问题的,我先拿到animal的say方法,再在适合的地方调用它,但是!!!如果方法里有this
//es6规范里 如果单独调用原型上的方法 this是不存在的
// say
// Animal { name: undefined, arr: [ 1, 2, 3 ] }
// say
// undefined

3.2 继承

class Tiger extends Animal{constructor(name,age){super(name);this.age = age;}
}
let tiger = new Tiger();
tiger.say()
//如果Tiger里面不写constructor的话
let tiger2 = new Tiger('老虎',12);
tiger2.say()
console.log(Tiger.flag()) //静态属性也是可以被继承的 需要被类调用
//如果要写constructor的话,要注意规范

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/7383.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-链表

链表结构 链表结构五花八门,今天我重点给你介绍三种最常见的链表结构,它们分别是:单链表、双向链表和循环链表。我们首先来看最简单、最常用的单链表。 单链表 我们习惯性地把第一个结点叫作头结点,把最后一个结点叫作尾结点。其…

Spring Boot 中的事务超时时间

Spring Boot 中的事务超时时间 在 Spring Boot 中,事务管理是一个非常重要的话题。当我们在数据库中执行一些复杂的操作时,需要确保这些操作能够在一定的时间内完成,否则可能会导致数据一致性问题。为了解决这个问题,Spring Boot…

springboot 整合mybatis plus,使用druid 切换多数据源实现单数据库事务,附赠项目源码地址

项目源码地址 GitHub - liyanlei58/ssm: springboot druid mybatis plus 事务 最近想搭一套spring cloud开发环境,各种不顺利吧,先是spring cloud的组件某些功能不好用,是版本自身的bug。后来又碰到了事务无法回滚,这个搞了好几个…

windows的环回网卡(loopback adapter) 安装方法

0.说明:windows的环回网卡(loopback adapter)的作用: microsoft loopback adapter就是安装在本机上的一块虚拟网卡,它跟本机上的其它物理网卡、和物理网卡连接的网络是没有关系的,你可以理解成这块网卡上的网线接到了另外一个空白…

Python 字节数组方式写入kafka(含报错return ‘<SimpleProducer batch=%s>‘ % self.async)

一、背景 项目开发了一个类似kafka tools查询工具的kafka 查询,现在需要测试一下如果通过字节数组的形式写入,看看查询有没有问题 二、kafka查询代码 Python代码示例: from kafka import KafkaProducer import json# 创建Kafka生产者 pro…

美好未来“一束光”儿童安全教育项目在四川泸定正式启动

6月26日,由中华少年儿童慈善救助基金会和北京臻爱公益基金会共同发起的美好未来计划“一束光”儿童安全教育公益项目启动仪式,在四川省甘孜藏族自治州泸定县贡嘎山片区寄宿制学校举行。 出席本次启动仪式活动的嘉宾有:中华少年儿童慈善救助基…

【Spring Boot 事务】万字详解Spring Boot 事务,赶快跟随良辰一起去学习Spring Boot 事务吧! ! !

前言: 大家好,我是良辰丫,这篇文章我将带领大家一起去学习Spring Boot 事务文章,我们在学习数据库的时候已经接触过事务了,来跟随我的脚步一起来瞧一下Spring Boot 事务吧.💌💌💌 🧑个人主页:良辰针不戳 📖…

element框架select值更新页面不回显的问题,动态表单props绑定问题

1、页面中使用form表单&#xff0c;引入select组件 当data中默认没有定义form.region的值时&#xff0c;会出现选择select后input没有回显选择数据值&#xff1b;所以使用select时&#xff0c;必须定义默认值 <el-form ref"form" :model"form" label-…

聊一聊人工智能与视频技术的5大发展趋势与应用

随着互联网的快速发展&#xff0c;视频时代已经到来。据统计&#xff0c;目前互联网内容中&#xff0c;视频内容占据高达82%的流量&#xff0c;未来仍将持续增长。今天我们就来聊一聊关于视频技术的发展&#xff0c;以及现在的大热门–人工智能技术与视频技术的结合。 视频技术…

第38节:cesium 风场效果(含源码+视频)

结果示例: 完整源码: <template><div class="viewer"><vc-viewer @ready="ready" :logo="false"><!

CUDA中的缓存

CUDA缓存包括L1缓存和L2缓存。 SM加载数据&#xff0c;根据不同的设备和类型分为三种路径&#xff1a; 一级和二级缓存常量缓存只读缓存 常规的路径是一级和二级缓存&#xff0c;需要使用常量和只读缓存的需要在代码中显式声明。但是提高性能&#xff0c;主要还是要取决于访问…

茶油生产加工MES质量溯源平台源码(spring boot+mybatis+easyui+mysql+h5)

一、生产加工MES&#xff08;Manufacturing Execution System&#xff0c;简称MES&#xff09;是一种面向车间的生产过程管理与实时信息系统。它主要负责监控生产过程&#xff0c;管理生产资源&#xff0c;优化生产流程&#xff0c;提高生产效率和质量。MES系统需要与ERP系统、…