构造函数/类

一般创建多个有相同属性/方法的对象,就会去写构造函数。

构造函数和普通函数的区别:

  1. 构造函数一般是首字母大写,普通函数则是遵照小驼峰式命名法。
  2. 构造函数内部会创建一个实例,调用普通函数时则不会创建新的对象。
  3. 构造函数内部的this指向是新创建的person实例,而普通函数内部的this指向调用函数的对象

如果我们要创建一个单独的对象,可以直接用对象字面量创建:

let person = {
    name: 'Jax',
    getName:function(){
        return this.name;
    },
    setName:function(val){
        this.name = val
    }
}

person.getName();
person.setName('Jeo');

这种方式我们只有 1 个 person,当我们有多个 person 的时候,难道我们就要多个字面量的定义么?这样会产生很多作用相同的代码,这个时候,我们可以使用构造函数。

new Function

使用函数定义一个实例,然后通过 new 返回这个实例对象,同时我们还可以初始化返回的实力对象中的属性值。

{
    let Person = function(){

        this.state = {
            name:'Jax'
        }

        this.getName = function(){
            return this.state.name
        }

        this.setName = function(val){
            this.state.name = val
        }
    }

    let person_1 = new Person();
    person_1.setName('Joe');
    person_1.getName(); // Jeo

    let person_2 = new Person();
    person_2.getName(); // Jax
}

class

在 ES6 中我们可以通过 class 关键字来定义“类”,再通过 new 来创建使用。

{
    class Person {
        constructor(props) {
            this.state = {
                name:'Jax'
            };
        }

        getName(){
            console.log(this.state.name)
        }

        setName(val){
            this.state.name = val
        }
    }

    let person_1 = new Person();
    person_1.setName('Joe');
    person_1.getName();

    let person_2 = new Person();
    person_2.getName();

}