ES6-Class

矫情吗；* 2022-05-15 07:54 212阅读 0赞

**1. 基本使用**

（1）Class，类，一构造函数

a. 原生JS，例子

<script>
    	//=================JS构造函数用法
    	function Point1(x,y){
    		this.x = x;//定义将来实例的属性
    		this.y = y;
    	}
    	//给构造函数添加方法
    	Point1.prototype.toString1 = function(){
    		return this.x + ','+this.y;//取到上面两个属性值
    	}
    	let p1 =new Point1(100,"JS你好");
    	console.log(p1.toString1());
    
    </script>

b. Class方法：

<script>
    	//================Class用法
    	class Point{
    		constructor(x,y){//构造函数，为类的一部分
    			//定义将来实例的属性
    			this.x = x;
    			this.y = y;
    
    		}
    		//给类添加方法
    		toString(){
    			return this.x + ','+this.y;//取到上面两个属性值
    		}
    	}
    
    	let p = new Point(90,"Class你好");
    	console.log(p.toString());//输出90,Class你好
    
    </script>

**2. constructor、实例化和this的指向**

(1). Class 的特点

a. Class的里面必须包含constructor，属性必须添加到constructor中

b. class可以使用new 实例化

c. class本质仍然是构造函数，是一种语法糖

d. this的指向是class将来的实例

**3. 静态方法**

<script>
    	class User{
    		constructor(){
    
    		}
    		getInfo(){
    
    		}
    		//静态方法：不用通过对象let p = new User()l调用，直接通过User调用
    		static getName(){
    			console.log("静态方法调用");
    		}
    	}
    
    	let p = new User();
    	p.getInfo();
    
    	//静态方法调用
    	User.getName();//输出静态方法调用
    
    </script>

**4.Class继承**

(1)特点：

a. 使用extends 关键字

b. 子类会继承父类的属性和方法

c. 子类中的属性和方法会覆盖父类的（如果同名）

<script>
    	class Point{
    		constructor(){
    			this.name = "Jack";
    			this.age = 20;
    		}
    		getName(){
    			console.log(this.name);
    		}
    		getAge(){
    			console.log(this.age);
    		}
    	}
    
    	//ColorPoint继承了Point的属性和方法，ColorPoint是子类，Point是父类
    	class ColorPoint extends Point{
    		getInfo(){
    			console.log("ColorPoint")
    		}
    
    		//与父类方法同名，会覆盖父类
    		getAge(){
    			console.log("替换父类getAge()")
    		}
    	}
    
    	let cp = new ColorPoint();
    	cp.getName();//Jack
    	cp.getAge();//20
    	cp.getInfo();//ColorPoint
    
    
    </script>

（2）. super关键字：

子类中声明constructor时，里面必须调用super();

super作为函数，必须在constructor中使用，代表父类的constructor再执行一遍；

<script>
    	class Point{
    		constructor(){
    			this.name = "Jack";
    			this.age = 20;
    		}
    	
    	}
    
    	//ColorPoint继承了Point的属性和方法，ColorPoint是子类，Point是父类
    	class ColorPoint extends Point{
    		constructor(){
    			super();//把父类的constructor再执行一遍
    			this.age ="H5";
    		}
    
    	}
    
    	let cp = new ColorPoint();
    	console.log(cp.age);//
    
    </script>

super作为对象，可以再普通子类方法中使用，表示父类的原型对象；

<script>
    	class Point{
    		constructor(){
    			this.name = "Jack";
    			this.age = 20;
    		}
    		getName(){
    			console.log(this.name);
    		}
    		getAge(){
    			console.log(this.age);
    		}
    	}
    
    	//ColorPoint继承了Point的属性和方法，ColorPoint是子类，Point是父类
    	class ColorPoint extends Point{
    		getInfo(){
    			// this.getAge();//this调用继承过来的方法，不能调用本身的方法
    			// 同样的写法
    			super.getAge();//super表示父类的原型对象
    			console.log("ColorPoint")
    		}
    	}
    
    	let cp = new ColorPoint();
    	cp.getInfo();//ColorPoint
    
    </script>

（3）继承原生的构造函数

<script>
    	class myArray extends Array{
    
    	}
    
    	let arr = new myArray();
    	arr[0] = "Jack";
    	arr[1] = "Bob";
    	arr[2] = "Mak";
    	console.log(arr);//Array(3) [ "Jack", "Bob", "Mak" ]
    	console.log(arr.length);//3
    	console.log(arr.push("Hello"));
    	console.log(arr);//Array(4) [ "Jack", "Bob", "Mak", "Hello" ]
    </script>

(4) Object.getPrototypeOf()可以获取一个雷的父类

<script>
    	class myArray extends Array{
    	}
    	let arr = new myArray();
    
    	console.log(Object.getPrototypeOf(myArray));//function Array()
    	console.log(Object.getPrototypeOf(myArray) === Array);//true
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6之Class对象

`constructor`方法是类的默认方法，通过`new`命令生成对象实例时，自动调用该方法。一个类必须有`constructor`方法，如果没有显式定义，一个空的`co

小咪咪/ 2022年12月15日 14:02/ 0 赞/ 123 阅读

相关 ES6--class类

class类的使用详解 1.通过class定义类/实现类的继承 2.在类中通过constructor重新定义类 3.通过new来创建类的实例 4.通过exten

我会带着你远行/ 2022年12月06日 12:37/ 0 赞/ 151 阅读

相关 es6 class类

class类 class Person \{ constructor(name, age, job) \{ this.name = n

秒速五厘米/ 2022年06月08日 02:13/ 0 赞/ 198 阅读

相关 ES6 class extends

class Polygon { constructor(width, height) { console.log("first!

矫情吗；*/ 2022年06月01日 11:38/ 0 赞/ 131 阅读

相关 ES6之class

在ES6中类的声明和调用 class Car{ constructor({title}){ this.title = title; }

墨蓝/ 2022年05月24日 10:37/ 0 赞/ 148 阅读

相关 ES6之Class

Class 的静态属性和实例属性静态属性指的是 Class 本身的属性，即`Class.propName`，而不是定义在实例对象（`this`）上的属性。 c

迈不过友情╰/ 2022年05月22日 06:09/ 0 赞/ 135 阅读

相关 ES6-Class

1. 基本使用（1）Class，类，一构造函数 a. 原生JS，例子 <script> //=================JS构造函数用法

矫情吗；*/ 2022年05月15日 07:54/ 0 赞/ 213 阅读

相关 ES6之class

Class定义语法 class point{ constructor(x,y){ this.x = x;

﹏ヽ暗。殇╰゛Y/ 2021年09月17日 02:12/ 0 赞/ 277 阅读

相关 ES6基础-ES6 class

![file][] 作者 | Jeskson 来源 | 达达前端小酒馆 > ES - Class 类和面向对象：面向对象，即万物皆对象，面向对象是我们做开发一种的方

我会带着你远行/ 2021年08月20日 00:23/ 0 赞/ 472 阅读

相关 ES6--Class类

Class概述概述在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。 class 的本质是 function。它可以

喜欢ヅ旅行/ 2021年08月14日 00:29/ 0 赞/ 444 阅读