liang14658fox

Appearance

1. 类 ​

JavaScript中的类和对象是一个一对多的关系，类提供了一个模板用来创建对象，而对象是类的实例。类是一种抽象的概念，而对象是具体的实体，可以通过类来构建出无限数量的实例。

在JavaScript中，我们可以使用类和对象来定义数据的结构和行为，并且可以简化代码的实现，来提高可读性、可维护性和复用性，从而提升开发效率。

2. 对象 ​

对象的组成 ​

对象是由属性和方法组成的：

  • 属性：事物的 特征，在对象中用 属性 来表示（常用名词）
  • 方法：事物的 行为，在对象中用 方法 来表示（常用动词）

3. 创建类 ​

js
class Student {  // 类名 ClassName = Student
    // 构造函数
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    // 类中添加方法
    sing() {
        console.log(this.uname + "会唱歌");
    }
}
class Student {  // 类名 ClassName = Student
    // 构造函数
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    // 类中添加方法
    sing() {
        console.log(this.uname + "会唱歌");
    }
}

  • 构造函数： constructor() 方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个 constructor() 。

  • 方法：对象里面的函数称为方法，方法不需要声明，使用 对象.方法名() 的方式就可以调用，方法用来描述该对象的行为和功能。方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

4. 创建对象 ​

  • 通过类的实例化
js
class Student {
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    sing() {
        console.log(this.uname + "会唱歌");
    }
}
let peter = new Student("Peter", 21, "CS"); //类必须使用 new 实例化对象，不可省略
console.log(peter.uname); // Peter
peter.sing(); // Peter会唱歌
class Student {
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    sing() {
        console.log(this.uname + "会唱歌");
    }
}
let peter = new Student("Peter", 21, "CS"); //类必须使用 new 实例化对象，不可省略
console.log(peter.uname); // Peter
peter.sing(); // Peter会唱歌
  • 利用字面量创建对象
js
var star = {
    name: 'pink',
    age: 18,
    sex: '男',
    sayHi: function() {
        alert('hi~')
    }
}
var star = {
    name: 'pink',
    age: 18,
    sex: '男',
    sayHi: function() {
        alert('hi~')
    }
}
  • 利用 new Object 创建对象
js
var andy = new Object()
andy.name = 'pink'
andy.age = 18
andy.sex = '男'
andy.sayHi = function() {
     alert('hi~')
}
var andy = new Object()
andy.name = 'pink'
andy.age = 18
andy.sex = '男'
andy.sayHi = function() {
     alert('hi~')
}

TIP

  • new 关键字：
  • 字面量：

5. static 静态成员 ​

给成员属性或成员方法添加 static，该成员就成为静态成员，静态成员只能由该类调用。

js
class Person {
    static eat() {
        console.log('eat');
    }
}
let  p = new Person();
Person.eat(); // eat
p.eat(); // 报错
class Person {
    static eat() {
        console.log('eat');
    }
}
let  p = new Person();
Person.eat(); // eat
p.eat(); // 报错

6. getter、setter ​

实际上，getter 和 setter 是 ES5（ES2009）提出的特性，这里不做详细说明，只是配合 class 使用举个例子。 当属性拥有 get/set 特性时，属性就是访问器属性。代表着在访问属性或者写入属性值时，对返回值做附加的操作。而这个操作就是 getter/setter 函数。

  • 使用场景： getter 是一种语法，这种 get 将对象属性绑定到 查询该属性时将被调用的函数。适用于某个需要动态计算的成员属性值的获取。setter 则是在修改某一属性时所给出的相关提示。
js
class Test {
    constructor(log) {
        this.log = log;
    }
    get latest() {
        console.log('latest 被调用了');
        return this.log;
    }
    set latest(e) {
        console.log('latest 被修改了');
        this.log.push(e);
    }
}

let test = new Test(['a', 'b', 'c']);
// 每次 log 被修改都会给出提示
test.latest = 'd';
// 每次获取 log 的最后一个元素 latest，都能得到最新数据。
console.log(test.latest);
// latest 被修改了
// latest 被调用了
// [ 'a', 'b', 'c', 'd' ]
class Test {
    constructor(log) {
        this.log = log;
    }
    get latest() {
        console.log('latest 被调用了');
        return this.log;
    }
    set latest(e) {
        console.log('latest 被修改了');
        this.log.push(e);
    }
}

let test = new Test(['a', 'b', 'c']);
// 每次 log 被修改都会给出提示
test.latest = 'd';
// 每次获取 log 的最后一个元素 latest，都能得到最新数据。
console.log(test.latest);
// latest 被修改了
// latest 被调用了
// [ 'a', 'b', 'c', 'd' ]