面向对象

面向对象

01.对象创建模式

1.Object构造函数模式

• 套路: 先创建空Object对象, 再动态添加属性/方法

• 适用场景: 起始时不确定对象内部数据

• 问题: 语句太多

  //一个人：name:"Tom",age:12
  var p = new Object()
  p.name='Tom'
  p.age=12
  p.setName=function(name){
      this.name=name
  }
  //测试
  p.setName('JACK')
  console.log(p.name,p.age);//JACK 12
  

2.对象字面量模式

• 套路: 使用{}创建对象, 同时指定属性/方法

• 适用场景: 起始时对象内部数据是确定的

• 问题: 如果创建多个对象, 有重复代码

   var p ={
       name:'Tom',
       age:12,
       setName:function(name){
           this.name=name
       }
   };
  
   //测试
   console.log(p.name,p.age);//Tom 12
   p.setName('JACK')
   console.log(p.name,p.age);//JACK 12
  
   var p2={//如果创建多个对象代码很重复
       name:'Bob',
       age:25,
       setName:function (name) {  
           this.name=name
       }
   }
  

3.工厂模式

• 套路: 通过工厂函数动态创建对象并返回
• 适用场景: 需要创建多个对象
• 问题: 对象没有一个具体的类型, 都是Object类型

//创建2个人
var p1=createPerson('Tom',12)
var p2=createPerson('JACK',13)

//p1,p2是object类型
function createStudent(name,price) {  
    var obj={
        name:name,
        price:price
    }
    return obj
}
var s =createStudent('zhangsan',12323)
console.log(s);//Object { name: "zhangsan", price: 12323 }
//s也是object

4.自定义构造函数模式

1.套路
1.定义父类构造函数
2.给父类型的原型添加方法
3.定义子类型的构造函数
4.创建父类型的对象赋值给子类型的原型
5.将子类型原型的构造属性设置为子类型
6.给子类原型添加方法
7.创建子类型的对象：可以调用父类型的方法
2.关键
1.子类型的原型为父类型的一个实例对象

function Supper() { //父类型
    this.supProp = 'Supper property'
}
//原型的数据所有的实例对象都可见
Supper.prototype.showSupperProp = function () {
    console.log(this.supProp)
}
function Sub() { //子类型
    this.subProp = 'Supper property'
}
// 子类的原型为父类的实例
Sub.prototype = new Supper()
// 修正Sub.prototype.constructor为Sub本身
Sub.prototype.constructor = Sub

Sub.prototype.showSubProp = function () {
    console.log(this.subProp)
}

// 创建子类型的实例
var sub = new Sub()
// 调用父类型的方法
sub.showSubProp()
// 调用子类型的方法
sub.showSupperProp()

5.构造函数+原型的组合模式

1. 套路：自定义构造函数，属性在函数初始化，方法添加到原型上

2. 适用场景：需要创建多个类型确定的对象

    function Person(name,age) {//在构造函数中初始化一般函数
        this.name=name
        this.age=age
    }
    Person.prototype.setName =function (name){
        this.name=name
    }
   

02.继承模式

1.原型链继承

1.套路
1.定义父类构造函数
2.给父类型的原型添加方法
3.定义子类型的构造函数
4.创建父类型的对象赋值给子类型的原型
5.将子类型原型的构造属性设置为子类型
6.给子类原型添加方法
7.创建子类型的对象：可以调用父类型的方法
2.关键
1.子类型的原型为父类型的一个实例对象

function Supper() { //父类型
    this.supProp = 'Supper property'
}
//原型的数据所有的实例对象都可见
Supper.prototype.showSupperProp = function () {
    console.log(this.supProp)
}
function Sub() { //子类型
    this.subProp = 'Supper property'
}
// 子类的原型为父类的实例
Sub.prototype = new Supper()
// 修正Sub.prototype.constructor为Sub本身
Sub.prototype.constructor = Sub

Sub.prototype.showSubProp = function () {
    console.log(this.subProp)
}

// 创建子类型的实例
var sub = new Sub()
// 调用父类型的方法
sub.showSubProp()
// 调用子类型的方法
sub.showSupperProp()

2.借用构造函数继承

1.套路：

• 定义父类型构造函数
• 定义子类型构造函数
• 在子类型构造函数中调用父类型构造

2.关键

• 在子类型构造函数中通用super()调用父类型构造函数

  function Person(name,age) {
   this.name=name
   this.age=age
  }
  function Student(name,age,price) { 
   Person.call(this,name,age)//相当于this.Person(name,age)
  //  this.name=name
  //  this.age=age
   this.price=price
  }
  
  var s =new Student('Tom',20,14000)
  console.log(s.name,s.age,s.price);//Tom 20 14000
  

3.组合继承

原型链+借用构造函数的组合继承

​ 1.利用原型链实现对父类型对象的方法继承

​ 2.利用super()借用父类型构造函数初始化相同属性

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

function Student(name, age, price) {
    Person.call(this, name, age) //相当于this.Person(name,age)
    this.price = price
}
Student.prototype = new Person() //为了能看到父类型的方法
Student.prototype.constructor = Student //修正constructor属性
Student.prototype.setPrice = function (price) {
    this.price = price
}

var s = new Student('TOM', 24, 15000)
s.setName('BOb')
s.setPrice(16000)
console.log(s.name, s.age, s.price);//BOb 24 16000