ECMAScript有兩種開發(fā)模式：1.函數(shù)式（過程化）2.面型對象（OOP）Object Oriented Programming面向?qū)ο蟮恼Z言有一個標志奏瞬，就是類的概念潘飘，而通過類我們可以任意創(chuàng)建多個相同屬性和方法酿秸，在es6沒有出來之前ECMAScript沒有類的概念喉祭，因此它的對象也基于類的語言中的對象有所不同搓扯。在ECMAScript中把對象定義為：無序?qū)傩约希鋵傩钥梢园局底亍ο蠡蛘吆瘮?shù)。嚴格來講仓洼，這就相當于說對象十一組沒有特定順序的值介陶，對象的每個屬性或者方法都映射到一個值。
為什么要使用面向?qū)ο螅▋?yōu)點）
面向?qū)ο蠼鉀Q了系統(tǒng)的可維護性色建、可重用性哺呜、可擴展性、更容易維護镀岛。
原型
每個對象都有proto除了null,但是只有函數(shù)對象具有prototype屬性弦牡，prototype指向的是函數(shù)的型，在默認的情況下在創(chuàng)建函數(shù)的時候會自動獲得一個constructor屬性這個屬性就是一個指針指向prototype屬性所在的函數(shù).
function person(){
}
console.log(person.prototype.constructor) //f person(){}
原型鏈
由于每個每個對象都有proto屬性漂羊，而js里萬物皆對象，所以會形成一條proto連起的鏈條卸留，遞歸訪問proto必須找到頭走越，并且是null值，其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法耻瑟。構(gòu)造函數(shù)旨指、原型和實例的關系：每個構(gòu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針喳整，而實例都包含一個指向原型對象的內(nèi)部指針谆构。如果我們將原型對象等于一個類型的實例，此時的原型對象都將包含一個指向另一個原型的指針框都，相應的另一個原型中也會包含一個指向另一個構(gòu)造函數(shù)的指針搬素。假如另一個原型是另一個類型的實例，那么上述關系依然成立魏保，如此層層遞進熬尺，就構(gòu)成了實例與原型的鏈條。這就是所謂的原型鏈的基本概念
原型鏈中的方法：
object.hasOwnProperty 表示某個對象的實例是否有指定的屬性谓罗。
object.getPrototypeOf() 返回對象的原型
object.isPrototypeOf() 指定的對象是否在本對象的原型鏈返回boolean值
function foo (){}
var f = new foo()
console.log(f.toString()) // 原型鏈尋找的過程如下圖
面向?qū)ο蟮奶攸c
1.封裝：找到變化并且把它封裝起來粱哼，你就可以在不影響其他部分的情況下修改或擴展被封裝的變化部分，這是所有涉及模式的基礎檩咱，就是封裝變化原因揭措，因此封裝的作用胯舷，就解決了程序的可擴展性
2.繼承：子類繼承父類，可以繼承父類的方法及屬性绊含，實現(xiàn)了多態(tài)以及代碼的重用桑嘶，因此解決可系統(tǒng)的重用性和擴展性，但是繼承破壞了封裝艺挪，因為他是對子類開放的不翩，修改父類會導致所有子類的改變，因此繼承一定程度上破壞了系統(tǒng)的可擴展性麻裳，所以繼承需要慎用口蝠，只有明確的IS-A關系才能使用，同時繼承在程序開發(fā)過程中重構(gòu)得到的津坑，而不是程序設計之初就使用繼承妙蔗，很多方面向?qū)ο箝_發(fā)者來用繼承，結(jié)果造成后期的代碼解決不了需求的變化了疆瑰。因此有限使用組合眉反，而不是繼承，是面向?qū)ο箝_發(fā)中一個重要的經(jīng)驗穆役。
3.多態(tài)：多態(tài)字面意思多種狀態(tài)寸五，指得是不同的對象按照統(tǒng)一接口執(zhí)行時，產(chǎn)生多種不同的結(jié)果即同一個接口耿币，使用不同的實例而執(zhí)行的不同的操作梳杏，這就實現(xiàn)了系統(tǒng)的可維護性和可擴展性。
對象創(chuàng)建的過程
new Class()
1.創(chuàng)建對象：
var obj = {}
2.將將構(gòu)造函數(shù)的作用域賦給新建的對象因此this就指向了這個新對象淹接。
3.執(zhí)行構(gòu)造函數(shù)中的代碼（為這個新對象添加屬性）
4.返回新對象
創(chuàng)建對象的三種模式
1.工廠模式i：簡單的來說就是創(chuàng)建一個函數(shù)在里面創(chuàng)建一個Object把所有的屬性和方法都定義在對象上最后return ,缺點：他沒有解決對象的識別問題
function createPerson(){
var o = new Object()
o.name = '張樂'
o.age = '18',
o.sayNmae = function (){
console.log(this.name)
}
return o
}
2.構(gòu)造函數(shù)模式：創(chuàng)建一個函數(shù)把所有的屬性和方法掛在this上然后通過new操作符把函數(shù)創(chuàng)建為構(gòu)造函數(shù)十性。解決了對象的識別問題它與工廠模式的區(qū)別：
1.沒有顯示的創(chuàng)建對象
2.直接將屬性和方法賦值給了this
3.沒有return語句
缺點：使用構(gòu)造函數(shù)的主要問題是，就是每個方法都要在每個實例上重新創(chuàng)建一遍塑悼。
function Person(){
this.name = '張樂'
this.age = '19'
this.sayNmame = function (){
console.log(this.name)
}
}
var person1 = new Person()
3.原型模式：我們創(chuàng)建的每個函數(shù)都會有prototype屬性把所有的屬性和方法掛在prototype上它的好處是可以讓所有對象實例共享它所包含的屬性和方法劲适。缺點：原型中的所有屬性是被很多實例共享的，這種共享對象函數(shù)非常合適厢蒜，基本類型也可以霞势，但是對于包含引用類型值得來說會有為題。
function person(){}
person.prototype.name = '張樂'
person.prototype.age = '19'
person.prototype.sayName = function (){
console.log(this.name)
}
var person1 = new person()
4.組合使用構(gòu)造函數(shù)模式和原型模式：構(gòu)造函數(shù)模式用于定義實例屬性郭怪，而原型模式定義方法和共享的屬性支示。每個實例都會有自己的一份實例屬性的副本但同時又共享著對方法的醫(yī)用，最大限度的節(jié)省了內(nèi)存鄙才。
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.寄生構(gòu)造函數(shù)模式
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.借用構(gòu)造函數(shù)
缺點：方法都在構(gòu)造函數(shù)中定義颂鸿，因此函數(shù)的復用也無從談起了
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函數(shù)的this和Es6中函數(shù)的this的區(qū)別
Es5:
1.在普通函數(shù)中的this總是代表他的直接調(diào)用者，默認情況下指向window
2.在嚴格模式下攒庵，沒有直接調(diào)用者的函數(shù)中的this是undefined使用
3.call,apply,bind嘴纺，this指的是綁定的對象
Es6:
1.箭頭函數(shù)沒有自己的this败晴，他的this是繼承而來，默認指向在定義它時所處的對象栽渴，
Es5中this的指向：
- 在全局的調(diào)用函數(shù)this指向window
function fn(){
console.log(this) //window
}
- 對象函數(shù)調(diào)用尖坤，哪個對象調(diào)用就指向哪個對象
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>
- 構(gòu)造函數(shù)this的指向
構(gòu)造函數(shù)中的this指向構(gòu)造出的新對象
function fn(){
this.name = 'aaa',
this.age = '18',
this.sayName = function(){
alert(this.name)
}
}
var p1 = new fn()
p1.sayName() //aaa
- 箭頭函數(shù)this的指向
在fun1中箭頭函數(shù)默認指向為window而fun2是在data對象中創(chuàng)建的this指向data對象，所以fun2中的this指向?qū)ο?/li>
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類和模塊內(nèi)部默認為嚴格模式必須使用new操作符來調(diào)用闲擦，否則回報錯慢味。
2.constructor是類的默認方法，如果沒寫他會默認添加一個constructor方法返回默認值是實例對象墅冷，也就是this類也可以自執(zhí)行
3.class類不存在變量提升
