JS 对象模式和继承（部分）

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

关于Instance和typeof

JS中基本数据类型记忆法：USONB（除了object，其他都存储在内存栈中）

• U：undefined
• S：string symbol
• O：object
• N：null（属于object类型，typeof判断得到的结论） number
• B：boolean

关于null和undefined：
null表示"没有对象"，即此处不应该有值。
undefined表示“缺少值” 即此处应该有一个对象，但是还没有定义

JS中引用类型：（存储在内存堆中）

• object
• array
• date
• regexp
• function
• 基本包装类型(String Number Boolean Global Math)

在了解了上述概念后，直接来记结论：

（1）typeof 不能精确判断object类型，只能告诉我们是object，其他的基本数据类型可以判断（null存在一个历史遗留bug）。所以对object对象的判断使用instanceof。

instanceof的原理：判断一个实例是否属于某种类型、判断一个实例是否是其祖先类型的实例。

（2）可以使用Object.prototype.toString.call来对一个类型进行判断。

Object.prototype.toString.call(1) // "[object Number]"

Object.prototype.toString.call('hi') // "[object String]"

Object.prototype.toString.call({a:'hi'}) // "[object Object]"

Object.prototype.toString.call([1,'a']) // "[object Array]"

Object.prototype.toString.call(true) // "[object Boolean]"

Object.prototype.toString.call(() => {}) // "[object Function]"

Object.prototype.toString.call(null) // "[object Null]"

Object.prototype.toString.call(undefined) // "[object Undefined]"

Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"

对象模式

工厂模式

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()) //true

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）其存在共享的特性。倘若原型中存在引用类型的值（比如Array），实例A和实例B向里面添加不同的值就会出现问题。

（2）在构造子类型的实例时，不能向超类型的构造函数中传递参数

构造函数继承（经典继承）

基本思想：在子类型的构造函数内部调用超类型构造函数

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）在超类型的原型中定义的方法，对子类型而言不可见

组合继承

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)
}