JS 对象模式和继承

185 阅读4分钟

该文章知识点源于《JS高级程序设计 第三版》 用于面试的整理

对象模式

工厂模式

function createPerson(name,job){
	const o=new Object()
	o.name=name;
	o.job=job;
	o.sayName=function(){
		console.log(this.name)
	}
	return o
}

const person1=createPerson("hjh","Engineer")

优点:可以解决多个相似对象的问题

缺点:不能判断一个对象的类型

构造函数模式

构造函数可以用来创建特定的对象。

function Person(name,job){
	//直接将属性和方法赋给了this
	this.name=name;
	this.job=job;
	this.sayName=function(){
		console.log(this.name)
	}
	//没有return语句
}

//没有显示创建对象
const person1=new Person("hjh","Engineer")
console.log(person1 instanceof Object) //true
console.log(person1 instanceof Person) //true

缺点:

每个方法需要在每个实例上重新创建一遍,但是创造两个完成相同任务的Function实例没有必要。

原型链模式

每个函数都有一个prototype属性(原型属性)

function Person(){
}

Person.prototype.name="hjh"
Person.prototype.job="Engineer"
Person.prototype.sayName=function(){
		console.log(this.name)
	}
//简便写法
Person.prototype={
	constructor:Person,
	name:"hjh",
	job:"Engineer"sayName:function(){
		console.log(this.name)
	}
}

const person1=new Person()
const person2=new Person()
person1.sayName() //hjh
person2.sayName() //hjh
console.log(person1.sayName==person2.sayName)//true
console.log(Object.getPrototypeOf(person1) == 
Person.prototype)//true  可以用这个方法获得实例对象的[[Prototype]]值

缺点:

(1)所有实例在默认的情况下都取得相同的属性值

(2)其存在共享的特性。倘若原型中存在引用类型的值(比如Array),实例A和实例B向里面添加不同的值就会出现问题。

组合使用构造函数和原型模式(重要)

这种方法是自定义类型的最常用方式。构造函数用来定义实例属性,而原型模式用于定义方法和共享的属性

function Person(name,job){
    this.name=name
    this.job=job
    this.friends=["hjh1","hjh2"]
}

Person.prototype={
    constructor:Person,
    sayName:function(){console.log(this.name)
    }

继承

原型链继承

function SuperType(){
    this.property=true
}
SuperType.prototype.getSuperValue=function(){
    return this.property
}
function SubType(){
    this.subproperty=false
}
//①继承 
SubType.prototype=new SuperType()

//②继承后给SubType的原型对象添加方法
SubType.prototype.getSubValue = function(){
    return this.subproperty
}
//③继承后重写(屏蔽)超类中的方法。必须在①的后面
SubType.prototype.getSuperValue = function(){
    return false
}


const instance=new SubType()
console.log(instance.getSuperValue()) //false

console.log(instance instanceof Object) //true
console.log(instance instanceof SuperType) //true
console.log(instance instanceof Subtype) //true

值得注意的是:必须要在SuperType实例替换了SubType的原型后,SubType才可以重写超类中的方法。重写后,当通过SubType的实例调用getSuperValue时,调用的就是重新定义的方法。但通过SuperType的实例调用getSuperValue时,还是会调用原来的方法。

优点: 父类方法可以复用

缺点:

(1)父类所有的引用属性都会被子类共享,更改一个子类的引用属性,其他子类也会受影响

(2)在构造子类型的实例时,不能给父类的构造函数传递参数

构造函数继承(经典继承)

基本思想:在子类型的构造函数内部调用超类型构造函数,相当于新的Child实例对象上运行了SuperType()函数中的所有初始化代码

function SuperType(name){
  this.colors=["red","blue"]
  this.name=name
}

//经典继承
function SubType(){
  //给父类传递参数
  SuperType.call(this,"hjh");
}

const instance1=new SubType()
const instance2=new SubType()
instance1.colors.push("111") //"red","blue","111"
instance2.colors.push("222") //"red","blue","222"

优点:

(1)父类的引用属性不会被共享

(2)可以在子类构造函数中向父类传递参数

缺点:

(1)方法都在构造函数中,因此函数无法复用。

(2)子类不能访问父类原型上定义的方法(即不能访问Parent.prototype上定义的方法),因此所有方法属性都写在构造函数中,每次创建实例都会初始化

组合继承

基本的思路就是使用原型链继承继承原型上的属性和方法,而通过构造函数继承来继承实例属性,这样既可以把方法定义在原型上以实现重用,又可以让每个实例都有自己的属性

function SuperType(name){
  this.colors=["red","blue"]
  this.name=name
}
SuperType.prototype.sayName=function(){
    return this.name
}

function SubType(name,age){
    
     SuperType.call(this,name)
     this.age=age
}

SubType.prototype=new SuperType()
SubType.prototype.constructor=SubType
SubType.prototype.sayAge=function(){
    console.log(this.age)
}