构造函数和类的实例化对比

class类和构造函数有许多相像的地方,首先我们先看如何创建并使用一个构造函数

function Person(name, age) {
  this.name = name
  this.age = age
}
const p1 = new Person('王多多', 18)
console.log(p1)
console.log(p1.name)
console.log(p1.age)

创建class类同理,不同的是 类 用构造器来接收参数。
构造器无论是否声明,类都有默认的构造器。
如果声明了类的构造器,则声明的构造器则会覆盖默认构造器

class Animal {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
const a1 = new Animal('张三', 12);
console.log(a1);
console.log(a1.name);
console.log(a1.age);

类的 静态属性与实例属性,静态方法与实例方法

class Animal {
    constructor(name, age) {
        //实例属性
        this.name = name;
        this.age = age;
    }
    //实例方法
    sayGoodBye = function () {
        console.log('goodbye');
    };
    //静态属性
    static play = 'basketball';
    //静态方法
    static sayHello = function () {
        console.log('hello');
    };
}

// 通过 new 出来的实例,访问到的属性,叫做 【实例属性】
const a1 = new Animal('张三', 12);
console.log(a1.name);//张三  实例属性
console.log(Animal.name);//Animal 访问不到
// 通过 构造函数,直接访问到的属性,叫做【静态属性】
console.log(Animal.play, 'play');//basketball 静态属性
console.log(a1.play);//undefined

// 通过 new 出来的实例,访问到的方法,叫做 【实例方法】
// 静态方法的声明需要与类的构造器平级,不需static声明实例方法
a1.sayGoodBye();
// 通过 构造函数,直接访问到的方法,叫做【静态方法】
// 静态方法的声明需要与类的构造器平级,用static声明静态方法
Animal.sayHello();

构造器里存静态属性和方法
在这里插入图片描述

构造函数的 静态属性与实例属性,静态方法与实例方法

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const p1 = new Person('王多多', 18);
// console.log(p1.name);
// console.log(p1.age);

//静态方法
Person.sayHello = function () {
    console.log('sayHello');
};
//实例方法
Person.prototype.sayGoodBye = function () {
    console.log('sayGoodBye');
};

p1.sayGoodBye();
Person.sayHello();
发布了39 篇原创文章 · 获赞 2 · 访问量 4047

猜你喜欢

转载自blog.csdn.net/qq_43137725/article/details/103443149