JavaScript 创建对象 (继承和实例)

2017年7月25日2025年9月9日除除

一、原型"proto"

//__proto__
var Mazey1 = {
    name: 'Mazey1',
    say: function(){
        console.log('Hi, i\'m ' + this.name + '!');
    }
};
var Cherrie1 = {
    name: 'Cherrie1'
};
Cherrie1.__proto__ = Mazey1;
Cherrie1.say(); //Hi, i'm Cherrie1!

低版本IE不支持，不推荐使用。

二、方法"Object.create()"

//Object.create
var Mazey2 = {
    name: 'Mazey2',
    say: function(){
        console.log('Hi, i\'m ' + this.name + '!');
    }
};
function createMazey(name){
    var m = Object.create(Mazey2);
    m.name = name;
    return m;
}
var Cherrie2 = createMazey('Cherrie2');
Cherrie2.say(); //Hi, i'm Cherrie2!

三、构造函数"function"

//function
function Mazey3(name){
    this.name = name;
    this.say = function(){
        console.log('Hi, i\'m ' + this.name + '!');
    }
}
var Cherrie3 = new Mazey3('Cherrie3');
Cherrie3.say(); //Hi, i'm Cherrie3!

四、构造函数"function" - 多个对象共用方法

//function 多个对象共用say
function Mazey4(name){
    this.name = name;
}
Mazey4.prototype.say = function(){
    console.log('Hi, i\'m ' + this.name + '!');
}
var Cherrie4 = new Mazey4('Cherrie4');
Cherrie4.say(); //Hi, i'm Cherrie4!
var Luna4 = new Mazey4('Luna4');
Luna4.say(); //Hi, i'm Luna4!

节省内存，推荐使用。

五、类的继承/call/2017-07-28

//类1
function Mazey(name){
    this.name = name;
    this.say = function(){
        console.log('Hi, i\'m ' + this.name + '.');
    };
}
//用原型继承不了方法
Mazey.prototype = {
    run: function(){
        console.log(this.name + 'is running.');
    }
};
var Cherrie = new Mazey('Cherrie');
Cherrie.say(); //Hi, i'm Cherrie.
Cherrie.run(); //Cherrieis running.

//类2 继承类1 call
function Baby(name){
    Mazey.call(this, name);
    this.eat = function(){
        console.log(this.name + ' eats rice.');
    };
}
LittleBaby = new Baby('Baby');
LittleBaby.say(); //Hi, i'm Baby.
LittleBaby.eat(); //Baby eats rice.
LittleBaby.run(); //Uncaught TypeError: LittleBaby.run is not a function

原始类的原型"prototype"继承不了，把不需要继承的方法属性放在原型里面。

六、类的继承/ECMAScript6/2017-08-03

//类1
class Mazey {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(`My name is ${this.name}, i'm ${this.age}.`);
    }
    info(){
        return `${this.name}, ${this.age}`;
    }
}
var m1 = new Mazey('mazey', 18);
m1.say(); //My name is mazey, i'm 18.
//类2
class Cherrie extends Mazey {
    constructor(name, age, sex){
        super(name, age); //super一定要放在this前面，等于 Mazey.call(this, name, age)
        this.sex = sex;
    }
    say(){
        super.say();
        console.log(`I am a ${this.sex}(${this.age}).`)
    }
    moreInfo(){
        console.log(`${super.info()}, ${this.sex}`); //super.info() => Mazey.info.call(this)
    }
}
var c1 = new Cherrie('cherrie', 17, 'girl');
c1.say(); //My name is cherrie, i'm 17. I am a girl(17).
c1.moreInfo(); //cherrie, 17, girl

七、通过函数实例类/2017-08-10

可传入任意组{key: value}对象，只取需要的值，没有则使用默认值。

//定义类
function Person(obj) {
    this.name = obj.name || 'anonymous';
    this.age = obj.age || 0;
}
//定义类共享内存的方法
Person.prototype.say = function () {
    console.log(`My name is ${this.name}, i'm ${this.age}.`);
};
//通过函数创建实例
function newPerson (obj) {
    return new Person(obj || {});
}
//正常传值
var mazey = newPerson({ //自动获取name和age
    name: 'mazeyqian',
    age: '19'
});
mazey.say(); //My name is mazeyqian, i'm 19.
//只传一个
var cherrie = newPerson({
    name: 'cherrie'
});
cherrie.say(); //My name is cherrie, i'm 0.
//不传值
var someone = newPerson(); //若不传值，则使用默认值
someone.say(); //My name is anonymous, i'm 0.
//传不相关值
var test = newPerson({
    sex: 'boy'
});
test.say(); //My name is anonymous, i'm 0.

除除