JS对象模式高级

对象创建模式

1. Object构造函数模式

• 套路：先创建空Object对象，再动态添加属性/方法
• 适用场合：起始时不确定对象内部数据
• 缺点：语句太多

var p={}

p.name='TOM'
p.age=12
p.setName=function(name){
   this.name=name
}

2. 对象字面量模式

• 套路：使用{}创建对象，同时指定属性/方法
• 适用场景：起始时对象内部数据时确定的
• 缺点：如果创建多个对象，有重复代码

var p={
  name:'TOM'
  age:12
  setName:function(name){
      this.name=name
  }
}

3. 工厂模式

• 套路：通过工厂函数动态创建对象并返回
• 适用场景：需要创建多个对象
• 缺点：对象没有一个具体的类型，都是Object类型（即任何工厂实例的原型链一样）

function createPerson(name,age){
   var obj={
      name:name,
      age:age,
      setName:function(name){
         this.name=name
      }
   }
   return obj// 返回一个对象的函数==》工厂函数
}
//创建两个人
var p1=createPerson('Tom',12)
var p2=createPerson('July',13)

4. 自定义构造函数+原型链

• 套路：自定义构造函数，通过new创建对象
• 适用场景：需要创建多个类型确定的对象

function Person(name,age){
     this.name=name;
     this.age=age
}
Person.prototype.setName=function(name){
     this.name=name
}// 方法写原型链上节省内存空间

继承模式

1. 原型链继承

• 套路

1. 定义父类型构造函数
2. 给父类型的原型添加方法
3. 定义子类型构造函数
4. 创建父类型的对象赋值给子类型的原型
5. 修改子类型的原型的constructor为子类型
6. 给子类型添加方法
7. 创建子类型的对象（可调用父类型的方法）

• 关键：子类型的原型是父类型的一个实例对象
• 主要作用：获取子类型调用父类型方法权限

// 定义父类型构造函数
function Supper(){
    this.supper='supper'
}
// 给父类型的原型添加方法
Supper.prototype.showSupper=function(){
    console.log(this.supper)
}
// 定义子类型构造函数
function Sub(){
    this.sub='sub'
}
// 创建父类型的对象赋值给子类型的原型
Sub.prototype = new supper() 
// 修改子类型的原型的constructor为子类型
Sub.prototype.constructor=Sub
// 给子类型添加方法
Sub.prototype.showSub=function(){
    console.log(this.sub)
}
// 创建子类型的对象（可调用父类型的方法）
var sub=new Sub()
sub.showSupper()

2. 构造函数继承（假继承）

• 套路

1. 定义父类型构造函数
2. 定义子类型构造函数
3. 在子类型构造函数中调用父类型构造函数

• 关键：在子类型构造函数中适用call（）/apply（）调用父类型构造函数
• 主要作用：获取子类型调用父类型参数权限

function People(name,age){
    this.name=name
    this.age=age
}
function Student(name,age,grade){
    People.call(this,name,age)
    this.grade=grade
}

3. 组合继承(原型链加构造函数)

function People(name,age){
    this.name=name
    this.age=age
}
People.prototype.setName=function(name){
    this.name=name
}
function Student(name,age,grade){
// 为了能看到父类型的属性
    People.call(this,name,age)
    this.grade=grade
}
// 为了能看到父类型的方法
Student.prototype = new People()
Student.prototype.constructor=Student
Student.prototype.setGrade=function(grade){
     this.grade=grade
}

var s = new Student('Tom',24,3)
s.setName('July')
s.setGrade(2)
console.log(s.name,s.age,s.grade)//July 24 3