欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Class的使用和继承，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字。

程序员文章站 2022-05-07 19:33:46
...

一，Class的基本使用和继承

1. 类的基本使用
1.1 类， 是具有相同属性和行为的一类群体。

示例：

  • HTML页面引入js
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
  • js页面
// 类声明，类相当于模板
class Student{
// 方法名()
	read(){
		console.log('Student read()...')
	}
}
// 实例化对象
var s1=new Student();
s1.read();
  • 效果
    Class的使用和继承，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字。
    2. 类的继承
    2.1. Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
    示例：
  • HTML页面引入js
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
  • js页面
// 父类
class Fu{
aa(){
	console.log('父类');
}
}
// 子类
class Zi extends Fu{
	// 重写父类方法
	bb(){
		console.log('子类');
	}
}
var s=new Fu();
s.aa();
  • 效果
    Class的使用和继承，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字。

二，构造方法

1.constructor方法
1.1 constructor方法是类的默认方法,通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor`方法会被默认添加。
示例：

  • HTML页面引入js
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
  • js页面
    里面包含 this和super关键字
    this 关键字通常在对象的 构造函数中使用，用来引用对象。
    关键字this：总是指向调用该方法的对象
// 父类
class Fu{
	// 构造方法，不能被继承
	constructor(){
		console.log('Fu.......');
		this.name='tom';
	}
}
// 子类
class Zi extends Fu{
	// 构造方法，执行子类构造方法之前，必须先执行父类构造方法
      constructor(){
		  super();//执行父类的构造方法
		console.log('Zi......');
		this.name='jack';
	  }
}
var s=new Zi();
console.log(s.name);
  • 效果
    Class的使用和继承，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字。

三，实例属性和实例方法

1.实例
1.1 什么是实例：实例就是具体属于某个对象，哪个对象调用它，它里边的this就指哪个对象
示例：

  • HTML页面引入js
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
  • js页面
// 类声明，类相当于模板
class Student{
	static p=1;
    // 构造函数  
    constructor(name,age,sex){
		console.log('构造函数已生成....'+Student.p);
		// 实例属性
		this.name=name;
		this.age=age;
		this.sex=sex;
	}
	// 实例方法()
	read(){
		console.log('student read()...'+this.name);
	}
}
    //实例化对象    constructor
 var a=new Student('liyi',12,'女');
 a.read();
console.log(a.name);
console.log(a.age);
console.log(a.sex);

console.log(Student.p)
  • 效果
    Class的使用和继承，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字。

四，静态方法和静态属性

1.静态方法
1.1 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
示例：

  • HTML页面引入js
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
  • js页面
class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

注： 上面代码中，Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

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

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

示例：新写法

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

注：这个新写法大大方便了静态属性的表达。

相关标签： javascript js html class

上一篇： 实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)_javascript技巧

下一篇： 【前端学习-函数】js基础学习笔记

推荐阅读