标签：ES6 console log 创建 添加 constructor new class name
目录
1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。
3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。
一、创建类和对象
例子如下：
class Star { // 1、首字母大写，类名不要加()
constructor(name,age){ //无需加function
this.name = name;
this.age = age
}
}
// 2、利用类创建对象 new
var a = new Star('Nan',10); //生成的实例对象加()
var b = new Star('Chen',20);
console.log(a);
console.log(b);打印效果：
注意：
1、通过class创建类，类名最好首字母大写
2、constructor(){},用来接收传递的参数，并且返回实例对象
3、constructor(){} 一旦生成new实例对象时，就会自动调用这个函数，如果不写这个函数，其类也会生成这个函数
4、生成实例 new 不能省略
5、语法规范：创建类后的类名不要加小括号 ，生成实例对象的类名需要加()，构造函数无需加function
二、类中添加其方法
直接看代码：
// 1、创建类class
class Star {
// 类的共有属性放到 constructor 里面
constructor(name,age){
this.name = name;
this.age = age
}
listen(music){
console.log('姓名:'+this.name+'年龄：'+this.age+'爱听的音乐：'+ music);
}
}
// 2、利用类创建对象 new
var a = new Star('Nan',10);
var b = new Star('Chen',20);
a.listen('One Day');
b.listen('Whistle');
console.log(a);
console.log(b);打印效果：
三、类的继承
比如这里创建一个父类，用子类继承其父类的属性
看例子：
class Father{
constructor(a,b) {
this.a = a;
this.b = b;
}
sum(){
console.log(this.a +this.b);
}
}
// 继承父类
class Son extends Father{
constructor(x,y) {
this.x = x;
this.y = y;
}
}
var son = new Son(10,12);
son.sum();
这里会报错，这里没有办法继承，就需用到一个新的方法super
super()方法
语法：super([arguments]); // 调用 父对象/父类 的构造函数
super关键字用于访问和调用一个对象的父对象上的函数
在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前。super关键字也可以用来调用父对象上的函数。
正确继承写法如下：
class Father{
constructor(a,b) {
this.a = a;
this.b = b;
}
sum(){
console.log(this.a +this.b);
}
}
// 继承父类
class Son extends Father{
constructor(x,y) {
super(x,y); // 调用父类中的构造函数
/* this.x = x;
this.y = y; */
}
}
var son1 = new Son(10,12);
var son2 = new Son(100,120);
son1.sum();
son2.sum();打印结果：
四、子类继承父类的方法同时扩展自己的方法
特别注意：super必须写在this的前面！
class Father{
constructor(a,b) {
this.a = a;
this.b = b;
}
fn(){
console.log(this.a + this.b);
}
}
// 子类继承父类
class Son extends Father{
constructor(a,b) {
// super必须写在this前面
super(a,b);
this.a = a;
this.b = b;
}
fn2(){
console.log(this.b - this.a);
}
}
var son = new Son(5,8);
son.fn();
son.fn2();
// 可以用父亲的，也可以用自己的五、super关键字调用父类的普通函数
如果父类和子类都有一个相同的函数，那么会优先调用谁的呢？答：就近原则
看下面这个例子：
class Father{
fn1(){
console.log("I'm daddy");
}
}
class Son extends Father{
fn1(){
console.log("I'm a son")
}
}
var son = new Son();
son.fn1(); //I'm a son这里我创建了一个Father类和一个Son类，但是都有一个相同的函数fn1()，返回的只有Son函数
打印效果如下：
如果父类和子类都有一个函数，调用的话是按照就近原则（先调用儿子如果找不到儿子的这个方法再往上面找
如果想要继承父亲的话就要在Son中添加super
class Father{
fn1(){
return "I'm daddy"; //这里要替换成return，不然会显示undefined
}
}
class Son extends Father{
fn1(){
// console.log("I'm a son")
console.log(super.fn1() + '的son')
}
}
var son = new Son();
son.fn1();// I'm daddy的son打印效果如下：
六、使用类的注意事项
看下面这个例子：
//html部分
<button>点击</button>
//script部分
class Star {
constructor(name,age) {
//console.log(this);//这里的this指向的是Star这个类
this.name = name;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick =this.look;
}
look(){
// console.log(this);// 这个look方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
console.log(this.name); //这里获取不了name的值
}
}
var a = new Star('Nanchen',89);打印效果如下：
解决办法：定义一个初始化变量，使得this赋值给这个定义的变量，然后用这个变量替换其中的this即可
var that = null; //进行初始化
class Star {
constructor(name,age) {
console.log(this);
// 让把this赋值给that
that = this;
this.name = name;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick =this.look;
}
look(){
console.log(this);
console.log(that.name); //this替换成that
}
}
var a = new Star('Nanchen',89);打印效果：
对比上段代码：
还需注意一点：
这里新建一个tour方法，这里的tour方法中的this指向的是整个Star的内容
// 定义一个空值
var that = null;
var _that = null;
class Star {
constructor(name,age) {
console.log(this);
// 让把this赋值给that
that = this;
this.name = name;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick =this.look;
}
look(){
// 这个look方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
console.log(this);
console.log(that.name);
}
tour(){
_that = this;
console.log(this);
}
}
var a = new Star('Nanchen',89);
a.tour();
console.log(_that === a); // true
console.log(that === a); // ture打印效果如下：
使用类的注意事项总结：
1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。
2. 类里面的共有的属性和方法一定要加this使用。
3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。
标签：ES6,console,log,创建,添加,constructor,new,class,name 来源： https://blog.csdn.net/nanchen_J/article/details/120683694
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。