十、函數(shù)補(bǔ)充以及初識(shí)對(duì)象
1.arguments
arguments對(duì)象里面保存這方法的所有參數(shù)。arguments對(duì)象里面有個(gè)一個(gè)callee方法，該方法指向當(dāng)前方法本身幌衣。
定義穩(wěn)定的遞歸函數(shù)：
function calc(num){
? ? if(num===1){
? ? ? ? return num
? ? }
? ? // 因?yàn)閍rguments.callee 就時(shí) 指向當(dāng)前方法本身。
? ? // 這樣的做的好處是壤玫，防止外部方法名修改后豁护，導(dǎo)致遞歸調(diào)用失效。
? ? let sum = num + arguments.callee(num-1)
? ? return sum
}
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>arguments</title>
</head>
<body>
? ? <script>
? ? ? ? function fn1(a,b,c){
? ? ? ? ? ? //方法在調(diào)用時(shí)欲间，如果沒(méi)有傳遞實(shí)參楚里，形參的值是undefined
? ? ? ? ? ? console.log(a,b,c);
? ? ? ? ? ? // arguments是函數(shù)內(nèi)部的一個(gè)內(nèi)置對(duì)象
? ? ? ? ? ? // arguments對(duì)象里面保存這方法的所有參數(shù)
? ? ? ? ? ? // arguments對(duì)象里面有個(gè)一個(gè)callee方法，該方法指向當(dāng)前方法本身
? ? ? ? ? ? console.log(arguments);
? ? ? ? ? ? let sum = 0
? ? ? ? ? ? for(let i=0;i<arguments.length;i++){
? ? ? ? ? ? ? ? sum += arguments[i]
? ? ? ? ? ? }
? ? ? ? ? ? return sum
? ? ? ? }
? ? ? ? let sum = fn1(100,200,300,400,500,600)
? ? ? ? console.log(sum);
? ? ? ? console.log('----------------------------');
? ? ? ? // 計(jì)算1-20之間所有數(shù)的求和
? ? ? ? function calc(num){
? ? ? ? ? ? if(num===1){
? ? ? ? ? ? ? ? return num
? ? ? ? ? ? }
? ? ? ? ? ? // arguments.callee指向當(dāng)前方法本身
? ? ? ? ? ? // 所以猎贴，在寫遞歸算法時(shí)會(huì)經(jīng)常使用班缎。
? ? ? ? ? ? return num + arguments.callee(num-1)
? ? ? ? }
? ? ? ? console.log(calc(20));
? ? </script>
</body>
</html>
2.分頁(yè)方法
//定義一個(gè)分頁(yè)方法，方法的三個(gè)參數(shù)分別是：原始數(shù)組她渴，頁(yè)碼达址，每頁(yè)數(shù)量
function pageData(arr,pageIndex,pageSize){
? ? //思路：就是對(duì)原始數(shù)組中的數(shù)據(jù)，做截取
? ? //定義截取數(shù)據(jù)的起始位置
? ? let start = (pageIndex-1)*pageSize
? ? //定義截取數(shù)據(jù)的結(jié)束位置
? ? let end = start+pageSize
? ? return arr.slice(start,end)
}
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>分頁(yè)方法</title>
</head>
<body>
? ? <script>
? ? ? ? // 定義一個(gè)數(shù)組
? ? ? ? let arr = [11,22,33,44,55,66,77,88,99,111,222,333,444,555,666,777,888,999]
? ? ? ? // 每頁(yè)3條數(shù)據(jù)趁耗，返回第3頁(yè)數(shù)據(jù)
? ? ? ? let r1 = arr.slice(6,9)
? ? ? ? console.log(r1);
? ? ? ? // 每頁(yè)4條數(shù)據(jù)沉唠，返回第4頁(yè)數(shù)據(jù)
? ? ? ? let r2 = arr.slice(12,16)
? ? ? ? console.log(r2);
? ? ? ? // 沒(méi)有5條數(shù)據(jù)，返回第3頁(yè)數(shù)據(jù)
? ? ? ? let r3 = arr.slice(10,15)
? ? ? ? console.log(r3);
? ? ? ? console.log('------------------------');
? ? ? ? // 定義一個(gè)分頁(yè)方法苛败，參數(shù)是：數(shù)組满葛，頁(yè)碼，每頁(yè)數(shù)量
? ? ? ? function pageData(arr,pageIndex,pageSize){
? ? ? ? ? ? let start = (pageIndex-1)*pageSize? //算出起始下標(biāo)
? ? ? ? ? ? let end = start+pageSize? //算出結(jié)束下標(biāo)
? ? ? ? ? ? //根據(jù)起始下標(biāo)和結(jié)束下標(biāo)罢屈，從原始數(shù)組中截取對(duì)應(yīng)的數(shù)據(jù)并返回
? ? ? ? ? ? return arr.slice(start,end)
? ? ? ? }
? ? ? ? console.log(pageData(arr,3,3));
? ? ? ? console.log(pageData(arr,4,4));
? ? ? ? console.log(pageData(arr,3,5));
? ? </script>
</body>
</html>
3.初識(shí)對(duì)象
如果 a.b 嘀韧，那么a就是對(duì)象，b是a的屬性缠捌。如果 a.c()锄贷，那么a就是對(duì)象，c是a的方法曼月。對(duì)象就是擁有一組屬性和方法的集合肃叶。
定義對(duì)象有兩種方式：1.采用字面量賦值方式直接定義。2.采用構(gòu)造函數(shù)的方式new一個(gè)對(duì)象
1.采用字面量賦值方式定義對(duì)象
let obj = {
? ? //定義屬性
? ? //定義方法
}
通過(guò)對(duì)象名.屬性十嘿，調(diào)用對(duì)象的屬性，可以獲取屬性的值岳锁，也可以修改屬性的值绩衷，也可以添加新的屬性。通過(guò)對(duì)象名.方法()，調(diào)用對(duì)象的方法咳燕，執(zhí)行方法里面的代碼
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>對(duì)象</title>
</head>
<body>
? ? <script>
? ? ? ? // 對(duì)象就是擁有一組屬性和方法的集合
? ? ? ? // 如果 a.b 勿决，那么a就是對(duì)象，b是a的屬性
? ? ? ? // 如果 a.c()招盲，那么a就是對(duì)象低缩，c是a的方法
? ? ? ? // 定義對(duì)象的第一種方式：采用字面量賦值方式直接定義
? ? ? ? let stu1 = {
? ? ? ? ? ? //屬性名:屬性值的方式，定義屬性
? ? ? ? ? ? no:1001,
? ? ? ? ? ? name:'張三',
? ? ? ? ? ? age:20,
? ? ? ? ? ? sex:'男',
? ? ? ? ? ? //定義學(xué)生的方法
? ? ? ? ? ? study:function(){
? ? ? ? ? ? ? ? console.log('每天學(xué)習(xí)8小時(shí)');
? ? ? ? ? ? },
? ? ? ? ? ? play:function(){
? ? ? ? ? ? ? ? console.log('每天玩8小時(shí)');
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log(stu1);
? ? ? ? //調(diào)用對(duì)象身上的屬性
? ? ? ? console.log(stu1.name);
? ? ? ? console.log(stu1.age);
? ? ? ? //調(diào)用對(duì)象身上的方法
? ? ? ? stu1.study()
? ? ? ? stu1.play()
? ? </script>
</body>
</html>
案例：定義計(jì)算器對(duì)象曹货，實(shí)現(xiàn)加減乘除咆繁。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>使用對(duì)象制作計(jì)算器</title>
</head>
<body>
? ? <script>
? ? ? ? //定義一個(gè)計(jì)算器對(duì)象
? ? ? ? let calc = {
? ? ? ? ? ? //定義計(jì)算器的屬性
? ? ? ? ? ? num1:0,
? ? ? ? ? ? num2:0,
? ? ? ? ? ? //定義計(jì)算器的方法
? ? ? ? ? ? jia:function(){
? ? ? ? ? ? ? ? //在對(duì)象的方法中，獲取對(duì)象的其它成員顶籽，要通過(guò)this
? ? ? ? ? ? ? ? console.log(`${this.num1}+${this.num2}=${this.num1+this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? //在SE6中玩般，對(duì)象的方法，也可以采用下面的方式
? ? ? ? ? ? jian(){
? ? ? ? ? ? ? ? console.log(`${this.num1}-${this.num2}=${this.num1-this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? cheng(){
? ? ? ? ? ? ? ? console.log(`${this.num1}*${this.num2}=${this.num1*this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? chu(){
? ? ? ? ? ? ? ? console.log(`${this.num1}/${this.num2}=${this.num1/this.num2}`);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //給計(jì)算器對(duì)象的兩個(gè)屬性賦值
? ? ? ? calc.num1 = 200
? ? ? ? calc.num2 = 20
? ? ? ? calc.jia()
? ? ? ? calc.jian()
? ? ? ? calc.cheng()
? ? ? ? calc.chu()
? ? </script>
</body>
</html>
2.采用構(gòu)造函數(shù)的方式new一個(gè)對(duì)象
可以直接new一個(gè)Object對(duì)象
let obj = new Object()
也可以定義一個(gè)構(gòu)造函數(shù)礼饱，再出new這個(gè)構(gòu)造函數(shù)的對(duì)象坏为。構(gòu)造函數(shù)也稱為：類，是自定義的一種類型镊绪。
//定義學(xué)生類
function Student(形參...){
? ? //定義屬性(必須使用this.)
? ? //定義方法(必須使用this.)
}
//創(chuàng)建學(xué)生對(duì)象
let s1 = new Student(實(shí)參...)
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>構(gòu)造函數(shù)</title>
</head>
<body>
? ? <script>
? ? ? ? // 構(gòu)造函數(shù)：首先是個(gè)函數(shù)匀伏，這個(gè)函數(shù)用來(lái)創(chuàng)建出對(duì)象
? ? ? ? // 如果使用構(gòu)造函數(shù)創(chuàng)建出對(duì)象：使用new關(guān)鍵字。
? ? ? ? // 可以使用系統(tǒng)構(gòu)造函數(shù)Object創(chuàng)建一個(gè)對(duì)象蝴韭。效果等同于{}
? ? ? ? let obj1 = new Object()?
? ? ? ? console.log(obj1);
? ? ? ? let obj2 = {}
? ? ? ? console.log(obj2);
? ? ? ? console.log('--------------------------------');
? ? ? ? // 多數(shù)情況下够颠，都是先自定義一個(gè)構(gòu)造函數(shù)，再通過(guò)自定義的構(gòu)造函數(shù)創(chuàng)建出對(duì)應(yīng)的對(duì)象
? ? ? ? // 可以將構(gòu)造函數(shù)理解成：類
? ? ? ? function Student(no,name,age,sex){
? ? ? ? ? ? //這里的this万皿，用于給構(gòu)造函數(shù)定義成員
? ? ? ? ? ? this.no = no
? ? ? ? ? ? this.name = name
? ? ? ? ? ? this.age = age
? ? ? ? ? ? this.sex = sex
? ? ? ? ? ? this.sayHi = function(){
? ? ? ? ? ? ? ? console.log(`大家好摧找！我叫${this.name}`);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 通過(guò)類（構(gòu)造函數(shù)）可以創(chuàng)建出無(wú)數(shù)個(gè)對(duì)象
? ? ? ? let s1 = new Student(1001,'張三',20,'男')
? ? ? ? console.log(s1);
? ? ? ? s1.sayHi()
? ? ? ? let s2 = new Student(1002,'李四',22,'女')
? ? ? ? console.log(s2);
? ? ? ? s2.sayHi()
? ? ? ? let s3 = new Student(1003,'王五',24,'男')
? ? ? ? console.log(s3);
? ? ? ? s3.sayHi()
? ? </script>
</body>
</html>
練習(xí)題：
定義一個(gè)棋子類，里面有四個(gè)屬性牢硅，分別是：名稱蹬耘，顏色，X軸位置减余，Y軸位置
比如：紅色的馬综苔，當(dāng)前位置是(X=15,Y=11)? 里面有兩個(gè)方法：分別是：
1.顯示當(dāng)前棋子在什么位置
2.移動(dòng)方法，該方法位岔，需要傳兩個(gè)參數(shù)如筛，就是X軸和Y軸的新坐標(biāo)，移動(dòng)方法執(zhí)行完后抒抬，在方法的最下面杨刨，調(diào)用一次顯示當(dāng)前位置的方法。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>構(gòu)造函數(shù)練習(xí)</title>
</head>
<body>
? ? <script>
? ? ? ? // 定義一個(gè)棋子構(gòu)造函數(shù)（類）
? ? ? ? function Chess(name,color,x,y){
? ? ? ? ? ? //定義屬性
? ? ? ? ? ? this.name=name
? ? ? ? ? ? this.color=color
? ? ? ? ? ? this.x=x
? ? ? ? ? ? this.y=y
? ? ? ? ? ? //定義方法
? ? ? ? ? ? //顯示當(dāng)前位置的方法
? ? ? ? ? ? this.show=function(){
? ? ? ? ? ? ? ? console.log(`${this.color}${this.name}擦剑，當(dāng)前位置是X:${this.x} Y:${this.y}`);
? ? ? ? ? ? }
? ? ? ? ? ? //移動(dòng)棋子的方法
? ? ? ? ? ? this.move=function(x,y){
? ? ? ? ? ? ? ? this.x = x
? ? ? ? ? ? ? ? this.y = y
? ? ? ? ? ? ? ? //位置更新后妖胀，重新調(diào)用顯示當(dāng)前位置的方法
? ? ? ? ? ? ? ? this.show()
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 創(chuàng)建一個(gè)紅馬
? ? ? ? let redHorse = new Chess('馬','紅',15,1)
? ? ? ? redHorse.show()
? ? ? ? redHorse.move(13,2)
? ? ? ? //創(chuàng)建一個(gè)黑車
? ? ? ? let blackCar = new Chess('車','黑',1,1)
? ? ? ? blackCar.show()
? ? ? ? blackCar.move(5,1)
? ? </script>
</body>
</html>
