javascript面向對象之對象的深入理解
更新時間：2023年05月01日 20:42:17 投稿：shichen2014
這篇文章主要介紹了javascript面向對象之對象的深入理解,將javascript面向對象程序設計中一切都視為對象,并以實例形式進一步分析了面向對象的特性,需要的朋友可以參考下
本文進一步分析講述了javascript面向對象之對象的深入理解。分享給大家供大家參考。
1.面向對象與面向編程的比較
1.1 面向對象（oop）
- 面向對象是把事物分解稱為一個個對象，然后由對象之間分工與合作，是以對象功能劃分問題，而不是步驟
- 特征： 封裝性、繼承性、多態(tài)性
- 優(yōu)點： 優(yōu)點：易維護、易復用、易擴展，由于面向對象有封裝、繼承、多態(tài)性的特性，可以設計出低耦合的系統(tǒng)，使系統(tǒng) 更加靈活、更加易于維護
- 缺點： 性能比面向過程低
面向對象的思維特點:
- 抽?。ǔ橄螅ο蠊灿玫膶傩院托袨榻M織(封裝)成一個類(模板)
- 對類進行實例化, 獲取類的對象
1.2 面向過程（pop）
- 面向過程就是分析出解決問題所需要的步驟，然后用函數把這些步驟一步一步實現，使用的時候再一個一個的依次調用就可以了,面向過程就是分析出解決問題所需要的步驟，然后用函數把這些步驟一步一步實現，使用的時候再一個一個的依次調用就可以了
- 優(yōu)點：性能比面向對象高，適合跟硬件聯系很緊密的東西，例如單片機就采用的面向過程編程。
- 缺點：沒有面向對象易維護、易復用、易擴展
2. ES6中的類和對象
在js中，對象是一組無序的相關屬性和方法的集合，萬物皆對象
對象是由屬性和方法組成的：
- 屬性： 事物的特征，在對象中用屬性來表示
- 方法： 事物的行為，在對象中用方法來表示
在 ES6 中新增加了類的概念，可以使用 class 關鍵字聲明一個類，之后以這個類來實例化對象
類與對象的區(qū)別：
- 類抽象了對象的公共部分，它泛指某一大類（class）
- 對象特指某一個，通過類實例化一個具體的對象
2.1 類的創(chuàng)建
語法：
class name {
// 添加屬性和方法，也可以再嵌入一個類
class age {},
}創(chuàng)建實例
let a = new name(); // 類必須使用new實例化對象
2.2 類 constructor 構造函數
constructor() 方法是類的構造函數(默認方法)，用于傳遞參數,返回實例對象，通過 new 命令生成對象實例時，自動調用該方法。如果沒有顯示定義, 類內部會自動給我們創(chuàng)建一個constructor()
語法：
class Person {
constructor(name,age) { // constructor 構造方法或者構造函數
this.name = name;
this.age = age;
}
sayHi() {
console.log('我會唱歌');
}
// 注意，方法之間不需要加逗號。同時函數不需要加function關鍵字
} 創(chuàng)建實例：
var ldh = new Person('劉德華', 18);
console.log(ldh.name);
ldh.sayHi();2.3 類的繼承
實例：
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{ // 這樣子類就繼承了父類的屬性和方法
}
var damao= new Son('劉');
damao.say(); super關鍵字用于訪問和調用對象父類上的函數，可以調用父類的構造函數，也可以調用父類的普通函數
語法：
class Father {
constructor(x,y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
say() {
return '我是爸爸';
}
}
class Son extends Father{
constructor(x,y) {
// this.x = x;
// this.y = y;
super(x,y); // 調用了父類中的構造函數 ,super必須寫在子類this之前調用
// 子類在構造函數中使用super, 必須放到 this 前面 (必須先調用父類的構造方法,在使用子類構造方法)
this.x = x;
this.y = y;
}
say() {
console.log(super.say() + '的兒子'); // 利用super調用父類的函數
}
substract() {
console.log(this.x - this.y);
}
}
var son = new Son(11,2);
console.log(son);
son.say();
son.substract();
son.sum(); 2.4 注意點
- 在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實例化對象.
- 類里面的共有屬性和方法一定要加this使用.
- 類里面的this指向問題.
- constructor 里面的this指向實例對象, 方法里面的this 指向這個方法的調用者
補充
具體分析如下：
javacript面向對象程序設計中，可以理解為一切都是對象。
實例代碼如下：
<script language="javascript" type="text/javascript">
function Cat(){
}
var cat1 = new Cat();//創(chuàng)建類實例
cat1.name = "小狗";
cat1.age = 4;
cat1.color="白色";
document.write(cat1.name);
document.writeln(cat1.constructor);//實例化后對象，是對象
document.writeln(typeof(cat1)+"<hr />");
document.writeln(Cat.constructor);//原型對象本身也是對象
document.writeln(typeof Cat+"<hr />");
var b="hello";//字符串也是對象
document.writeln(b.constructor);//輸出它的構造函數
document.writeln(typeof b+"<hr />");
var c=123;//數值也是對象
document.writeln(c.constructor);
document.writeln(typeof c+"<hr />");
</script>判斷一個實例化對象是不是某個原型對象類型
if(cat1 instanceof Cat){//與php的判斷方法相同
?window.alert("ok");
}希望本文所述對大家的javascript程序設計有所幫助。
相關文章
身份證號碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載
身份證號碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載...2007-04-04
這篇文章主要給大家介紹了如何通過一行JavaScript代碼實現瀑布流布局的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
js去除重復并統(tǒng)計數量方法，首先點擊按鈕觸發(fā)事件，然后用class選擇器，迭代要獲取的文本（這里最好用text()方法）加入到Array()集合里。具體操作方法，大家通過本文學習下吧2016-12-12
本文以Bootstrap標簽頁組件為例，介紹如何編寫或者封裝一個前端組件，具體示例代碼大家參考下本文2017-07-07
本文主要對html5 canvas的使用進行了詳細的介紹。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了XMLHttpRequest 同步請求和異步請求,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了微信小程序canvas繪制文字實現自動換行，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
處理重復請求的文章想必大家也看過了很多，大多數都是分為在response返回之前發(fā)現重復請求就return掉的和使用節(jié)流/防抖來間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復請求，感興趣的可以了解一下2021-05-05
JavaScript輕松創(chuàng)建級聯函數的方法示例
級聯函數也叫鏈式函數，方法鏈一般適合對一個對象進行連續(xù)操作 (集中在一句代碼)。一定程度上可以減少代碼量，缺點是它占用了 函數的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級聯函數的方法示例,需要的朋友可以參考借鑒。2017-02-02
這篇文章主要介紹了淺析Bootstrap驗證控件的使用 的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06