一.對象
?<script>
? ? ? ? // 對象就是擁有一組屬性和方法的集合
? ? ? ? // 如果 a.b ，那么a就是對象，b是a的屬性
? ? ? ? // 如果 a.c()，那么a就是對象，c是a的方法
? ? ? ? /* let no = 1001
? ? ? ? let name = '張三'
? ? ? ? let age = 20
? ? ? ? let sex = '女' */
? ? ? ? // 定義對象的第一種種方式：采用字面量賦值方式直接定義
? ? ? ? let stu1 = {
? ? ? ? ? ? // 屬性名：屬性值的方式，定義屬性
? ? ? ? ? ? ?no : 1001,
? ? ? ? ? ? ?name : '張三',
? ? ? ? ? ? ?age : 20,
? ? ? ? ? ? ?sex : '男',
? ? ? ? ? ? // ?定義學生的方法
? ? ? ? ? ? study:function(){
? ? ? ? ? ? ? ? console.log('每天學習8小時');
? ? ? ? ? ? },
? ? ? ? ? ? play:function(){
? ? ? ? ? ? ? ? console.log('每天玩8小時');
? ? ? ? ? ? },
? ? ? ? }
? ? ? ? console.log(stu1);
? ? ? ? // 調用對象身上的屬性
? ? ? ? console.log(stu1.name);
? ? ? ? console.log(stu1.age);
? ? ? ? // 調用身上的方法
? ? ? ? stu1.study()
? ? ? ? stu1.play()
? ? </script>
二.使用對象制作計算器
? <script>
? ? ? ? // 定義一個計算器對象
? ? ? ? let calc = {
? ? ? ? ? ? // 定義計算器的屬性
? ? ? ? ? ? num1: 0,
? ? ? ? ? ? num2: 0,
? ? ? ? ? ? jia: function () {
? ? ? ? ? ? ? ? // 在對象的方法中，獲取讀取其它的成員，要通過this
? ? ? ? ? ? ? ? console.log(`${this.num1}+${this.num2}=${this.num1 + this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? // 在ES6中，對象的方法,也可以采用下面的樣式
? ? ? ? ? ? jian() {
? ? ? ? ? ? ? ? console.log(`${this.num1}-${this.num2}=${this.num1 - this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? chen() {
? ? ? ? ? ? ? ? console.log(`${this.num1}*${this.num2}=${this.num1 * this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? chu() {
? ? ? ? ? ? ? ? console.log(`${this.num1}/${this.num2}=${this.num1 / this.num2}`);
? ? ? ? ? ? },
? ? ? ? }
? ? ? ? // 給計算器對象的兩個屬性賦值
? ? ? ? calc.num1 = 200
? ? ? ? calc.num2 = 20
? ? ? ? calc.jia()
? ? ? ? calc.jian()
? ? ? ? calc.chen()
? ? ? ? calc.chu()
? ? </script>
三.分頁方法
1.第一種
?<script>
? ? ? ? // 定義一個數(shù)組，里面初始化100條數(shù)據(jù)
? ? ? ? let arr = []
? ? ? ? for(let ?i=0;i<100;i++){
? ? ? ? ? ? arr.push('數(shù)據(jù)'+(i+1))
? ? ? ? }
? ? ? ? // 定義一個分頁方法，方法的三個參數(shù)分別是：原始數(shù)組，頁碼，每頁數(shù)量
? ? ? ? function pageDate(arr,pageIndex,pagesize){
? ? ? ? ? ? // 思路：就是對原始數(shù)組中的數(shù)據(jù)，做截取
? ? ? ? ? ? // 定義截取數(shù)據(jù)的起始位置
? ? ? ? ? ? let start = (pageIndex-1)*pagesize
? ? ? ? ? ? // 定義截取數(shù)據(jù)的結束位置
? ? ? ? ? ? let end = start+pagesize
? ? ? ? ? ? // 根據(jù)起始下標和結束下標，從原始數(shù)值中截取對應的數(shù)據(jù)并返回
? ? ? ? ? ? return arr.slice(start,end)
? ? ? ? }
? ? ? ? // 表示每頁10條數(shù)據(jù)，返回第3頁
? ? ? ? ?let arr2 = pageDate(arr,3,10)
? ? ? ? ?console.log(arr2);
? ? ? ? // ?表示1每頁15條數(shù)據(jù)，返回第5頁
? ? ? ? ?let arr3 = pageDate(arr,5,15)
? ? ? ? ?console.log(arr3);
? ? </script>
四.構造函數(shù)
?<script>
? ? ? ? // 構造函數(shù):首先是個函數(shù)，這個函數(shù)用來創(chuàng)建出對象
? ? ? ? // 如果使用構造函數(shù)創(chuàng)建出對象，使用new關鍵字
? ? ? ? // 可以使用系統(tǒng)構造函數(shù)Object創(chuàng)建一個對象
? ? ? ? let obj1 = new Object()
? ? ? ? console.log(obj1);
? ? ? ? let obj2 = {}
? ? ? ? console.log(obj2);
? ? ? ? console.log('------------------------------------------');
? ? ? ? // 多數(shù)情況下，都是先定義一個構造函數(shù)再通過自定義的構造函數(shù)創(chuàng)建出對應的對象
? ? ? ? function Student(no, name, age, sex) {
? ? ? ? ? ? // 這里的this，用于構造函數(shù)定義屬性
? ? ? ? ? ? this.no = no
? ? ? ? ? ? this.name = name
? ? ? ? ? ? this.age = age
? ? ? ? ? ? this.sex = sex
? ? ? ? ? ? this.sayHi = function(){
? ? ? ? ? ? ? ? console.log(`大家好！我叫${this.name}`);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 通過類(構造函數(shù))可以創(chuàng)建出無數(shù)個對象
? ? ? ? let s1 = new Student(1001,'張三',20,'男')
? ? ? ? console.log(s1);
? ? ? ? s1.sayHi()
? ? ? ? let s2 = new Student(1002,'李四',22,'nv')
? ? ? ? console.log(s2);
? ? ? ? s2.sayHi()
? ? ? ? let s3 = new Student(1003,'王五',24,'男')
? ? ? ? console.log(s3);
? ? ? ? s3.sayHi()
? ? ? ?/* ?let s1 = {
? ? ? ? ? ? ?no:1001,
? ? ? ? ? ? ?name:'張三',
? ? ? ? ? ? ?age: 20,
? ? ? ? ? ? ?sex:'男'
? ? ? ? ?}
? ? ? ? ?let s2 = {
? ? ? ? ? ? ?no:1002,
? ? ? ? ? ? ?name:'李四',
? ? ? ? ? ? ?age: 22,
? ? ? ? ? ? ?sex:'女'
? ? ? ? ?}
? ? ? ? ?let s3 = {
? ? ? ? ? ? ?no:1003,
? ? ? ? ? ? ?name:'王五',
? ? ? ? ? ? ?age: 24,
? ? ? ? ? ? ?sex:'男'
? ? ? ? ?} */
? ? </script>
五.構造函數(shù)的練習
定義一個棋子類，里面有四個屬性，分別是：名稱，顏色，X軸位置，Y軸位置
比如：紅色的馬，當前位置是(X=15,Y=11)
里面有兩個方法：分別是：
1.顯示當前棋子在什么位置
2.移動方法，該方法，需要傳兩個參數(shù)，就是X軸和Y軸的新坐標，移動方法執(zhí)行完后，在方法的最下面，調用一次顯示當前位置的方法。
?<script>
? ? ? ? // 定義一個棋子構造函數(shù)(類)
? ? ? ? function Chess(name,color,x,y){
? ? ? ? ? ? // 定義屬性
? ? ? ? ? ? this.name=name
? ? ? ? ? ? this.color=color
? ? ? ? ? ? this.x=x
? ? ? ? ? ? this.y=y
? ? ? ? ? ? // 定義方法
? ? ? ? ? ? // 顯示當前位置的方法
? ? ? ? ? ? this.show=function(){
? ? ? ? ? ? ? ? console.log(`${this.color}${this.name}.當前位置是x：${this.x}Y:${this.yw}`);
? ? ? ? ? ? }
? ? ? ? ? ? // 移動棋子的方法
? ? ? ? ? ? this.move=function(x,y){
? ? ? ? ? ? ? ? this.x=x
? ? ? ? ? ? ? ? this.y=y
? ? ? ? ? ? ? ? // 位置更新后，重新調用顯示當前位置的方法
? ? ? ? ? ? ? ? this.show()
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 創(chuàng)建一個紅馬
? ? ? ? let redHorse = new Chess('馬','紅',15,1)
? ? ? ? redHorse.show()
? ? ? ? redHorse.move(13,2)
? ? ? ? // 創(chuàng)建一個黑車
? ? ? ? let blackCar = ?new Chess('車','黑',1,1)
? ? ? ? blackCar.show()
? ? ? ? blackCar.move(5,1)
? ? </script>
六.arguments參數(shù)對象
<script>
? ? ? ? // 方法在定義時，設置了3個形參
? ? ? ? function fun1(a,b,c){
? ? ? ? ? ? console.log(a,b,c);
? ? ? ? ? ? // arguments對象里面保存著方法里面所有的參數(shù)，都可以通過下標來獲取,也可以寫循環(huán)
? ? ? ? ? ? console.log(arguments);
? ? ? ? ? ? console.log(arguments[3]);
? ? ? ? ? ? console.log(arguments[4]);
? ? ? ? ? ? console.log('---------------------------for循環(huán)---------------------------');
? ? ? ? ? ? for(let i=0;i<arguments.length;i++){
? ? ? ? ? ? ? ? console.log(arguments[i]);
? ? ? ? ? ? }
? ? ? ? ? ? console.log('-------------------------------------------------------------');
? ? ? ? ? ? // 注意：arguments對象里面有一個callee方法，該方法指向當前方法本身。
? ? ? ? ? ? console.log(arguments.callee);
? ? ? ? }
? ? ? ? // 方法在實際調用時，傳遞了5個實參
? ? ? ? // 在方法里面，另外兩個參數(shù)值就可以用arguments來獲取
? ? ? ? fun1(100,200,300,400,500)
? ? ? ? console.log('===============================================');
? ? ? ? // 計算100以內(nèi)所有數(shù)的累加
? ? ? ? function calc(num){
? ? ? ? ? ? if(num===1){
? ? ? ? ? ? ? ? return num
? ? ? ? ? ? }
? ? ? ? ? ? // 因為arguments。callee就是指向當前方法本身
? ? ? ? ? ? // 因為這樣做的好處是：防止外部方法修改后，導致遞歸失效。
? ? ? ? ? ?let sum = num + arguments.callee(num-1)
? ? ? ? ? ? return sum
? ? ? ? }
? ? ? ? console.log(calc(100));
? ? </script>
