Js面向对象

Js对象的创建方式

1. 工厂模式

• 用函数来封装，以特定接口创建对象。
• 优：解决创建多个相似对象的问题
• 劣：无法对象识别

function createPerson(name,age,job){
	var o = new Object()
	o.name = name
	o.age = age
	o.job = job
	o.sayName = function(){
		console.log(this.name)
	}
	return o
}
let person1 = createPerson("nell",12,"software engineer")

2. 构造函数模式

• 劣：每个方法都要在每个实例上重新创建一遍，若在全局作用域还可能造成变量污染。

person1.sayName() === person2.sayName() //false

function createPerson(name,age,job){
	this.name = name
	this.age = age
	this.job = job
	this.sayName = function(){
		console.log(this.name)
	}
}
let person1 = new createPerson("kell",16,"software engineer")
let person2 = new createPerson("well",30,"software engineer")

3. 原型模式

• 构造函数通过prototype属性创建实例化对象的共享属性和方法
• 缺点：新对象共享通过prototype创建的方法和属性，无法维护引用类型
  

function person(){}
Person.prototype.name = "Nical"
Person.prototye.age = 19
Person.prototype.job = "software engineer"
Person.prototype.sayName = function(){
	console.log(this.name)		
}
let person1 = new Person()
let person2 = new Person()
person1.sayName() === person2.sayName() //true

4. 构造函数和原型组合

• 构造函数定义实例属性，原型定义实例共享的方法

function Person(name,age,job){
	this.age = age
	this.name = name
	this.job = job
	this.friends = ["xiaoming","xiaohong"]
}
Person.prototype ={
	constructor: Person
	sayName: function(){
		console.log(this.name)
	}
}

let person1 = new Person("ming",18,"Front end engineer")
let person2 = new Person("kong",19,"Front end engineer")
person1.friends === person2.friends //false
person1.sayName() === person2.sayName() //true

5. 动态原型模式

• 组合使用构造函数和原型模式，同时在原型模式前添加校验

function Person(name,age,job){
	this.name = name
	this.age = age
	this.job = job
	if(typeof this.sayName !== "function"){
		Person.prototype.sayName=function(){
			console.log(this.name)
		}
	}
}

6. 寄生构造函数模式

• 和工厂模式相同，使用构造函数封装创建对象。但最后使用new来实例化
• 缺点：返回的对象与构造函数无关，instanceof不可用，一般不使用

function Person(name,age,job){
	var o = new Object()
	o.name = name
	o.age = age
	o.job = job
	o.sayName = function(){
		console.log(this.name)
	}
	return o
}
let person1 = new Person("Nill",22,"Front end engineer ")

7. 稳妥构造函数模式

• 安全环境，不使用this,也不实用new

function Person(name,age,job){
	var o = new Object()
	o.sayName = function(){
	console.log(name)
	}
	return o
}

Js继承的实现方式，优缺点

1. 构造函数

• 缺点：方法无法复用

function Super(){
	this.age = [1,2,3]
}
function Sub(){
	Super.call(this)
}
let instance = new Sub()
instance.age // 1,2,3
instance.age.push(4)//4
instance.age//1,2,3,4
let instance2 = new Sub()
instance2.age //1,2,3

2. 原型链

• 让超类的实例等于子类的原型对象
• 缺点：引用类型共享

function Super(){
	this.age = 30
}
Super.prototype.getAge(){
	return this.age
}
function Sub(){}
sub.prototype = new Super()
let instance = new Sub()
instance.getAge() // 30

3. 构造函数+原型

function Super(){
	this.age = [1,2,3]
}
Super.protoype.sayName(){
	return name
}
function Sub(name){
	this.name = name
	Super.call(this)
}
Sub.prototype = new Super()
let instance  = new Sub()
instance.age//1,2,3
instance.asyName("MIKI")//MIKI

4. 原型式继承

• 内部定义临时的构造函数，传入一个对象，将对象等于构造函数的原型，返回构造函数的实例
• 通俗讲，爹进去，儿出来

function inherit(Super){
	function F(){}
	F.prototype = Super
	return new F()
}

5. 寄生式继承
   原型式+增强

function createHigh(Super){
	var clone = new inherit(Super)
	clone.methods = function(){}
	return clone
}

6. 寄生组合式
   构造函数+原型链会两次调用超类的构造函数，生成两次同名属性

function Super(){
	this.age = [1,2,3]
}
Super.protoype.sayName(){
	return name
}
function Sub(name){
	this.name = name
	Super.call(this)//第二次
}
Sub.prototype = new Super()//第一次
let instance  = new Sub()
instance.age//1,2,3
instance.asyName("MIKI")//MIKI

• 寄生组合

function object(o){
	function F(){}
	F.prototype = o
	return new F()
}
function onheritPrototype(Sub,Super){
	var prototype = object(Super.prototype)
	prototype.constructor = Sub
	Sub.prototype = prototype
}

Js中通过new创建一个对象时发生了什么

1. 创建一个新的对象
2. 将构造函数的作用赋给创建的新对象（将this指向新对象）
3. 执行构造函数中的代码，为新创建的对象赋属性和方法
4. 返回创建的对象