JavaScript面向對象

Eirunye 發布于2019-08-26 12:08 / 3613人閱讀

摘要：構造函數的兩個特征函數內部使用了，指向所要生成的對象實例。將一個空對象的指向構造函數的屬性，這個對象就是要返回的實例對象。用面向對象開發時，把要生成的實例對象的特有屬性放到構造函數內，把共有的方法放到構造函數的里面。

JS中面向對象的概念

面向對象OOP是一種組織代碼結構、實現功能過程的思維方式。它將真實世界各種復雜的關系，抽象為一個個對象，然后由對象之間的分工與合作，完成對真實世界的模擬。每一個對象都是功能中心，具有明確分工，可以完成接受信息、處理數據、發出信息等任務。

舉例：

一本書、一輛汽車、一個人都可以是對象，一個數據庫、一張網頁、一個與遠程服務器的連接也可以是對象。當實物被抽象成對象，實物之間的關系就變成了對象之間的關系，從而就可以模擬現實情況，針對對象進行編程。對象是單個實物的抽象，對象還是一個容器，封裝了屬性（property）和方法（method）。屬性是對象的狀態，方法是對象的行為（完成某種任務）。比如，我們可以把動物抽象為animal對象，使用“屬性”記錄具體是那一種動物，使用“方法”表示動物的某種行為（奔跑、捕獵、休息等等）。

面向對象的實現思路：

把某個功能看成一個整體（對象），通過調用對象的某個方法來啟動功能。在用的時候不去考慮這個對象內部的實現細節，在去實現這個對象細節的時候不用管誰在調用。面向對象的方法在前端頁面中一般用來將重復的東西抽象化，便于復用和節省內存。

面向對象的三個要點

封裝：就是將類內部的機制隱藏起來，讓外界無法訪問，從而達到保護數據的目的。封閉一部分讓外界無法訪問，開放一部分，通過開放部分間接訪問私有部分。可以用閉包來實現JS面向對象之私有屬性封裝。
繼承：為了提高代碼的復用性，可以用繼承，將一個子類繼承一個父類，這樣子類就可以繼承父類的屬性和方法，而不需要重新寫一個類中的屬性和方法。JavaScript的繼承方式是通過原型鏈來完成的。
多態：多個子類中雖然都具有同一個方法，但是這些子類實例化的對象調用這些相同的方法后卻可以獲得不同的結果。

JS構造函數

用傳統的面向對象思維，構造實例的過程近似理解為：JS中object(對象)是某一個class(類)的實例，class可以理解成模具，object就是用模具制造出來的實物。
但JS中沒有類的概念，只有構造函數(函數)、屬性的概念。很多語言中是由類（class）構造出實例對象，但JS中的對象不基于類而構建，而是基于構造函數和原型鏈來構建的。比如：var ccc={name:"penny"}這種寫法是可行的，JS中本質上是通過new Object()這個構造函數來創建。對象是單個實物的抽象。通常需要一個模板，表示某一類實物的共同特征，然后對象根據這個模板生成。JavaScript 語言使用構造函數（constructor）作為對象的模板。所謂”構造函數”，就是專門用來生成對象的函數。它提供模板，描述對象的基本結構。一個構造函數，可以生成多個對象，這些對象都有相同的結構。
通過類構建好比是上帝造人類，先定義好人的各屬性當作模板，再創建人類
不依賴類構建(函數式編程)好比是人進化成人類，在進化過程中不斷給人添加各種屬性形成人類。

構造函數的兩個特征：
[1]函數內部使用了this，指向所要生成的對象實例。
[2]必須用new命令調用生成對象實例

構造函數new Function()

new運算符接受一個函數及其參數作為構造器，根據傳入參數來創建相同類型但值不同的實例對象。new命令的作用，就是執行構造函數，返回一個實例對象。
new Function()的三個步驟：
1.創建類的實例。將一個空對象的__proto__指向構造函數的prototype屬性，這個對象就是要返回的實例對象。
2.初始化實例。將參數傳入構造函數并執行構造函數，因為構造函數內部的this指向的是由構造函數生成的實例。針對this的操作都會發生在這個空對象上，所以通過this，實例可繼承構造函數的屬性和方法。
3.返回實例。
構造函數之所以叫“構造函數”，就是因為構造函數操作一個空對象（即this指向的實例對象），將其“構造”為需要的樣子。

普通函數用new調用時，因為普通函數內部沒有this，所以使用new命令執行后返回的是一個空對象。new運算符接受一個函數及其參數作為構造器，根據傳入參數來創建相同類型但值不同的實例對象。new命令的作用，就是執行構造函數，返回一個實例對象。
new Function()的三個步驟：
1.創建類的實例。將一個空對象的__proto__指向構造函數的prototype屬性，這個對象就是要返回的實例對象。
2.初始化實例。將參數傳入構造函數并執行構造函數，因為構造函數內部的this指向的是由構造函數生成的實例。針對this的操作都會發生在這個空對象上，所以通過this，實例可繼承構造函數的屬性和方法。
3.返回實例。
構造函數之所以叫“構造函數”，就是因為構造函數操作一個空對象（即this指向的實例對象），將其“構造”為需要的樣子。普通函數用new調用時，因為普通函數內部沒有this，所以使用new命令執行后返回的是一個空對象。

this

this總是返回一個對象，簡單說，就是返回屬性或方法“當前”所在的對象。隨著函數使用場景的不同，this的值會發生變化可近似理解成this指向的是函數當前的運行環境。但是有一個總的原則，this指向的是，調用函數的那個對象。

函數調用時的this
函數直接調用時是在全局作用域下調用的，瀏覽器中的全局作用域是window，this指向window

function fn1(){
    console.log(this); //指向window
}
fn1();

嵌套函數調用時的this
函數嵌套產生的內部函數的this不指向其父函數，仍然是指向全局變量。

function fn0(){
    function fn(){
        console.log(this); //這里的this在調用fn0時依然指向全局window
    }
    fn();
}
fn0();

setTimeout、setInterval中的this
延時函數執行時是在全局作用域下執行，所以this依然指向window

構造函數調用時內部的this
調用構造函數時，構造函數內的this指向的是構造函數創建的實例對象。

對象的方法中的this
函數可以作為一個對象的屬性，此時該函數被稱為該對象的方法。當函數作為一個對象的方法調用時，這個函數內部的this指向調用該函數的對象。

var obj1 = {
    name: "Byron",
    fn : function(){
        console.log(this);
    }
};
obj1.fn(); //調用后this指向obj1

嵌套對象調用時this指向最近那一層的對象，嵌套函數調用時this指向window而不指向最近那層函數

var a = {
  p: "Hello",
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};
a.b.m() // undefined

DOM對象事件綁定，事件處理函數的this
在事件處理程序中this代表事件源DOM對象。低版本IE的bug會指向window

document.addEventListener("click", function(e){
    console.log(this); //指向DOM對象
    var _document = this;
    setTimeout(function(){
        console.log(this); //指向window
        console.log(_document);
    }, 200);
}, false);

原型鏈

“原型鏈”的作用是，讀取對象的某個屬性時，JavaScript 引擎先尋找對象本身的屬性（同名屬性會優先讀取自身屬性），如果找不到，就通過__proto__到它的原型去找，如果還是找不到，就通過原型的__proto__到原型的原型去找。如果直到最頂層的Object.prototype還是找不到，則返回null。
__proto__屬性是瀏覽器的內部屬性，應盡量避免使用，建議使用
Object.getPrototype(obj)來獲取對象的原型對象
Object.setPrototypeOf(obj1,obj2)修改對象的原型對象。
獲取一個對象的原型對象有三種方法：
obj.__proto__ 不靠普，ES6規范僅瀏覽器部署，其他環境沒有部署
obj.constructor.prototype 不靠普，obj.constructor.prototype手動改變后如果不修正constructor會導致obj.constructor.prototype指向不準確
Object.getPrototypeOf(obj) 推薦使用

原型鏈的特性
【1】任何對象上都有__proto__這個屬性，指向創建該對象的構造函數的prototype屬性（原型對象）。
【2】用面向對象開發時，把要生成的實例對象的特有屬性放到構造函數內，把共有的方法放到構造函數的prototype里面。只要修改構造函數的原型對象prototype，所有構造函數生成的實例對象上繼承來自原型對象prototype的方法或者屬性都會改變。
【3】原型鏈：任何對象都是由一個更高級的構造函數創建來的。比如對象是由object函數創建來。prototype是函數的屬性，__proto__隱式原型是對象（object）的屬性。由于JS中函數也是對象，所以函數上也有__proto__屬性。對象的__proto__指向這個對象的構造函數的prototype
【4】任何函數都有prototype屬性即原型對象，原型對象默認有constructor屬性，指向原型對象prototype所在的構造函數，即表示這個原型對象屬于哪個構造函數(類型,js無類型的概念）。constructor屬性定義在prototype對象上面，可以被所有實例對象繼承。修改原型對象時，一般要同時校正constructor屬性的指向,建議用給原型對象添加方法的形式修改原型對象，而不是完全覆蓋原型對象。

C.prototype.method1 = function (...) {
     ...
 };

instanceof
instanceof 判斷一個對象(不能判斷原始類型值)是不是某個構造函數(類)的實例，返回布爾值，通過檢查原型鏈來實現判斷。instanceof對整個原型鏈上的對象都有效，因此同一個實例對象，可能會對多個構造函數都返回true。

var d = new Date();
d instanceof Date // true
d instanceof Object // true
//instanceof可以用來判斷值的類型
var x = [1, 2, 3];
var y = {};
x instanceof Array // true
y instanceof Object // true

原型圖示例

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log("my name is:" + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + " is walking");  
}

var p1 = new People("饑人谷");
var p2 = new People("前端");

圖片轉載自知乎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108098.html

SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
javascript 面向對象版塊之理解對象

摘要：用代碼可以這樣描述安全到達國外面向過程既然說了面向對象，那么與之對應的就是面向過程。小結在這篇文章中，介紹了什么是面向對象和面向過程，以及中對象的含義。這是 javascript 面向對象版塊的第一篇文章，主要講解對面向對象思想的一個理解。先說說什么是對象，其實這個還真的不好說。我們可以把自己當成一個對象，或者過年的時候相親，找對象，那么你未來的老婆也是一個對象。我們就要一些屬性，比...

lovXin 2019-08-22 15:04 評論0 收藏0
javascript面向對象之“多態”

摘要：之前，本質上不能算是一門面向對象的編程語言，因為它對于封裝繼承多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。所以在中出現了等關鍵字，解決了面向對象中出現了問題。 ES6之前，javascript本質上不能算是一門面向對象的編程語言，因為它對于封裝、繼承、多態這些面向對象語言的特點并沒有在語言層面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以讓我們以...

JerryWangSAP 2019-08-23 14:11 評論0 收藏0