前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ES6 - class的学习

ES6 - class的学习

作者头像
xing.org1^
发布于 2018-06-25 02:28:46
发布于 2018-06-25 02:28:46
43900
代码可运行
举报
文章被收录于专栏:前端说吧前端说吧
运行总次数:0
代码可运行

http://es6.ruanyifeng.com/#docs/class

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制

class Person {
	constructor{
		//构造函数,里边放不被继承的私有属性和方法
		this.property1 = '第一个私有属性';
		//属性结尾用分号
	}
	//不写在constructor里边的属性和方法都是写在了prototype原型上:
	Func1() {
	}
	Fun2() {
		//多个方法之间不用逗号隔开,加了逗号反而是错的
	}
}
class PersonCild extends Person {
	//extends实现继承
}

报错: missing super() call in constructor ??//在构造函数中缺少super()调用 这个时候就是要在constructor里边单独写一行super();调用,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
其他需要记忆的知识点:
类的数据类型就是函数,类本身就是函数
在类的实例上面调用方法,其实就是调用原型上的方法
类的原型上的constructor就是类本身
尽量不要用__proto__在实例对象上给类原型添加方法,应用object.getPrototypeOf
class表达式,给类命名,可以查找当前类:如下
const Myclass = class Me{
	protoFun(){
		return  Me.name  //Me
	}
}
class没有变量提升
let也没有变量提升
类相当于实例的原型,所有在勒种定义的方法,都会被实例继承
类(动态)方法内的this,默认执行类的实例
静态方法中的this指的是类,动态方法中的this默认指的是实例
如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称之为“静态方法”,就是加上static后方法只能用类的名字来调用,实例就调不找了
静态方法可以与非静态方法重名。
父类的静态方法,可以被子类继承。
子类 的静态方法可以和父类的静态方法重名,重名后在子类的静态方法里边可以用super.方法名()调用父类的同名静态方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
私有方法:只能类内部使用,
利用Symbol的唯一性
const bar = Symbol('bar');
export default class myClass{
	[bar](bar){
		return '私有方法'
	}
}
实例属性: 定义在实例对象(this)上的属性
静态属性: 定义在class本身的属性
写法:
class 类名{
	constructor{
		this.属性B = 属性值;
	}
};
类名.属性A = 属性值;
这里,属性A就是静态属性,定义在类的外部
class
constructor
new target 返回new命令作用于的那个构造函数 var 实例 = new 函数A,则new target代表函数A
类名.name
get
set
static 静态方法
super 代表父类的构造函数  返回父类实例,子类必须在constructor方法中调用super方法,因为子类实例的构建,基于对父类实例的加工
obj.getPrototypeOf(zilei) === fulei;得到子类的父类
类的__proto__和prototype属性
es5中,__proto__指向构造函数的prototype属性
es6中:
子类的__proto__属性,表示构造函数的继承,总是指向父类
子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性
B.prototype.__proto__ = A.prototype;
B.__proto__ = A;
这两条继承链,可以这样理解:
作为一个对象,子类(B)的原型(__proto__属性)是父类(A);
作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。
实例的__proto__属性
子类原型的原型,是父类的原型:子类实例.__proto__.__proto__ = 父类实例.__proto__
因此:
通过子类实例的__proto__.__proto__属性,可以修改父类实例的行为。
原生构造函数:
是指js语言内置的构造函数,如下:
Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一万字ES6的class类,再学不懂,请来找我(语法篇)
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。
coder_koala
2021/11/12
3430
es6 class
1.Es6引入了Class 类这个概念,作为对象的模板,通过class 关键字,可以定义类。 2.类和模块的内部,默认就是严格模式,所以不需要使用use strict 指定运行模式。 3.constructor 方法就是类的默认方法,通过new 命令生成对象实例时,自动调动该   方法,一个类必须有constructor 方法,如果没有显示定义,一个空的constructor   方法会默认添加。 4.类的实例对象   必须使用new ,像函数那样调用Class ,将会报错。     例如:       c
用户1197315
2018/01/19
6100
ES6之class基本语法
类这个概念对于做后台的应该是非常熟悉,JavaScript的类对于其他面向对象的语言差异很大,只能使用构造函数生成实例对象。为了接近传统语言,ES6引入了class类这个概念,通过class关键字定义类。
wade
2020/04/23
2840
ES6之class的继承
class语法为我们提供了构造函数的语法糖,响应的,也给我们提供了ES5通过原型链实现继承提供了extends关键字实现继承。继承这个概念对面后台应该也是非常常见。
wade
2020/04/23
5250
ES5的继承和ES6的继承有什么区别?让Babel来告诉你
如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢,不要走开,下文更精彩!
街角小林
2022/03/21
6910
ES5的继承和ES6的继承有什么区别?让Babel来告诉你
ES6-标准入门·Class 类
直至 ES6,JavaScript 终于有了“类”的概念,它简化了之前直接操作原型的语法,也是我最喜欢的新特性之一,但此类非彼类,它不同于熟知的如 Java 中的类,它本质上只是一颗语法糖。
数媒派
2022/12/01
2900
ES5、ES6 如何实现继承
完整高频题库仓库地址:https://github.com/hzfe/awesome-interview
HZFEStudio
2021/09/25
6820
JS es6的Class类详解
JavaScript 语言中,生成实例对象的传统方法是通过构造函数和原型的组合模式.ES6 提供了更接近传统语言(java)的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
全栈程序员站长
2022/06/28
4.7K0
JS es6的Class类详解
万字长文深度剖析面向对象的javascript
本将会深入讲解面向对象在javascript中的应用,并详细介绍三种对象的生成方式:构造函数,原型链,类。
程序那些事
2020/12/14
3500
详解ES6中的class
class是一个语法糖,其底层还是通过 构造函数 去创建的。所以它的绝大部分功能,ES5 都可以做到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
木子星兮
2020/07/16
5160
【设计模式】学习JS设计模式?先掌握面向对象!
一个模式就是一个可重用的方案,可应用于在软件设计中的常见问题,另一种解释就是一个我们如何解决问题的模板 - 那些可以在许多不同的情况里使用的模板。 --w3cschool
一尾流莺
2022/12/10
4660
JavaScript class类的基本使用方法你知道吗
上面代码表明,类的数据类型就是函数,类本身就指向构造函数 使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
CRMEB商城源码
2022/05/07
7500
ES6新特性实现面向对象编程,上万字详解用class语法定义类
首先,写这篇文章是因为我答应了一个粉丝要写一篇ES6的 class 相关知识的要求,哈哈我是不是特别宠粉呀~其实同时也是帮助我自己复习一下知识点啦
@零一
2021/01/29
8731
ES6——类(Class)
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写,就是下面这样。
羊羽shine
2019/07/31
1.1K0
「思维导图学前端 」一文搞懂Javascript对象,原型,继承
去年开始我给自己画了一张知识体系的思维导图,用于规划自己的学习范围和方向。但是我犯了一个大错,我的思维导图只是一个全局的蓝图,而在学习某个知识点的时候没有系统化,知识太过于零散,另一方面也很容易遗忘,回头复习时没有一个提纲,整体的学习效率不高。意识到这一点,我最近开始用思维导图去学习和总结具体的知识点,效果还不错。试想一下,一张思维导图的某个端点是另一张思维导图,这样串起来的知识链条是多么“酸爽”!当然,YY一下就好了,我保证你没有足够的时间给所有知识点都画上思维导图,挑重点即可。
程序员白彬
2020/07/10
7850
「思维导图学前端 」一文搞懂Javascript对象,原型,继承
Class 的继承
Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。
小小杰啊
2022/12/21
7450
ES6继承和ES5继承是完全一样的么?
通过原型链(构造函数 + [[prototype]])指向实现继承。 (备注:后续__proto__我都会写成[[prototype]]这种形式) 子类的 prototype 为父类对象的一个实例。因此子类的原型对象包含指向父类的原型对象的指针,父类的实例属性为子类原型的属性。
xing.org1^
2021/08/20
1.1K0
ES6继承和ES5继承是完全一样的么?
ES6之class
1. set and get关键字。 1. 只读属性。 2. 私有属性访问限制。 2. 静态方法:static关键字。 > Tip:class关键字目前仅支持static声明静态方法,静态属性仍需要类.xx实现。 3. 继承:extends关键字。 > 其实extends关键字相当于ES5原型继承和构造继承的结合体。内部实现原理: 1. 子类constructor中call调用父类-构造继承。 2. 子类.prototype = new 父类-原型继承。 3. 继承父类实例方法-可以通过子类.xx调用父类构造方法。 4. super():ES6的继承extends必须要在父类的constructor中显示的调用super(params),params是传递给父类构造函数的参数。 5. 静态方法和属性牢记是不可被继承的。 复制代码
19组清风
2021/11/15
3400
玩转ES6(四)Set、Map、Class类和decorator 装饰器
在看Class之前建议看一下js的面向对象 https://juejin.im/post/5b8a8724f265da435450c591
前端迷
2019/12/03
8730
JS原生方法原理探究(六)从 Babel 转译过程浅谈 ES6 实现继承的原理
都说 ES6 的 Class 是 ES5 的语法糖,那么 ES6 的 Class 是如何实现的呢?其实现继承的原理又是什么呢?不妨我们通过 Babel 转译代码的方式,看看其中有什么门道。
Chor
2021/06/08
1.2K0
相关推荐
一万字ES6的class类,再学不懂,请来找我(语法篇)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档