JavaScript对象创建模式与继承模式

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

对象创建模式

1.Object构造函数模式

先创建Object空对象，再往空对象中动态添加属性/方法，适用于起始时不确定对象内部的数据，主要问题是语句太多。

var a = new Object();
a.name = 'mike';
a.setName = function(name){
    this.name = name;
}

2.利用字面量进行创建

使用{}创建对象，同时指定属性/方法，适用于起始时对象内部的数据是确定的（也可以在创立对象后动态添加属性），主要问题是创建多个对象时有重复代码。

 var a = {
     name:'mike';
     setName:function(name){
     this.name = name;
}
 };

3.工厂模式

通过工厂函数创建对象并返回，适用于需要创建多个对象时，主要问题是对象没有一个具体的类型（都是Object类）。

function create(name){
    var a = {
    name:name,
    setName:function(name){
    this.name = name;
}
    return a;
}
var object = create('mike');

4.自定义构造函数模式

自定义的构造函数，通过new创建对象，适用于需要创建多个类型确定的对象，主要问题是每个对象都有相同的数据，浪费内存。

function Create(name){
    this.name = name;
    this.setName = function(name){
    this.name = name;
}
}
var a = new Create('mike');

5.构造函数+原型

自定义构造函数，属性在函数中初始化，方法放到原型上。

function Create(name){
    this.name = name;
}
Create.prototype.setName = function (name){
    this.name = name;
}
var a = new Create('mike');
a.setName('tom');

继承模式

1.原型链继承

通过将父类的实例对象赋值给子类的原型来达到继承的目的，这样新创建的子类型的实例会继承父类的方法和属性。

注意：将父类的实例赋值给子类的原型后要将子类原型的constructor指向修正为子类。

//定义父类型与子类型的构造函数
function Father(){
    this.fathertype = 'father';
}
function Son(){
    this.sontype = 'son';
}

//在父类型的原型对象上添加方法
Father.prototype.showFather = function(){
    console.log(this.fathertype);
}

/**将父类型的一个实例赋值给子类型的原型达到继承的目的，
此时通过原型链子类型可以调用父类型原型对象上的方法，
也可以调用父类型的属性
**/
Son.prototype = new Father();

//修正子类的原型对象的constructor为Son，否则constructor会指向Father
Son.prototype.constructor = Son
//在子类型的原型对象上添加方法
Son.prototype.showSon = function(){
    console.log(this.sontype);
    } 
    
var father = new Father();
father.showFather();

var son = new Son();
son.showSon();
//子类型的实例调用父类的属性
console.log(son.fathertype);
//子类的实例调用父类的方法
son.showFather();

图解：

2.借用构造函数继承（并不是真正的继承）

通过在子类的构造函数中调用父类型构造实现。

function Father(name,age){
    this.name = name;
    this.age = age;
}
function Son(name,age,loc){
//相当于用this去执行Person，即this.Father(name,age)
    Father.call(this,name,age);
    this.loc = loc;
}
var s = new Son('mike','18','china');
console.log(s.name, s.age, s.loc);