????對象就是擁有一組屬性和方法的集合
????如果 a.b 迹冤，那么a就是對象，b是a的屬性
????如果 a.c()收夸，那么a就是對象萍膛，c是a的方法
????定義對象有兩種方式：1.采用字面量賦值方式直接定義。2.采用構造函數(shù)的方式new一個對象
1.采用字面量賦值方式定義對象
? ??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()
2.案例：使用對象制作計算器
????//定義一個計算器對象
????let calc={
? ? ? ? ? ? //定義計算器的屬性
? ? ? ? ? ? num1:0,
? ? ? ? ? ? num2:0,
? ? ? ? ? ? //定義計算器的方法
? ? ? ? ? ? jia:function(){
? ? ? ? ? ? ? ? //在對象的方法中尸变，獲取對象的其它成員，要通過this
? ? ? ? ? ? ? ? console.log(`${this.num1}+${this.num2}=${this.num1+this.num2}`);
? ? ? ? ? ? },
? ? ? ? ? ? //在SE6中减俏，對象的方法振惰，也可以采用下面的方式
? ? ? ? ? ? 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}`);
? ? ? ? ? ? }
????}
????//給計算器對象的兩個屬性賦值
????calc.num1 = 200
????calc.num2 = 20
????calc.jia()
????calc.jian()
????calc.cheng()
????calc.chu()
3.采用構造函數(shù)的方式new一個對象
? ??// 構造函數(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)建出對應的對象
????// 可以將構造函數(shù)理解成：類
????function Student(no,name,age,sex){
? ? ? ? ? ? //這里的this桶蛔，用于給構造函數(shù)定義成員
? ? ? ? ? ? this.no = no
? ? ? ? ? ? this.age = age
? ? ? ? ? ? this.name = name
? ? ? ? ? ? this.sex = sex
? ? ? ? ? ? this.sayHi = function(){
? ? ? ? ? ? ? ? console.log(`大家好！我叫${this.name}`);
? ? ? ? ? ? }
????}
????//通過類(構造函數(shù))可以創(chuàng)建出無數(shù)個對象
????let s1 = new Student(1001,'張三',20,'男')
????console.log(s1);
????let s2 = new Student(1002,'李四',22,'女')
????console.log(s2);
????let s3 = new Student(1003,'王五',24,'男')
????console.log(s3);
????s3.sayHi()
4.構造函數(shù)練習1
????// 定義一個棋子構造函數(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.y}`);
? ? ? ? ? ? }
? ? ? ? ? ? //移動棋子的方法
? ? ? ? ? ? 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)
5.構造函數(shù)練習2
????// 定義一個對象，用于保存所有的工具方法
????// 這樣做的目的是，放在方法被后引入的庫覆蓋碟婆。
????let $b = {
? ? ????// 判斷是否是閏年的方法
? ? ????isLeapYear:(year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0,
? ? ????// 對個位數(shù)字補零的方法
? ? ????repair0:(val) => (val < 10 ? "0" + val : val),
? ? ????// 返回一個日期的短日期格式方法
? ? ????miniDate:function (date, type){
? ? ? ? ????let year = date.getFullYear();?? ??//年
? ? ? ? ????let month = date.getMonth() + 1;?? ??//月
? ? ? ? ????let day = date.getDate();? ???//日
? ? ? ? ????let hour = date.getHours();? ???//時
? ? ? ? ????let minute = date.getMinutes();?? ??//分
? ? ? ? ????let second = date.getSeconds();? ???//秒
? ? ? ? ????let week = date.getDay();?? ??//周幾
? ? ? ? ????//定義一個返回值电抚，默認拼接：年，月竖共，日
? ? ? ? ????let ret = [this.repair0(year), this.repair0(month), this.repair0(day)].join("-");
? ? ? ? ????if (type == "1") {
? ? ? ? ? ????ret += " " + [this.repair0(hour), this.repair0(minute), this.repair0(second)].join(":");
? ? ? ? ????} else if (type == "2") {
? ? ? ? ? ????ret +=
? ? ? ? ? ? ????" " +
? ? ? ? ? ? ????[this.repair0(hour), this.repair0(minute), this.repair0(second)].join(":") +
? ? ? ? ? ? ????" 星期" +
? ? ? ? ? ? ????"日一二三四五六"[week];
? ? ? ? ????}
? ? ? ? ????return ret;
? ? ????},
? ? ????// 對字符串反轉的方法
? ? ????reverseStr:(str) => str.split("").reverse().join(""),
? ? ????// 定義一個分頁方法蝙叛，參數(shù)是：數(shù)組，頁碼公给，每頁數(shù)量
? ? ????pageData:function(arr,pageIndex,pageSize){
? ? ? ? ????let start = (pageIndex-1)*pageSize??? ??//算出起始下標
? ? ? ? ????let end = start+pageSize? ?? ??//算出結束下標
? ? ? ? ????//根據(jù)起始下標和結束下標借帘，從原始數(shù)組中截取對應的數(shù)據(jù)并返回
? ? ? ? ????return {
? ? ? ? ? ? ????//定義返回的數(shù)據(jù)
? ? ? ? ? ? ????data:arr.slice(start,end),
? ? ? ? ? ? ????//總數(shù)量
? ? ? ? ? ? ????count:arr.length,
? ? ? ? ? ? ????//總頁數(shù)
? ? ? ? ? ? ????totalPage:Math.ceil(arr.length/pageSize),
? ? ? ? ? ? ????//當前頁
? ? ? ? ? ? ????pageIndex:pageIndex,
? ? ? ? ? ? ????//每頁數(shù)量
? ? ? ? ? ? ????pageSize:pageSize
? ? ? ? ????}
? ? ????}
????}
? ??//調用
? ??<script src="./js/kai.js"></script>
? ? <script>
? ? ? ? // 定義一個數(shù)組
? ? ? ? let arr = [11,22,33,44,55,66,77,88,99,111,222,333,444,555,666,777,888,999]
? ? ? ? console.log($b.pageData(arr,3,4));
? ? ? ? console.log($b.isLeapYear(2022));
? ? ? ? console.log($b.miniDate(new Date()));
? ? </script>
