javacsript创建对象的几种方法

一、传统模式

1、工厂模式

function createCat (name, age) {
    let o = new Object();
    o.name = name;
    o.age = age;
    o.sayHello = function(){
        console.log(`Hi,my name is ${this.name}`);
    }
    return o;
}
let sunny = createCat('sunny', 2);
sunny.sayHello(); // Hi,my name is sunny

2、构造函数模式

function Cat (name, age) {
   // 实例属性
   this.name = name;
   this.age = age;
    // 实例方法
   this.sayHello= function () {
       console.log(`Hi,my name is ${this.name}`);
   }
}
// 静态属性
Cat.color = 'YELLOW';
// 静态方法
Cat.eat = function () {
    console.log(`${this.name}喜欢吃鱼`);
}

let cat = new Cat('tom',2);
// 实例属性/方法 仅实例可访问
cat.sayHello(); // Hi,my name is tom
Cat.sayHello(); // Cat.sayHello is not a function
Cat.prototype.sayHello(); // Cat.prototype.sayHello is not a function
// 静态属性/方法 仅构造函数可访问
cat.eat(); // cat.eat is not a function
Cat.eat(); // Cat喜欢吃鱼
Cat.prototype.eat(); // Cat.prototype.eat is not a function

3、原型模式

function Cat () {}
// 原型属性，判断一个属性是否是原型属性：in操作符返回true且hasOwnProperty()返回false
// in操作符会在可以通过对象访问指定属性时返回true，无论改属性是在实例还是原型上
// hasOwnProperty()只有属性存在于实例上时才返回true
Cat.prototype.name= 'Amy';
// 原型方法
Cat.prototype.skill= function () {
    console.log(`抓老鼠`);
}

let cat = new Cat();
// 原型属性/方法 实例&原型对象均可访问
cat.skill(); // 抓老鼠
Cat.skill(); // Cat.skill is not a function
Cat.prototype.skill(); // 抓老鼠

4、字面量创建

const tom= {
    name: 'tom',
    age:2,
    skill:['抓老鼠','逗主人开心'],
    sayHello(){
        console.log(`Hi, my name is ${this.name}`);
    }
}

function Cat () {}
// 重写原型
Cat.prototype = tom;
// 恢复constructor属性
Object.defineProperty(Cat.prototype,'constructor',{
    enumable: false,
    value: Cat
});
let t = new Cat();
t.sayHello(); // Hi, my name is tom

二、ES6

class创建对象

class Cat {
    constructor(name){
        this.name = name;
    }
    // 静态属性及方法只有构造函数能访问
    static info = '白色的';
    static show () {
        console.log('yellow body');
    }
    say(){
        console.log(`${this.name}喵喵`);
    }
}
let cat = new Cat('keke');
cat.info; // undefined
Cat.info; // "白色的"
cat.name; // "keke"
Cat.name; // "Cat"
cat.show(); // cat.show is not a function
Cat.show(); // yellow body
cat.say(); // keke喵喵
Cat.say(); // cat.show is not a function