javascript面向?qū)ο笾畬?duì)象的深入理解
更新時(shí)間：2023年05月01日 20:42:17 投稿：shichen2014
這篇文章主要介紹了javascript面向?qū)ο笾畬?duì)象的深入理解,將javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中一切都視為對(duì)象,并以實(shí)例形式進(jìn)一步分析了面向?qū)ο蟮奶匦?需要的朋友可以參考下
本文進(jìn)一步分析講述了javascript面向?qū)ο笾畬?duì)象的深入理解。分享給大家供大家參考。
1.面向?qū)ο笈c面向編程的比較
1.1 面向?qū)ο螅╫op）
- 面向?qū)ο笫前咽挛锓纸夥Q為一個(gè)個(gè)對(duì)象，然后由對(duì)象之間分工與合作，是以對(duì)象功能劃分問題，而不是步驟
- 特征： 封裝性、繼承性、多態(tài)性
- 優(yōu)點(diǎn)： 優(yōu)點(diǎn)：易維護(hù)、易復(fù)用、易擴(kuò)展，由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性，可以設(shè)計(jì)出低耦合的系統(tǒng)，使系統(tǒng) 更加靈活、更加易于維護(hù)
- 缺點(diǎn)： 性能比面向過程低
面向?qū)ο蟮乃季S特點(diǎn):
- 抽取（抽象）對(duì)象共用的屬性和行為組織(封裝)成一個(gè)類(模板)
- 對(duì)類進(jìn)行實(shí)例化, 獲取類的對(duì)象
1.2 面向過程（pop）
- 面向過程就是分析出解決問題所需要的步驟，然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn)，使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了,面向過程就是分析出解決問題所需要的步驟，然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn)，使用的時(shí)候再一個(gè)一個(gè)的依次調(diào)用就可以了
- 優(yōu)點(diǎn)：性能比面向?qū)ο蟾撸m合跟硬件聯(lián)系很緊密的東西，例如單片機(jī)就采用的面向過程編程。
- 缺點(diǎn)：沒有面向?qū)ο笠拙S護(hù)、易復(fù)用、易擴(kuò)展
2. ES6中的類和對(duì)象
在js中，對(duì)象是一組無序的相關(guān)屬性和方法的集合，萬物皆對(duì)象
對(duì)象是由屬性和方法組成的：
- 屬性： 事物的特征，在對(duì)象中用屬性來表示
- 方法： 事物的行為，在對(duì)象中用方法來表示
在 ES6 中新增加了類的概念，可以使用 class 關(guān)鍵字聲明一個(gè)類，之后以這個(gè)類來實(shí)例化對(duì)象
類與對(duì)象的區(qū)別：
- 類抽象了對(duì)象的公共部分，它泛指某一大類（class）
- 對(duì)象特指某一個(gè)，通過類實(shí)例化一個(gè)具體的對(duì)象
2.1 類的創(chuàng)建
語法：
class name {
// 添加屬性和方法，也可以再嵌入一個(gè)類
class age {},
}創(chuàng)建實(shí)例
let a = new name(); // 類必須使用new實(shí)例化對(duì)象
2.2 類 constructor 構(gòu)造函數(shù)
constructor() 方法是類的構(gòu)造函數(shù)(默認(rèn)方法)，用于傳遞參數(shù),返回實(shí)例對(duì)象，通過 new 命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法。如果沒有顯示定義, 類內(nèi)部會(huì)自動(dòng)給我們創(chuàng)建一個(gè)constructor()
語法：
class Person {
constructor(name,age) { // constructor 構(gòu)造方法或者構(gòu)造函數(shù)
this.name = name;
this.age = age;
}
sayHi() {
console.log('我會(huì)唱歌');
}
// 注意，方法之間不需要加逗號(hào)。同時(shí)函數(shù)不需要加function關(guān)鍵字
} 創(chuàng)建實(shí)例：
var ldh = new Person('劉德華', 18);
console.log(ldh.name);
ldh.sayHi();2.3 類的繼承
實(shí)例：
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{ // 這樣子類就繼承了父類的屬性和方法
}
var damao= new Son('劉');
damao.say(); super關(guān)鍵字用于訪問和調(diào)用對(duì)象父類上的函數(shù)，可以調(diào)用父類的構(gòu)造函數(shù)，也可以調(diào)用父類的普通函數(shù)
語法：
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); // 調(diào)用了父類中的構(gòu)造函數(shù) ,super必須寫在子類this之前調(diào)用
// 子類在構(gòu)造函數(shù)中使用super, 必須放到 this 前面 (必須先調(diào)用父類的構(gòu)造方法,在使用子類構(gòu)造方法)
this.x = x;
this.y = y;
}
say() {
console.log(super.say() + '的兒子'); // 利用super調(diào)用父類的函數(shù)
}
substract() {
console.log(this.x - this.y);
}
}
var son = new Son(11,2);
console.log(son);
son.say();
son.substract();
son.sum(); 2.4 注意點(diǎn)
- 在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實(shí)例化對(duì)象.
- 類里面的共有屬性和方法一定要加this使用.
- 類里面的this指向問題.
- constructor 里面的this指向?qū)嵗龑?duì)象, 方法里面的this 指向這個(gè)方法的調(diào)用者
補(bǔ)充
具體分析如下：
javacript面向?qū)ο蟪绦蛟O(shè)計(jì)中，可以理解為一切都是對(duì)象。
實(shí)例代碼如下：
<script language="javascript" type="text/javascript">
function Cat(){
}
var cat1 = new Cat();//創(chuàng)建類實(shí)例
cat1.name = "小狗";
cat1.age = 4;
cat1.color="白色";
document.write(cat1.name);
document.writeln(cat1.constructor);//實(shí)例化后對(duì)象，是對(duì)象
document.writeln(typeof(cat1)+"<hr />");
document.writeln(Cat.constructor);//原型對(duì)象本身也是對(duì)象
document.writeln(typeof Cat+"<hr />");
var b="hello";//字符串也是對(duì)象
document.writeln(b.constructor);//輸出它的構(gòu)造函數(shù)
document.writeln(typeof b+"<hr />");
var c=123;//數(shù)值也是對(duì)象
document.writeln(c.constructor);
document.writeln(typeof c+"<hr />");
</script>判斷一個(gè)實(shí)例化對(duì)象是不是某個(gè)原型對(duì)象類型
if(cat1 instanceof Cat){//與php的判斷方法相同
?window.alert("ok");
}希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript操作select元素和option的實(shí)例代碼
這篇文章主要介紹了JavaScript操作select元素和option的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了js處理表格對(duì)table進(jìn)行修飾的一些小技巧,需要的朋友可以參考下2014-05-05![淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]](http://img.jbzj.com/images/xgimg/bcimg2.png)
淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]
javascript函數(shù)劫持，也就是老外提到的javascript hijacking技術(shù)。最早還是和劍心同學(xué)討論問題時(shí)偶然看到的一段代碼2008-02-02
下面通過兩個(gè)方面給大家介紹js代碼防止sql注入的方法，非常簡(jiǎn)單實(shí)用，感興趣的朋友參考下吧2016-04-04
js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
這篇文章主要介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下2015-12-12
uniapp實(shí)現(xiàn)地圖點(diǎn)聚合功能的詳細(xì)教程
最近公司項(xiàng)目需求需要對(duì)設(shè)備在地圖上面進(jìn)行監(jiān)控,并在當(dāng)設(shè)備一定距離時(shí)進(jìn)行聚合,這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)地圖點(diǎn)聚合功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
本文主要介紹了小程序?qū)崿F(xiàn)事件綁定的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了javascript DOM的詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
JS優(yōu)雅的使用function實(shí)現(xiàn)一個(gè)class
這篇文章主要為大家介紹了JS優(yōu)雅的使用function實(shí)現(xiàn)一個(gè)class示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了js繼承實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript繼承的實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12