01對象初體驗(yàn)
//1.變量：本質(zhì)上 就是 內(nèi)存里的一塊空間 ，一次只能存一個數(shù)據(jù)
? ? var age = 18;
? ? //2.數(shù)組：本質(zhì)上 就是 內(nèi)存里 連續(xù)的N個空間，可以 存放多個 數(shù)據(jù)
? ? //? ? ? ? 三要素： 元素、下標(biāo)、legnth
? ? //3.函數(shù)：半只上 也是 內(nèi)存里的 一塊空間，只不過存的是 【代碼】
? ? //4.對象：超級容器，可以存放所有東西 -- 變量、數(shù)組、函數(shù)、對象
? ? //? 對象的成員，包括 屬性 和 方法
? ? //4.1 對象的屬性：就是 對象里的 “變量”，用來 保存 數(shù)據(jù)
? ? //4.2 對象的方法：就是 對象里的 “函數(shù)”，用來 保存 代碼
? ? var bzDuiXiang = {
? ? ? // 對象的屬性
? ? ? gfName: '小川川',
? ? ? gfAge: 35,
? ? ? gnfGeder: true,
? ? ? childNames: ['小小川', '小小波'],
? ? ? // 對象的 方法
? ? ? sayHi: function () {
? ? ? ? console.log('Hi~大家好~~我是 班長的 小可愛~~~');
? ? ? }
? ? };
? ? bzDuiXiang.sayHi();
02對象成員的訪問
? //1.對象：超級容器，可以存放所有東西 -- 變量、數(shù)組、函數(shù)、對象
? ? //? 對象的成員，包括 屬性 和 方法
? ? //1.1 對象的屬性：就是 對象里的 “變量”，用來 保存 數(shù)據(jù)
? ? //1.2 對象的方法：就是 對象里的 “函數(shù)”，用來 保存 代碼
? ? var bzDuiXiang = {
? ? ? // 對象的屬性
? ? ? gfName: '小川川',
? ? ? gfAge: 35,
? ? ? gfGender: true,
? ? ? childNames: ['小小川', '小小波'],
? ? ? // 對象的 方法
? ? ? sayHi: function () {
? ? ? ? console.log('Hi~大家好~~我是 班長的 小可愛~~~');
? ? ? }
? ? };
? ? //2.訪問 對象 里的屬性 ---------------------------------------------------
? ? console.log(bzDuiXiang.gfName);
? ? console.log(bzDuiXiang.gfAge);
? ? console.log(bzDuiXiang.gfGender);
? ? console.log(bzDuiXiang.childNames);
? ? //2.1 訪問 對象中 不存在的屬性時，返回 undefined
? ? console.log(bzDuiXiang.money); // undefined
? ? //3. 調(diào)用 對象的 方法
? ? bzDuiXiang.sayHi();
? ? // 打印整個對象
? ? console.log(bzDuiXiang);
03為對象添加成員
//1.對象：超級容器，可以存放所有東西 -- 變量、數(shù)組、函數(shù)、對象
? ? //? 對象的成員，包括 屬性 和 方法
? ? //1.1 對象的屬性：就是 對象里的 “變量”，用來 保存 數(shù)據(jù)
? ? //1.2 對象的方法：就是 對象里的 “函數(shù)”，用來 保存 代碼
? ? var bzDuiXiang = {
? ? ? // 對象的屬性
? ? ? gfName: '小川川',
? ? ? gfAge: 35,
? ? ? gfGender: true,
? ? ? childNames: ['小小川', '小小波'],
? ? ? // 對象的 方法
? ? ? sayHi: function () {
? ? ? ? console.log('Hi~大家好~~我是 班長的 小可愛~~~');
? ? ? }
? ? };
? ? //2.修改 對象 屬性值 ----------------------------------------------------------
? ? bzDuiXiang.gfName = '小東東';
? ? console.log(bzDuiXiang.gfName);
? ? //3.為 對象 動態(tài)添加 屬性------------------------------------------------------
? ? //? 語法：對象.要添加的屬性名 = 屬性值;
? ? bzDuiXiang.money = 15000;
? ? console.log(bzDuiXiang.money);
? ? bzDuiXiang.height = 160;
? ? console.log(bzDuiXiang.height);
? ? //4.為 對象 動態(tài)添加 方法 -----------------------------------------------------
? ? bzDuiXiang.beatBF = function(){
? ? ? console.log('竟敢在外面偷瞄其他男生，打死你個龜孫~~~~~');
? ? };
? ? // 調(diào)用 添加的 方法
? ? bzDuiXiang.beatBF();
? ? // 打印整個對象
? ? console.log(bzDuiXiang);
04刪除對象里的成員
var benLaoPo = {
? ? ? ? name : '小笨蛋',
? ? ? ? cook : function(){
? ? ? ? ? console.log('做的菜真難吃~~~');
? ? ? ? }
? ? ? };
? ? ? console.log(benLaoPo.name);
? ? ? benLaoPo.cook();
? ? ? // 無法 通過 設(shè)置為 null 來 刪除對象里的成員
? ? ? // benLaoPo.cook = null;
? ? ? // benLaoPo.cook();
? ? ? //1. delete 關(guān)鍵字：用來 刪除 對象 里的成員
? ? ? // 刪除 對象里的方法
? ? ? delete benLaoPo.cook;
? ? ? // 刪除 對象里的 屬性
? ? ? delete benLaoPo.name;
? ? ? console.log(benLaoPo);
05對象的中括號訪問法
// var arr = ['P城', 'R城', '軍事基地'];
? ? // console.log(arr[0]);
? ? // console.log(arr);
? ? var girlFriend = {
? ? ? gfName: '小靜',
? ? ? age: 21,
? ? ? gender: false,
? ? ? xcook: function () {
? ? ? ? console.log('做菜簡直就是 金頂廚師的水平~~~~');
? ? ? },
? ? ? run: function () {
? ? ? ? console.log('每天晚上跑跑步~~~~');
? ? ? }
? ? };
? ? girlFriend.angry = function () {
? ? ? console.log('你又說我的菜不好吃，我很生氣，明天你就不要回來了~~~！');
? ? };
? ? //1.使用 . 來訪問 對象的成員 -------------------------------------------------------
? ? console.log(girlFriend.gfName); // '小靜'
? ? console.log(girlFriend.age);? ? // 21
? ? girlFriend.xcook(); // '每天晚上跑跑步~~~~'
? ? //2. 【中括號訪問法】使用 [] 來訪問 對象的成員 --------------------------------------
? ? //? 除了 數(shù)組 可以通過 [下標(biāo)] 來訪問 元素
? ? //? 對象 也可以 通過 ['屬性名'] 來訪問 對應(yīng)的 屬性值
? ? console.log(girlFriend);
? ? // 2.1 使用 中括號 來訪問 對象里的 屬性? ? ? ? --------------------------------------
? ? //? ? 語法：對象['屬性名'] 來訪問 對應(yīng)的 屬性值
? ? console.log('------------------------------');
? ? console.log(girlFriend['gfName']); // -> girlFriend.gfName -> '小靜'
? ? console.log(girlFriend['age']);? ? // -> girlFrined.age? ? ->? 21
? ? console.log(girlFriend['gender']); // -> girlFrined.gender -> false
? ? // 2.2 使用 中括號 來訪問 對象里的 方法? ? ? ? --------------------------------------
? ? //? ? 語法：對象['方法名']();? 來 調(diào)用對應(yīng)的 方法代碼
? ? // girlFriend.xcook( ); // 使用 對象. 調(diào)用方法
? ? girlFriend['xcook']( );
06使用in關(guān)鍵字來判斷對象中是否存在某個成員
var stuInfo = {
? ? ? name: '小白',
? ? ? age: 18,
? ? ? gender: false,
? ? ? sayHi: function () {
? ? ? ? console.log('你好呀~~~');
? ? ? }
? ? };
? ? //1. in 關(guān)鍵字：用來判斷 對象中 是否 存在 某個成員
? ? //? ? ? 返回值：bool值，如果 對象中 存在 指定的屬性 ，返回true，否則返回 false
? ? console.log('name' in stuInfo); // true
? ? console.log('age' in stuInfo); // true
? ? console.log('gender' in stuInfo); // true
? ? console.log('sayHi' in stuInfo); // true
? ? console.log('hobby' in stuInfo); // false
07顯示用戶輸入的屬性值
var girlFriend = {
? ? ? ? gfName: '小靜',
? ? ? ? age: 21,
? ? ? ? gender: false,
? ? ? ? xcook: function () {
? ? ? ? ? console.log('做菜簡直就是 金頂廚師的水平~~~~');
? ? ? ? },
? ? ? ? run: function () {
? ? ? ? ? console.log('每天晚上跑跑步~~~~');
? ? ? ? ? //return undefined;
? ? ? ? }
? ? ? };
? ? ? // 0.1 通過 中括號 訪問法? 訪問對象的屬性值
? ? ? // var proValue = girlFriend['age'];
? ? ? // console.log(proValue);
? ? ? //0.2 通過 .訪問法? 訪問對象的屬性值
? ? ? // var proValue2 = girlFriend.age;
? ? ? // console.log(proValue2);
? ? ? //1.接收用戶輸如的 屬性名 - 假設(shè)用戶 輸入的 是 'gfName'
? ? ? var proName = prompt('請輸入您要訪問的 屬性 的名字：'); //相當(dāng)于 ： var proName = 'gfName'
? ? ? //2.根據(jù)用戶書輸入的屬性名 獲取 對應(yīng)的 屬性值
? ? ? var proValue = girlFriend[proName]; //相當(dāng)于 ： var proValue = girlFriend['gfName']
? ? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 相當(dāng)于 ： var proValue = girlFriend.gfName;? ?
? ? ? //? 打印 屬性值
? ? ? console.log(proValue);
08使用for-in方法遍歷對象的成員
// var arr = [1, 2, 4, 6, 2, 12];
? ? // for (var i = 0; i < arr.length; i++) {
? ? //? console.log(arr[i]);
? ? // }
? ? var stuInfo = {
? ? ? name: '小白',
? ? ? age: 18,
? ? ? gender: false,
? ? ? sayHi: function () {
? ? ? ? console.log('你好呀~~~');
? ? ? }
? ? };
? ? // 【前言：遍歷對象里的成員 無法使用 下標(biāo)，因?yàn)?對象沒有下標(biāo)，只有? 成員名 和 成員值
? ? //? ? ? 所以，可以 通過 for in 獲取 對象中 每個 成員的名字，然后結(jié)合 對象成員中括號 訪問法 獲取 成員的值】
? ? // 0. for(var key in obj){? }? ---------------------
? ? //? ? for in 語法 專門用來 遍歷 對象 里的每個成員
? ? //? ? a.? key 是 每次 循環(huán) 獲取 到的 對象obj 里的成員 的 名字 字符串
? ? //? ? b.? obj[key] 可以 獲取 對應(yīng)成員 的值
? ? //1.遍歷 對象 里的成員 ---------------------------------------
? ? //1.1 獲取 對象 里的 每個 成員的 名字
? ? for (var k in stuInfo) {
? ? ? // 但因 k 的值 和 類型
? ? ? console.log('k = ' + k + ',typeof k =' + typeof (k));
? ? ? //注意：獲取 對應(yīng)的 屬性值
? ? ? var v = stuInfo[k];
? ? ? console.log('v = ' + v);
? ? }
? ? //1.2 通過 對象中括號 訪問法，根據(jù) 成員名 獲取 成員的值
? ? // stuInfo['gender']
09創(chuàng)建對象的幾種方法補(bǔ)充
//1. new 的方式 創(chuàng)建對象 --------------------------------
? ? //1.1 創(chuàng)建 空 對象
? ? var obj = new Object();
? ? //1.2? 創(chuàng)建 帶 初始 成員的 對象
? ? var obj2 = new Object({
? ? ? age: 1,
? ? ? name: '小白',
? ? ? sayHi: function () {}
? ? });
? ? //2. { } 字面量 方式 創(chuàng)建 對象----------------------------
? ? //2.1 創(chuàng)建 空 對象
? ? var obj = {};
? ? console.log(obj);
? ? //2.2 創(chuàng)建 帶 初始 成員的 對象
? ? var obj2 = {
? ? ? //a.屬性
? ? ? age: 18,
? ? ? gender: true,
? ? ? //b.方法
? ? ? sayHi: function () {
? ? ? ? console.log('你好~~~');
? ? ? },
? ? ? beRich: function () {
? ? ? ? console.log('睡覺，做夢~~~');
? ? ? }
? ? };
10js中的this關(guān)鍵字
? ? //1. 函數(shù)內(nèi)部 有兩個 js基礎(chǔ)階段 要掌握的 特殊屬性： arguments 和 this
? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本質(zhì)上來說：他們倆 就是 函數(shù)內(nèi)部的兩個 特殊的 變量?。?！
? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? arguments中 存的 是 實(shí)參列表：所在函數(shù)被調(diào)用時，傳入的 數(shù)據(jù)，都自動存入了 arguments 屬性中
? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this 是在函數(shù)被調(diào)用時，保存了所處的 作用域?。?！
? ? // 【this口訣】 函數(shù)方法 在調(diào)用的時候，誰點(diǎn).出的這個方法，方法中的this就是誰！?。?/p>
? ? // this:就是函數(shù)內(nèi)部的一個特殊的屬性，本質(zhì)上就是一個 變量而已
? ? // this 到底是誰：調(diào)用方法時，誰點(diǎn).出的方法，那么方法里的this就是誰?。?！
? ? //1.1 全局函數(shù)里的 this -- 特殊：所有的全局變量、全局函數(shù) 都是 屬于 window對象（全局作用域）-----------
? ? var loverName = '小靜靜';
? ? function showLove() {
? ? ? console.log('i love dog~~~');
? ? ? console.log(this);
? ? }
? ? //? ? 完整的調(diào)用語法，應(yīng)該是 window.方法();
? ? window.showLove();
? ? console.log(window.loverName);
? ? //? ? 特殊：凡是 屬于 window(全局作用域)的成員，調(diào)用時 都可以 省略 window.
? ? showLove(); // --> js引擎 在執(zhí)行代碼時，會 自動改成： window.showLove();
? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 所以，一般情況下，全局函數(shù)方法 里面的 this 都是 window!!!
? ? console.log('-------------------------------');
? ? console.log('-------------------------------');
? ? //1.2 在自定義對象的 方法里的 this --------------------------------------------------------
? ? // function StuInfo(stuName, stuAge, stuGender) {
? ? //? this.name = stuName;
? ? //? this.age = stuAge;
? ? //? this.gender = stuGender;
? ? //? this.sayHi = function () {
? ? //? ? console.log('汪汪~~~' + this.name);
? ? //? }
? ? // }
? ? var stu = {
? ? ? name: '小ruikey',
? ? ? age: 1,
? ? ? gender: false,
? ? ? sayHi: function () {
? ? ? ? console.log('汪汪~~~~' + this.name);
? ? ? }
? ? };
? ? console.log(stu.name);
? ? console.log(stu.age);
? ? console.log(stu.gender);
? ? // 【this口訣】 函數(shù)方法 在調(diào)用的時候，誰.出的這個方法，方法中的this就是誰！?。?---------------
? ? // 下句代碼中 ，sayHi 方法 里的 this 就是 stu 對象！??！
? ? stu.sayHi();
? ? console.log('window.stu.sayHi(); ----');
? ? window.stu.sayHi();
? 11批量創(chuàng)建對象:工廠函數(shù)
// var stu1 = {
? ? //? name: '小白',
? ? //? age: 21,
? ? //? gender: true,
? ? //? sayHi: function () {
? ? //? ? console.log('我是小白~~');
? ? //? }
? ? // };
? ? // var stu2 = {
? ? //? name: '小黑',
? ? //? age: 23,
? ? //? gender: false,
? ? //? sayHi: function () {
? ? //? ? console.log('我是小黑~~');
? ? //? }
? ? // };
? ? //簡單工廠模式 -- 批量生產(chǎn) 對象
? ? //工廠函數(shù)：每次調(diào)用，內(nèi)部都會 創(chuàng)建一個對象，并 設(shè)置好 屬性的值（一般通過形參傳入），最后返回 這個對象 給 調(diào)用者
? ? // 1.用來創(chuàng)建 一個 學(xué)員對象 的 方法 --------------------------------
? ? function createStuInfo(stuName, stuAge, stuGender) {
? ? ? //1.1 創(chuàng)建對象 并設(shè)置 屬性值
? ? ? var obj = {
? ? ? ? name: stuName,
? ? ? ? age: stuAge,
? ? ? ? gender: stuGender,
? ? ? ? sayHi: function () {
? ? ? ? ? console.log('我很喜歡你~~~~');
? ? ? ? }
? ? ? };
? ? ? //1.2 將 對象 返回
? ? ? return obj;
? ? }
? ? //2.使用工廠函數(shù) 創(chuàng)建2個對象----------------------------------------
? ? var stu1 = createStuInfo('小白', 18, false);
? ? console.log(stu1);
? ? var stu2 = createStuInfo('小黑', 21, true);
? ? console.log(stu2);
12批量創(chuàng)建對象:new和構(gòu)造函數(shù)
//1. 工廠方式 批量創(chuàng)建對象 ---------------------------------------------
? ? function createStuInfo(stuName, stuAge, stuGender) {
? ? ? //1.1 創(chuàng)建一個 空對象
? ? ? var obj = new Object();
? ? ? //1.2 動態(tài) 的 為 空對象 添加 成員
? ? ? obj.name = stuName;
? ? ? obj.age = stuAge;
? ? ? obj.gender = stuGender;
? ? ? obj.sayHi = function () {
? ? ? ? console.log('我很喜歡你~~~~');
? ? ? };
? ? ? //2. 將 添加了成員的? 對象 返回
? ? ? return obj;
? ? }
? ? //2.【構(gòu)造函數(shù)】：就是用來 批量創(chuàng)建對象的一個種函數(shù)寫法 -----------------------------------------
? ? //? ? ? 命名規(guī)范：首字母 都 大寫 ，一般用 名詞
? ? //? ? ? 用法：通過 new 關(guān)鍵字 來調(diào)用
? ? function StuInfo(stuName, stuAge, stuGender) {
? ? ? this.name = stuName;
? ? ? this.age = stuAge;
? ? ? this.gender = stuGender;
? ? ? this.sayHi = function () {
? ? ? ? console.log('我很喜歡你呀~~~小狗狗');
? ? ? }
? ? }
? ? //【強(qiáng)調(diào)】構(gòu)造函數(shù) 不是用來 直接 調(diào)用的！而是 給 new 來調(diào)用的?。。?/p>
? ? // var a = StuInfo(); // var a =? undefined;
? ? //2.1 通過 new 關(guān)鍵字 來 調(diào)用 構(gòu)造函數(shù) -----------------------------------------
? ? //? 【看不到的細(xì)節(jié)】 new 關(guān)鍵字 做的四個事情：
? ? //? 2.1 偷偷的 創(chuàng)建一個 空對象
? ? //? 2.2 偷偷的 將 空對象 傳給 被調(diào)用的 構(gòu)造函數(shù) 里的 this
? ? //? 2.3 調(diào)用 構(gòu)造函數(shù)，調(diào)用完后，空對象里 就有了 各種 屬性 和 方法
? ? //? 2.4 返回 對象
? ? var stu1 = new StuInfo('小狗狗', 1, false);
? ? var stu2 = new StuInfo('小貓貓', 2, true);
? ? stu1.sayHi();
? ? console.log(stu1);
? ? console.log(stu2);
13模擬new關(guān)鍵字
function StuInfo(stuName, stuAge, stuGender) {
? ? ? this.name = stuName;
? ? ? this.age = stuAge;
? ? ? this.gender = stuGender;
? ? ? this.sayHi = function () {
? ? ? ? console.log('我很喜歡你呀~~~小狗狗');
? ? ? }
? ? }
? ? //---------------模擬 new 關(guān)鍵字的 4個事情！?。。?----------
? ? // 【了解就可以，后面 js高級會詳細(xì)講解~~?。。。。 ?/p>
? ? function myNew() {
? ? ? //? 【看不到的細(xì)節(jié)】 new 關(guān)鍵字 做的四個事情：
? ? ? //? 2.1 偷偷的 創(chuàng)建一個 空對象
? ? ? var obj = {
? ? ? ? flag: '我是空對象，不要理我~~~'
? ? ? };
? ? ? //? 2.2 偷偷的 將 空對象 傳給 被調(diào)用的 構(gòu)造函數(shù) 里的 this
? ? ? //? 2.3 調(diào)用 構(gòu)造函數(shù)，調(diào)用完后，空對象里 就有了 各種 屬性 和 方法
? ? ? StuInfo.call(obj, '小白', 18, false);
? ? ? //? 2.4 返回 對象
? ? ? return obj;
? ? }
? ? var o = myNew();
