2.1創(chuàng)建類和對(duì)象的步驟

①創(chuàng)建一個(gè)類(構(gòu)造函數(shù))：類名必須使用大駝峰法則，即每個(gè)單詞的首字母必須大寫。

function 類名(屬性1){
  this.屬性1 = 屬性1;
  this.方法 = function(){
   //方法中要調(diào)用自身屬性，必須要使用this.屬性
  }
}

②通過類，實(shí)例化(new)出一個(gè)對(duì)象。

var obj = new 類名(屬性1的具體值);

obj.屬性; 調(diào)用屬性

obj.方法(); 調(diào)用方法

③注意事項(xiàng)

>>>通過類名，new出一個(gè)對(duì)象的過程，叫做“類的實(shí)例化”

>>>類中的this，會(huì)在實(shí)例化的時(shí)候，指向新new出的對(duì)象。所以，this.屬性 this.方法，實(shí)際上是將屬性和方法綁定在即將new出的對(duì)象上面。

>>>在類中，要調(diào)用自身屬性，必須使用this.屬性名、如果直接使用變量名，則無法訪問對(duì)應(yīng)的屬性。

>>>類名必須使用大駝峰法則，注意與普通函數(shù)的區(qū)別。

2.2兩個(gè)重要屬性constructor和instanceof

①constructor：返回當(dāng)前對(duì)象的構(gòu)造函數(shù)

>>>zhangsan.constructor = Person; √

②instanceof：檢測(cè)一個(gè)對(duì)象，是不是一個(gè)類的實(shí)例；

>>>lisi instanceof Person √ lisi是通過Person類new出的

>>>lisi instanceof Object √ 所有對(duì)象都是Object的實(shí)例

>>>Person instanceof Object √ 函數(shù)本身也是對(duì)象

3、 JavaScript中的this指向問題

在上一部分中，我們創(chuàng)建了一個(gè)類，并通過這個(gè)類new出了一個(gè)對(duì)象。 但是，這里面出現(xiàn)了大量的this。 很多同學(xué)就要懵逼了，this不是“這個(gè)”的意思嗎？為什么我在函數(shù)里面寫的this定義的屬性，最后到了函數(shù)new出的對(duì)象呢？？

3.1誰最終調(diào)用函數(shù)，this就指向誰！

① this指向誰，不應(yīng)該考慮函數(shù)在哪聲明，而應(yīng)該考慮函數(shù)在哪調(diào)用?。?/p>

② this指向的，永遠(yuǎn)只可能是對(duì)象，不可能是函數(shù)??！

③ this指向的對(duì)象，叫做函數(shù)的上下文context，也叫函數(shù)的調(diào)用者。

3.2this指向的規(guī)律(與函數(shù)的調(diào)用方式息息相關(guān)！)

① 通過函數(shù)名()調(diào)用的，this永遠(yuǎn)指向window

func(); // this--->window
//【解釋】 我們直接用一個(gè)函數(shù)名()調(diào)用，函數(shù)里面的this，永遠(yuǎn)指向window。

② 通過對(duì)象.方法調(diào)用的，this指向這個(gè)對(duì)象

// 狹義對(duì)象
 var obj = {
  name:"obj",
  func1 :func
 };
 obj.func1(); // this--->obj
//【解釋】我們將func函數(shù)名，當(dāng)做了obj這個(gè)對(duì)象的一個(gè)方法，然后使用對(duì)象名.方法名， 這時(shí)候函數(shù)里面的this指向這個(gè)obj對(duì)象。

 // 廣義對(duì)象
 document.getElementById("div").onclick = function(){
  this.style.backgroundColor = "red";
}; // this--->div
//【解釋】對(duì)象打點(diǎn)調(diào)用還有一個(gè)情況，我們使用getElementById取到一個(gè)div控件，也是一種廣義的對(duì)象，用它打點(diǎn)調(diào)用函數(shù)，則函數(shù)中的this指向這個(gè)div對(duì)象。

③ 函數(shù)作為數(shù)組的一個(gè)元素，用數(shù)組下標(biāo)調(diào)用，this指向這個(gè)數(shù)組

var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解釋】這個(gè)，我們把函數(shù)名，當(dāng)做數(shù)組中的一個(gè)元素。使用數(shù)組下標(biāo)調(diào)用，則函數(shù)中的this將指向這個(gè)數(shù)組arr。

④ 函數(shù)作為window內(nèi)置函數(shù)的回調(diào)函數(shù)使用，this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解釋】使用setTimeout、setInterval等window內(nèi)置函數(shù)調(diào)用函數(shù)，則函數(shù)中的this指向window。

⑤ 函數(shù)作為構(gòu)造函數(shù)，使用new關(guān)鍵字調(diào)用，this指向新new出的對(duì)象

var obj = new func(); //this--->new出的新obj
//【解釋】這個(gè)就是第二部分我們使用構(gòu)造函數(shù)new對(duì)象的語句，將函數(shù)用new關(guān)鍵字調(diào)用，則函數(shù)中的this指向新new出的對(duì)象。

3.3關(guān)于this問題的面試題

var fullname = 'John Doe';
var obj = {
　　fullname: 'Colin Ihrig',
　　prop: {
　　　　fullname: 'Aurelio De Rosa',
　　　　getFullname: function() {
　　　　　　return this.fullname;
　　　　}
　　}
};
console.log(obj.prop.getFullname()); 
// 函數(shù)的最終調(diào)用者 obj.prop 
   
var test = obj.prop.getFullname;
console.log(test()); 
// 函數(shù)的最終調(diào)用者 test() this-> window
   
obj.func = obj.prop.getFullname;
console.log(obj.func()); 
// 函數(shù)最終調(diào)用者是obj
   
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());
// 函數(shù)最終調(diào)用者數(shù)組

好了，這篇博客，我們了解了什么是面向?qū)ο?、類和?duì)象的關(guān)系、JS中聲明類與對(duì)象的步驟，以及重點(diǎn)講解的this指向問題！ 希望能夠幫助大家真正的理解了this的認(rèn)知，下面我會(huì)繼續(xù)給大家分享關(guān)于面向?qū)ο蠓矫娴膯栴}。多謝大家的支持！??！

以上這篇老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。