← 返回首页
Javascript基础教程(二十七)
发表时间:2020-03-31 00:42:00
讲解Javascript的class定义类

Javascript使用function创建对象的方式一直让人诟病。然而从ES6开始提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

1.es5和es6构造实例的区别

ES5的方式:

<script>
    //Person为构造函数
    function Person(name,age,addr){
        this.name = name;
        this.age = age;
        this.addr = addr;
    }
    //在构造函数的原型上添加方法
    Person.prototype.sayHello=function(){console.log("hello,my name is "+this.name);}
    //构造一个实例
    let person = new Person('张三',18,'西安市');
    //在实例上调用该方法
    person.sayHello();
    console.log(person);
    console.log(person instanceof Object);
</script>

ES6的方式:

<script>
    // 类中的this指向创建的实例
    class Person{
        constructor (name, age,addr) {
            this.name = name;
            this.age = age ;
            this.addr = addr;
        }
        sayHello(){
            console.log("hello,my name is "+this.name);
        }
    }
    //构造一个实例
    let person = new Person('张三',18,'西安市');
    //在实例上调用该方法
    person.sayHello();
    console.log(person);
    console.log(person instanceof Object);
</script>

我们可以看到通过es6去实现,更容易理解,并且代码量也有所减少。使用这种方式,我们可以清楚的明白,前面使用了class的就是一个类,那么它就有构造实例的能力,并且constructor中放的是每个通过该类构造出来的实例都可以获得属性,在constructor外面放的是可以获得的方法。

2.class基本语法

constructor函数 与java类也可以添加静态属性和静态方法。

<script>
    // 类中的this指向创建的实例
    class Person{
        //静态属性
        static nation = 'china';
        //静态方法
        static worldPeace(){
            console.log('I wish world peace!');
        }
        constructor (name, age,addr) {
            this.name = name;
            this.age = age ;
            this.addr = addr;
        }
        sayHello(){
            console.log("hello,my name is "+this.name);
        }
    }
    //构造一个实例
    let person = new Person('张三',18,'西安市');
    //在实例上调用该方法
    person.sayHello();
    Person.worldPeace();
    console.log(Person.nation);
    console.log(person instanceof Person);
    console.log(person instanceof Object);
</script>
运行结果:
hello,my name is 张三
I wish world peace!
china
true
true

需要注意的是,与java语言不同,构造方法可以返回指定类型的实例对象。例如:

<script>
    class Person{
        constructor () {
          return Object.create({});// 改变默认返回的类型
        }
    }
    //构造一个实例
    let person = new Person();
    console.log(person instanceof Person);
    console.log(person instanceof Object);
</script>

运行结果:
false
true