Javascript 面向对象
ECMAScript有两种开发模式：1.函数式（过程化）2.面型对象（OOP）Object Oriented Programming面向对象的语言有一个标志，就是类的概念，而通过类我们可以任意创建多个相同属性和方法，在es6没有出来之前ECMAScript没有类的概念，因此它的对象也基于类的语言中的对象有所不同。在ECMAScript中把对象定义为：无序属性集合，其属性可以包含基本值、对象或者函数。严格来讲，这就相当于说对象十一组没有特定顺序的值，对象的每个属性或者方法都映射到一个值。
为什么要使用面向对象（优点）
面向对象解决了系统的可维护性、可重用性、可扩展性、更容易维护。
原型
每个对象都有proto除了null,但是只有函数对象具有prototype属性，prototype指向的是函数的型，在默认的情况下在创建函数的时候会自动获得一个constructor属性这个属性就是一个指针指向prototype属性所在的函数.
function person(){
}
console.log(person.prototype.constructor) //f person(){}
原型链
由于每个每个对象都有proto属性，而js里万物皆对象，所以会形成一条proto连起的链条，递归访问proto必须找到头，并且是null值，其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。如果我们将原型对象等于一个类型的实例，此时的原型对象都将包含一个指向另一个原型的指针，相应的另一个原型中也会包含一个指向另一个构造函数的指针。假如另一个原型是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念
原型链中的方法：
object.hasOwnProperty 表示某个对象的实例是否有指定的属性。
object.getPrototypeOf() 返回对象的原型
object.isPrototypeOf() 指定的对象是否在本对象的原型链返回boolean值
function foo (){}
var f = new foo()
console.log(f.toString()) // 原型链寻找的过程如下图
面向对象的特点
1.封装：找到变化并且把它封装起来，你就可以在不影响其他部分的情况下修改或扩展被封装的变化部分，这是所有涉及模式的基础，就是封装变化原因，因此封装的作用，就解决了程序的可扩展性
2.继承：子类继承父类，可以继承父类的方法及属性，实现了多态以及代码的重用，因此解决可系统的重用性和扩展性，但是继承破坏了封装，因为他是对子类开放的，修改父类会导致所有子类的改变，因此继承一定程度上破坏了系统的可扩展性，所以继承需要慎用，只有明确的IS-A关系才能使用，同时继承在程序开发过程中重构得到的，而不是程序设计之初就使用继承，很多方面向对象开发者来用继承，结果造成后期的代码解决不了需求的变化了。因此有限使用组合，而不是继承，是面向对象开发中一个重要的经验。
3.多态：多态字面意思多种状态，指得是不同的对象按照统一接口执行时，产生多种不同的结果即同一个接口，使用不同的实例而执行的不同的操作，这就实现了系统的可维护性和可扩展性。
对象创建的过程
new Class()
1.创建对象：
var obj = {}
2.将将构造函数的作用域赋给新建的对象因此this就指向了这个新对象。
3.执行构造函数中的代码（为这个新对象添加属性）
4.返回新对象
创建对象的三种模式
1.工厂模式i：简单的来说就是创建一个函数在里面创建一个Object把所有的属性和方法都定义在对象上最后return ,缺点：他没有解决对象的识别问题
function createPerson(){
var o = new Object()
o.name = '张乐'
o.age = '18',
o.sayNmae = function (){
console.log(this.name)
}
return o
}
2.构造函数模式：创建一个函数把所有的属性和方法挂在this上然后通过new操作符把函数创建为构造函数。解决了对象的识别问题它与工厂模式的区别：
1.没有显示的创建对象
2.直接将属性和方法赋值给了this
3.没有return语句
缺点：使用构造函数的主要问题是，就是每个方法都要在每个实例上重新创建一遍。
function Person(){
this.name = '张乐'
this.age = '19'
this.sayNmame = function (){
console.log(this.name)
}
}
var person1 = new Person()
3.原型模式：我们创建的每个函数都会有prototype属性把所有的属性和方法挂在prototype上它的好处是可以让所有对象实例共享它所包含的属性和方法。缺点：原型中的所有属性是被很多实例共享的，这种共享对象函数非常合适，基本类型也可以，但是对于包含引用类型值得来说会有为题。
function person(){}
person.prototype.name = '张乐'
person.prototype.age = '19'
person.prototype.sayName = function (){
console.log(this.name)
}
var person1 = new person()
4.组合使用构造函数模式和原型模式：构造函数模式用于定义实例属性，而原型模式定义方法和共享的属性。每个实例都会有自己的一份实例属性的副本但同时又共享着对方法的医用，最大限度的节省了内存。
function person(){
this.name = '张乐'
this.age = '19'
this.friend = ['1','2']
}
person.prototype = {
sayNmae: function (){
console.log(this.name)
}
}
var person1 = new person()
var person2 = new person()
person1.friend.push(3)
console.log(person1.friend) // 123
console.log(person2.friend) //12
console.log(person1.friend == person2.friend) //false
console.log(person2.sayName == person1.sayName) //true
5.寄生构造函数模式
function Person(){
var o = new Object()
o.name = '张乐'
o.age = '18',
o.sayNmae = function (){
console.log(this.name)
}
return o
}
var friend = new Person()
friend.sayName
继承的三种模式：
1.借用构造函数
缺点：方法都在构造函数中定义，因此函数的复用也无从谈起了
function supertype(){
this.colors = ['red','blue','yellow']
}
function subtype(){
//继承了supertype
supertype.call(this)
}
var instancel = new subtype()
instacnel.colors.push('white')
console.log(instancel.colors) //red blue yellow white
var instance1 = new subtype()
alert(instance1.colors) //red blue yellow
2.组合继承
function supertype(name){
this.name = name
this.color = ['red','yellow']
}
supertype.prototype.sayNmae = function (){
console.log(this.name)
}
function subtyoe(name,age){
supertype.call(this.name)
this.age =age
}
subtype.prototype = new supertype
subtype.prototype.age = function (){
console.log(this.age)
}
var instance = new subtype('张乐',29)
instance.colors.push('black')
console.log(instance.color) //red yellow black
instance.sayName() //张乐
instance.age() //29
var instance1 = new subtype('李三',20)
console.log(instance1.colors) //red yellow
instance1.sayName() //李三
instance1.age() //20
3.寄生继承
function object(o){
function f(){}
f.prototype = o
return new f()
}
var person = {
name:'张乐',
friends:['1','2','3']
}
function fn(original){
var clone = object(original)
clone.sayhi = function(){
console.log('hi')
}
return clone
}
var an = fn(person)
console.log(an.name)
Ees5函数的this和Es6中函数的this的区别
Es5:
1.在普通函数中的this总是代表他的直接调用者，默认情况下指向window
2.在严格模式下，没有直接调用者的函数中的this是undefined使用
3.call,apply,bind，this指的是绑定的对象
Es6:
1.箭头函数没有自己的this，他的this是继承而来，默认指向在定义它时所处的对象，
Es5中this的指向：
- 在全局的调用函数this指向window
function fn(){
console.log(this) //window
}
- 对象函数调用，哪个对象调用就指向哪个对象
var input = document.getElementsByTagName('input')[0]
input.onclick = function(){
console.log(this) //input对象
}
3.setInterval和setTimeout定时器中的this指向全局
var a =10;
var fn = setInterval(function (){
var a = 20
alert(this.a) //10
clearInterval(fn)
},100)
- addEventListener this的指向
addEventListener this指向事件前的dom对象在IE11下attachEvent this 指向window
<div id="btn">
点击我
</div>
<script>
btn.addEventListener('click',function(){
console.log(this) //<div>点击我</div>
})
IE下
IE11不兼容
btn.attachEvent('onclick',function(){
alert(this) //window
})
</script>
- 构造函数this的指向
构造函数中的this指向构造出的新对象
function fn(){
this.name = 'aaa',
this.age = '18',
this.sayName = function(){
alert(this.name)
}
}
var p1 = new fn()
p1.sayName() //aaa
- 箭头函数this的指向
在fun1中箭头函数默认指向为window而fun2是在data对象中创建的this指向data对象，所以fun2中的this指向对象
const fun1 = () => {
alert(this) //window
}
const data = {
name:校长',
fn: function (){
console.log(this)
const fun2 = () =>{
console.log(this.userName)
}
fun2()
}
}
data.fn()
class
1.Es6class类和模块内部默认为严格模式必须使用new操作符来调用，否则回报错。
2.constructor是类的默认方法，如果没写他会默认添加一个constructor方法返回默认值是实例对象，也就是this类也可以自执行
3.class类不存在变量提升
