深入學習js的面向對象

loostudy 發布于2019-08-22 18:18 / 1360人閱讀

摘要：字符串也可以是一個對象日期是一個對象數學和正則表達式也是對象數組是一個對象甚至函數也可以是對象一般的語言，都是利用類來創建對象，完成面向對象的過程。

在之前的一篇文章的末尾我提到了JavaScript的對象創建方法，可以利用函數，內置對象和this等關鍵詞實現對象的創建。但是很遺憾，我最先接觸的面向對象的編程語言是java，因而對于這些實現面向對象的方法并非自己的首選。下面是那篇文章：
記一次兩小時的js編程學習

我們必須明白面向對象的具體含義，尤其對于JavaScript中來說，因為很明顯它與其他語言中存在著較大的差別。JavaScript 提供多個內建對象，比如 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。JavaScript中對象被當做了特殊數據結構struct，而一般的語言被當做類的實例化。

布爾型可以是一個對象。

數字型可以是一個對象。

字符串也可以是一個對象

日期是一個對象

數學和正則表達式也是對象

數組是一個對象

甚至函數也可以是對象

一般的語言，都是利用類來創建對象，完成面向對象的過程。舉個最熟悉的java語言的例子：

Scanner input=new Scanner(System.in);
int num=input.function();
String num=input.var;

而JavaScript卻不同，這是由于JavaScript的設計本質上是一種面向過程的語言。雖然JavaScript如今早已演變成一種面向對象的語言，卻也不使用類來創建對象。

直到2015年6月的ES6，OOP被標準化。舉個例子：

function Car(Color,Year,Make,Miles){
  this.color=Color;
  this.year=Year;
  this.make=Make;
  this.odometerReading=Miles;
  this.setOdometer=function(newMiles){
    this.odometerReading=newMiles;  
  }
}

這里有一個很嚴肅的問題，即類的擴展，在js中來說就是對象屬性和方法的擴展。java中有繼承extends來實現對父類的繼承。但JavaScript中卻根本沒有類的概念，就只能另尋它法完成擴展和繼承。

在JavaScript中，當一個對象已經被實例化，如果我想想讓它擁有新的方法和屬性就需要借用關鍵字prototype。舉個例子：

function Car(color){
    this.color=color
}
var car=new Car("red")
console.log(car.color)
// car.length=5
// car.setColor("green")
Car.prototype.length=5
Car.prototype.setColor=function(newColor){
    this.color=newColor
}
console.log(car.length)
car.setColor("green")
console.log(car.color)
-----------------------------------------------------
red
5
green
[Done] exited with code=0 in 0.206 seconds

我們需要給car加上長度和設置新的顏色，需要利用沒有實例化之前的Car，再借用關鍵詞prototype才可以完成添加屬性和新方法的操作。

除了擴展，我們還需要繼承，JavaScript依舊使用prototype關鍵詞完成繼承的操作。

function Pet(){
  this.animal="pet"
  this.name="ahhh"
}
function Cat(){
  this.age=2
}
//接下來就是讓Cat這個類擁有Pet類的屬性和方法的操作
Cat.prototype=new Pet()  //給Cat類加上Pet類的全部屬性和方法

為什么說上面的Cat和Pet是類，如同java，我們默認類的首字母大寫。JavaScript使用函數面向對象的好處在于可以在函數中添加眾多的變量和函數。內置的Object()過于簡單。

推薦閱讀：
記一次兩小時的js編程學習

個人博客十八
歡迎大家交流博客，我擅長串改大佬們寫的源碼喲！

GPU云服務器云服務器深入java面向對象 js 面向對象視頻 oop面向對象 js js面向對象開發表格

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

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

JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
PHP學習路線圖

摘要：學習路線圖建議最后買一個域名和阿里云服務器，真正的將代碼部署到云服務器上去，走一次上線流程，用一下管理一下代碼會更棒。建議學習路線圖這個時候使用寫一個大并發的多服務器的秒殺出來。 PHP學習路線圖在網上很多人公布了太多的PHP學習路線圖，本人在互聯網公司工作十余年，也帶了很多PHP入門的新手，將他們的一些問題和學習路線圖為大家整理出來，希望很多小白少走彎路。一、網上某些錯誤的學習...

wapeyang 2019-06-27 16:33 評論0 收藏0
面向對象的 JavaScript

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

novo 2019-08-21 10:49 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

FingerLiu 2019-08-23 15:25 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

xialong 2019-08-23 15:04 評論0 收藏0