令人振奋的Class(上)

最新推荐文章于 2025-05-30 11:30:00 发布

XU丶WEI

最新推荐文章于 2025-05-30 11:30:00 发布

阅读量229

点赞数

分类专栏： ES6

ES6 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了ES2015中的类定义、属性使用、构造方法、静态方法及getter和setter的使用方法。通过实例展示了如何创建类、定义类的方法以及如何通过实例调用这些方法。

可以在这里测试 http://babeljs.io/repl/
es2015中定义类:

    clss me
    {
        showName()
        {
            return "张三";
        }
    }

    // 实例化类
    let m = new me();
    console.log(m.showName());
 1
2
3
4
5
6
7
8
9
10
11
 1
2
3
4
5
6
7
8
9
10
11

类中属性的使用:

class me{
  showName(){
    this.age = 18;
    alert("zhangsan")
  }
}
// 实例化类
let m = new me();
m.showName(); //这里就定义了age
alert(m.age); //18
 1
2
3
4
5
6
7
8
9
10
 1
2
3
4
5
6
7
8
9
10

构造方法：

class me
{
  // 构造方法
  constructor(_age)
  {
    this.age = _age;
  }

  showName()
  {
    console.log(this.age);
  }
}
// 实例化类
let m = new me(25);
m.showName(); //打印:25
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

类似于静态方法：

class me
{
  static showme()
  {
    console.log("zhangsan");
  }
}

//调用静态方法
me.showme(); //打印:zhangsan
 1
2
3
4
5
6
7
8
9
10
 1
2
3
4
5
6
7
8
9
10

getter和setter:

class me
{
  get myname()
  {
    return "我的名字:"+this._abc;
  }
  set myname(v)
  {
    this._abc = v;
  }
}

//实例化
let m = new me();
m.myname = "jack";
console.log(m.myname); //打印:我的名字:jack