javascript的面向對象編程一起來看看
年后來工作的我，be like：
而且刷微博刷著刷著也會遇到一群說出我心中所想的話：
嗚嗚嗚~~（我是分割線）~~
好啦，不管怎樣生活總還是要繼續(xù)的！
在年后的這些天里我一邊炫沙糖桔一邊也開始陸陸續(xù)續(xù)開始重新投入學習，主要學習的是面向編程對象。
同樣先放上一張學習框架圖：
函數的定義和使用
這一板塊的內容主要是對之前Jquery的復習，復習了：函數的定義方法、函數的調用方法。（在這我就不做過多的贅述）
this指向問題
這一模塊的內容主要是學習不同函數中this指向的對象是誰、改變函數內部this的指向方法：call、apply、bind。
改變函數內部this的指向方法：call、apply、bind。
這三個方法共同點：都能改變this的指向；
這三個方法不同點：
- call和apply會調用函數，并且改變函數內部this指向；
- call和apply傳遞的參數不一樣，call傳遞參數使用逗號隔開，apply使用數組傳遞；
- bind不會調用函數，可以改變函數內部this指向。
嚴格模式
這一模塊的內容主要是學習了解什么是嚴格模式。
嚴格模式定義：ES5 的嚴格模式是采用具有限制性 JavaScript變體的一種方式，即在嚴格的條件下運行 JS 代碼。（嚴格模式在 IE10 以上版本的瀏覽器中才會被支持，舊版本瀏覽器中會被忽略。）
開啟嚴格模式：
- 為腳本開啟嚴格模式；
- 為函數開啟嚴格模式。
高階函數
這一模塊的內容主要是學習高階函數的定義與相關應用。
高階函數定義：高階函數是對其他函數進行操作的函數，它接收函數作為參數或將函數作為返回值輸出。
最好理解的就是回調函數，它就是高階函數。
閉包
這一模塊的內容主要是學習閉包的定義、閉包的作用、閉包的運用。
閉包定義：閉包（closure）指有權訪問另一個函數作用域中變量的函數。簡單理解就是 ，一個作用域可以訪問另外一個函數內部的局部變量。
閉包作用：延申了變量的作用范圍。
閉包的運用：
點擊li打印當前索引號
<body>
<ul class='nav'>
<li>榴蓮</li>
<li>臭豆腐</li>
<li>鯡魚罐頭</li>
<li>大豬蹄子</li>
</ul>
</body>
<script>
// 原始獲得索引號的方法
var lis = document.querySelector(".nav").querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
console.log(this.index);
}
}
// 閉包的定義：指有權訪問另一個函數作用域中變量的函數。簡單理解就是 ，一個作用域可以訪問另外一個函數內部的局部變量。
// 需求：利用閉包來得到li的索引號
var lis = document.querySelector(".nav").querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
(function(i) {
// console.log(i);
lis[i].onclick = function() {
console.log(i); //我們?yōu)榱它c擊時才會出現i
}
})(i);
}
</script>3s后打印li里面的內容
<body>
<ul class='nav'>
<li>榴蓮</li>
<li>臭豆腐</li>
<li>鯡魚罐頭</li>
<li>大豬蹄子</li>
</ul>
</body>
<script>
// 利用閉包來得到li的索引號
var lis = document.querySelector(".nav").querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
(function(i) { //這是立即執(zhí)行函數
// 簡單來說就是把定時器放在立即執(zhí)行函數里面
setTimeout(function() { //在立即執(zhí)行函數里的任何一個函數都可以調用立即執(zhí)行函數里的變量
console.log(lis[i].innerHTML);
}, 2000)
})(i);
}
</script>打車價格的計算應用
<!-- 需求：打車起步價13(3公里內), 之后每多一公里增加 5塊錢. 用戶輸入公里數就可以計算打車價格
如果有擁堵情況,總價格多收取10塊錢擁堵費 -->
<script>
var car = (function() { //立即執(zhí)行函數
var start = 13; //起步價
var total = 0; //總價
return {
price: function(n) {
if (n <= 3) {
total = start;
} else {
total = start + (n - 3) * 5;
}
return total;
},
yd: function(flag) {
return flag ? total + 10 : total;
} //擁堵的費用
}
})();
car.price();
console.log(car.price(5));
console.log(car.yd(true));
</script>遞歸
這一模塊的內容主要是學習遞歸的定義、遞歸的運用。
遞歸的定義：如果一個函數在內部可以調用其本身，那么這個函數就是遞歸函數。簡單理解:函數內部自己調用自己, 這個函數就是遞歸函數。
注意：遞歸函數的作用和循環(huán)效果一樣，由于遞歸很容易發(fā)生“棧溢出”錯誤（stack overflow），所以必須要加退出條件return。
遞歸的運用：
求1~n的階乘
<script>
function fn(n) {
if (n == 1) {
return 1; //判斷條件來退出
}
return n * fn(n - 1); //思路：前一項*后一項
// 利用return來調用函數本身
};
// fn(); //遞歸類似于循環(huán);自己調用自己
console.log(fn(4));
</script>求斐波那契數列
<script>
// 1、1、2、3、5、8、13、21...當用戶輸入n的值來得到在斐波那契數列中的值
function fb(n) {
if (n === 0 || n === 1 || n === 2) {
return 1;
} else {
return fb(n - 1) + fb(n - 2); //規(guī)律：當用戶輸入n我們得到(n-1)和(n-2)這兩項就能計算出n、對應的序列值
}
}
console.log(fb(0));
console.log(fb(4));
</script>遞歸遍歷數據
<script> var data = [{ id: 1, name: '家電', goods: [{ id: 11, gname: '冰箱' }, { id: 12, gname: '洗衣機' }] }, { id: 2, name: '服飾' }]; // 效果：我們想要輸入id號就可以返回的數據對象(利用遞歸來遍歷) // 1.利用forEach 去遍歷里面的每一個對象 function getID(json, id) { //json就是一整個大的數組 json.forEach(function(item) { //item就是data里面的id if (item.id == id) { console.log(item); // } else if (item.goods && item.goods.length > 0) { // 2.遍歷對象里面的對象11 12 可以利用遞歸函數(調用自己getID(對象里面的對象item.goods，id)) // 里面應該有goods這個數組并且數組的長度不為0 getID(item.goods, id); } }); } getID(data, 1); getID(data, 2); getID(data, 11);</script>正則表達式
這一模塊的內容主要是學習正則表達式定義、正則表達式在js中的使用。（該模塊需要查閱文本來使用）
學習框架如下：
ES6
這一模塊的內容主要是學習ES6新增語法、ES6內置對象拓展。
ES6新增語法框架：
ES6內置對象拓展框架：
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
首先，不得不說，我無法達到拋開類和對象的概念來看Javascript的境界，對于Javascript是否是面向對象的說法有很多，不過我最認同的還是Javascript是一種“基于prototype的面向對象語言”。2010-01-01
就像其他語言那樣,js中的字符串類型可以表示一串字符,由雙引號包住,這里簡單總結JavaScript中的String字符串類型的一些基礎知識2016-05-05
2008-01-01
JavaScript中require和import的區(qū)別詳解
本文詳細講解了JS中require和import的區(qū)別，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
MapReduce是一個編程模型，用于作業(yè)調度,也是一個處理和生成超大數據集的算法模型的相關實現,本文將詳細介紹JavaScript mapreduce工作原理，需要的朋友可以參考下2012-11-11
這篇文章主要介紹了JavaScript中的getDay()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
javascript類型系統(tǒng)——日期Date對象全面了解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)——日期Date對象全面了解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript strike方法入門實例（給字符串加上刪除線）
這篇文章主要介紹了JavaScript strike方法入門實例,strike方法用于給字符串加上刪除線,需要的朋友可以參考下2014-10-10
事件流指的是從頁面中接收事件的順序,而事件處理程序則是處理事件的響應,接下來我們就來詳解JavaScript中的事件流和事件處理程序.2016-05-05
JavaScript 判斷判斷某個對象是Object還是一個Array
在開發(fā)中，我們經常需要判斷某個對象是否為數組類型，在Js中檢測對象類型的常見方法都有哪些呢？2010-01-01