1.对象创建模式
- 方式一: Object构造函数模式
- 用法: 先创建空Object对象, 再动态添加属性/方法
- 适用场景: 起始时不确定对象内部数据
- 问题: 语句太多
/*
一个人: name:"anna", age: 12
*/
// 先创建空Object对象
var p = new Object()
p = {} //此时内部数据是不确定的
// 再动态添加属性/方法
p.name = 'anna'
p.age = 12
p.setName = function (name) {
this.name = name
}
//测试
console.log(p.name, p.age)
p.setName('bob')
console.log(p.name, p.age)
- 方法二 :对象字面量模式
用法: 使用{}创建对象, 同时指定属性/方法
适用场景: 起始时对象内部数据是确定的
问题: 如果创建多个对象, 有重复代码
var p = {
name: 'anna',
age: 18,
setName: function (name) {
this.name = name
}
}
//测试
console.log(p.name, p.age)
p.setName('lily')
console.log(p.name, p.age)
var p2 = { //如果创建多个对象代码很重复
name: 'Bob',
age: 13,
setName: function (name) {
this.name = name
}
}
- 方法三:工厂模式
用法: 通过工厂函数动态创建对象并返回
适用场景: 需要创建多个对象
问题: 对象没有一个具体的类型, 都是Object类型
function createPerson(name, age) { //返回一个对象的函数===>工厂函数
var obj = {
name: name,
age: age,
setName: function (name) {
this.name = name
}
}
return obj //只要是能返回一个对象,就是工厂模式
}
// 创建2个人
var p1 = createPerson('tom', 12)
var p2 = createPerson('anna', 13)
// p1/p2是Object类型
function createStudent(name, score) {
var obj = {
name: name,
score : score
}
return obj
}
var s = createStudent("tom",95)
// s也是Object
- 方法四:自定义构造函数模式
用法: 自定义构造函数, 通过new创建对象
适用场景: 需要创建多个类型确定的对象,与上方工厂模式有所对比
问题: 每个对象都有相同的数据, 浪费内存
//定义类型
function People(name, age) {
this.name = name
this.age = age
this.setName = function (name) {
this.name = name
}
}
var p1 = new People('anna', 12)
p1.setName('tom')
console.log(p1.name, p1.age)
console.log(p1 instanceof People)
function Student (name, score) {
this.name = name
this.score = score
}
var s = new Student('bob', 88)
console.log(s instanceof Student)
var p2 = new People('lily', 23)
console.log(p1, p2)
- 方法六:构造函数+原型的组合模式
用法: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
适用场景: 需要创建多个类型确定的对象
放在原型上可以节省空间(只需要加载一遍方法)
function Person(name, age) { //在构造函数中只初始化一般函数
this.name = name
this.age = age
}
Person.prototype.setName = function (name) {//方法在原型里
this.name = name
}
var p1 = new Person('tom', 23)
var p2 = new Person('anna', 24)
console.log(p1, p2)
2.继承模式
- 方式一:原型链的继承
用法:
- 定义父类型构造函数
- 给父类型的原型添加方法
- 定义子类型的构造函数
- 创建父类型的对象赋值给子类型的原型
- `将子类型原型的构造属性设置为子类型
- 给子类型原型添加方法
- 创建子类型的对象: 可以调用父类型的方法
关键
- `子类型的原型为父类型的一个实例对象`
//父类型
function Supper() {
this.supProp = 'Supper property'
}
//showSupperProp在Supper的原型里,能看到showSupperProp是在Supper的实例里
Supper.prototype.showSupperProp = function () {
console.log(this.supProp)
}
//让Sub原型实例变成object的实例,就能看到showSupperProp
//子类型
function Sub() {
this.subProp = 'Sub property'
}
// 子类型的原型为父类型的一个实例对象
Sub.prototype= new Supper()
// 让子类型的原型的constructor指向子类型
Sub.prototype.constructor = Sub
Sub.prototype.showSubProp = function () {
console.log(this.subProp)
}
var sub = new Sub()
sub.showSupperProp()
// sub.toString() //能看到,因为内部执行了
sub.showSubProp()
console.log(sub) // Sub
所有原型链上的方法都可以看见
constructor属性在object实例对象身上,object实例对象的constructor指向supper函数对象上,让sub的constructor指向sub(子类型的原型的constructor 指向子类型):Sub.prototype.constructor = Sub
- 方法二:借用构造函数继承(假的)
用法:
定义父类型构造函数
定义子类型构造函数
在子类型构造函数中调用父类型构
关键:
在子类型构造函数中通用call()调用父类型构造函数
作用:
能借用父类中的构造方法,但是不灵活
function Person(name, age) {
this.name = name
this.age = age
}
function Student(name, age, score) {
//此处利用call(),将 [Student]的this传递给Person构造函数
Person.call(this, name, age) // 相当于: this.Person(name, age)
//this没有person这个函数,this借用了person这个函数
/*this.name = name
this.age = age*/
this.score= score
}
var s = new Student('Tom', 20, 85)
console.log(s.name, s.age, s.score)
//这里并没有继承
[Person]中的this是动态变化的,在[Student]中利用[Person.call(this, name, age)]改变了其this指向,所以可以实现此效果
- 方法三:组合继承
利用原型链实现对父类型对象的方法继承
利用super()借用父类型构建函数初始化相同属性
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.setName = function(name){
this.name = name
}
function Student(name,age,score){
Person.call(this,name,age)
this.score = score
}
Student.prototype = new Person()
Student.prototype.constructor = Student
Student.prototype.setScore = function(score){
this.score = score
}
var s = new Student("tom",24,85)
s.setName("anna")
s.setScore(88)
console.log(a.name,s.age,a.score)