Es6语法 class类(详细)

class的来源

ECMAScript 6提供了更接近传统语言的写法,新引入的class关键字具有正式定义类的能力。类(class)是ECMAScript中新的基础性语法糖结构,虽然ECMAScript6类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念,让对象原型的写法更加清晰、更像面向对象编程的语法。

类的定义

class类的定义和函数一样分为命名类匿名类

		//命名类
		class Pig {};
		//匿名类
		let Examples = class{};
  • 注意:函数声明和类声明之间的一个重要区别在于,函数声明会提升,类声明不会。需要先声明类,然后再访问它

class类的本质其实就是函数

class Pig {}
console.log(typeof Pig ) // function
console.log(Pig === Pig .prototype.constructor) // true

class的构造函数

constructor 方法是用于创建和初始化一个由class创建的对象。通过 new 关键字生成对象实例时,自动会调用该方法。一个类只能拥有一个名为constructor构造函数,不能出现多个,如果没有定义constructor构造函数,class 会默认添加一个空的constructor构造函数。

class Pig{
	constructor (){
	}
}

使用new实例化Pig类等同于调用constructor 函数

调用类

类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。

class Pig{
	constructor (a,b){
		this.a=a;
		this.b=b;
		console.log(this.a,this.b);
	}
}
let pig=new Pig(1,2);//1,2

类实例化时传入的参数会用作构造函数的参数。如果不需要参数,则类名后面的括号可以删除

类的this指向

class Pig{
	constructor (){
	console.log(this);
	}
}
let pig=new Pig;

下面就是上面代码中this结果
大家可以看出他的this指向是通过类实例化的对象在这里插入图片描述

类的get和set方法

class Pig{
	constructor (){
		this.a=a;
	}
	get a() {
	 	return this._a;
		 }
   set a(a) {
        this._a = a;
	   }
}
let pig=new Pig(1);

设置属性会调用set方法 获取会调用get方法 实例化类对象 会调用constructor方法

注意:必须给实例化对象上添加属性,才可以对该属性进行监视,如上面例子一样 this.a=a;如果没定义属性,就会默认使用get的函数名作为属性名

get的使用

get语法将对象属性绑定到查询该属性时将被调用的函数

set的使用

当尝试设置属性时,set语法将对象属性绑定到要调用的函数。

class类使用需要注意的地方

1.class 的本质是 function。
2.不可重复声明。
3.类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。
4.类中方法不需要 function 关键字。
5.方法间不能加分号。

class类继承

在此之前,我一直没搞明白类有什么用,现在我们就来详细的讲一下类继承的作用吧

JavaScript 中的类继承可以帮助我们实现代码的重用和扩展。通过继承,我们可以将一个类作为另一个类的基础,从而继承其属性和方法。这使得我们能够减少代码重复,并且可以更加灵活地在不同的场景中使用和扩展代码。
具体来说,类继承的作用包括

  1. 继承属性和方法:子类可以继承父类的属性和方法,这样可以减少重复代码,提高代码的复用性和可维护性。
  2. 扩展功能:子类可以添加新的属性和方法,从而扩展父类的功能,这使得开发人员能够更加灵活地应对不同的需求。
  3. 重写父类方法:子类可以重写父类的方法,从而修改父类的行为。
  4. 多态:子类可以重写父类的方法,从而实现多态,这可以使得代码更加灵活和易于扩展。

综上所述,类继承是面向对象编程中一个非常重要的概念,它可以帮助我们实现代码的重用和扩展,提高代码的可维护性和灵活性

extends 继承

举个栗子

class Pig{
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(this.name + ' is eating.');
  }
}

class Peqi extends Pig{
  constructor(name) {
    super(name);
  }
}

在上面的代码中,我们定义了两个类:Pig和 Peqi 。Pig 是父类,Peqi 是子类。Pig类有一个 eat 方法,Peqi 类继承了 Pig类,并且重写了构造函数。使用 extends 关键字来实现继承。super 关键字用来调用父类的构造函数。

类继承需要注意的点

	 super()特性在extends继承中extends super
	 1.子类 constructor 方法中必须有 super ,且必须出现在 this 之前
	 2.调用父类构造函数,只能出现在子类的constructor构造函数
	 3.调用父类方法, super 作为对象,在普通方法中,指向父类的prototype原型对象,
	 在子类静态方法中拿取父类静态方法的值,在静态方法中,指向父类
  • 28
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要将ES6语法class转换成ES5的语法,可以使用Babel工具进行转换。Babel是一个广泛使用的JavaScript编译器,可以将ES6代码转换为ES5兼容的代码。通过配置Babel的插件和预设,可以实现将ES6class语法转换为ES5的语法。 首先,你需要在项目中安装Babel的相关依赖包。然后,创建一个配置文件(通常是.babelrc文件)来指定转换的规则。在配置文件中,你可以使用一系列的插件和预设来实现特定代码的转换。 例如,你可以使用@babel/preset-env预设来根据目标环境自动转换ES6代码为ES5代码。这个预设会根据你指定的目标浏览器或Node.js版本,自动选择需要的转换规则。 另外,你还可以使用@babel/plugin-proposal-class-properties插件来转换ES6 class中的属性定义,以及@babel/plugin-proposal-private-methods插件来转换ES6 class中的私有方法定义。 通过配置Babel的插件和预设,你可以根据具体需要将ES6语法class转换成ES5的语法。这样,你就可以在不兼容ES6的环境中使用ES6class语法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [js-es6-class转es5源码解析](https://blog.csdn.net/junjiahuang/article/details/126724411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解如何用babel转换es6class语法](https://download.csdn.net/download/weixin_38690508/13664398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是牢大(肘鸡王)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值