对象创建和继承

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)