面向对象
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.构造函数+原型的组合模式
-
套路:自定义构造函数,属性在函数初始化,方法添加到原型上
-
适用场景:需要创建多个类型确定的对象
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