01对象初体验
//1.变量：本质上 就是 内存里的一块空间 ，一次只能存一个数据
var age = 18;
//2.数组：本质上 就是 内存里 连续的N个空间，可以 存放多个 数据
// 三要素： 元素、下标、legnth
//3.函数：半只上 也是 内存里的 一块空间，只不过存的是 【代码】
//4.对象：超级容器，可以存放所有东西 -- 变量、数组、函数、对象
// 对象的成员，包括 属性 和 方法
//4.1 对象的属性：就是 对象里的 “变量”，用来 保存 数据
//4.2 对象的方法：就是 对象里的 “函数”，用来 保存 代码
var bzDuiXiang = {
// 对象的属性
gfName: '小川川',
gfAge: 35,
gnfGeder: true,
childNames: ['小小川', '小小波'],
// 对象的 方法
sayHi: function () {
console.log('Hi~大家好~~我是 班长的 小可爱~~~');
}
};
bzDuiXiang.sayHi();
02对象成员的访问
//1.对象：超级容器，可以存放所有东西 -- 变量、数组、函数、对象
// 对象的成员，包括 属性 和 方法
//1.1 对象的属性：就是 对象里的 “变量”，用来 保存 数据
//1.2 对象的方法：就是 对象里的 “函数”，用来 保存 代码
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. 调用 对象的 方法
bzDuiXiang.sayHi();
// 打印整个对象
console.log(bzDuiXiang);
03为对象添加成员
//1.对象：超级容器，可以存放所有东西 -- 变量、数组、函数、对象
// 对象的成员，包括 属性 和 方法
//1.1 对象的属性：就是 对象里的 “变量”，用来 保存 数据
//1.2 对象的方法：就是 对象里的 “函数”，用来 保存 代码
var bzDuiXiang = {
// 对象的属性
gfName: '小川川',
gfAge: 35,
gfGender: true,
childNames: ['小小川', '小小波'],
// 对象的 方法
sayHi: function () {
console.log('Hi~大家好~~我是 班长的 小可爱~~~');
}
};
//2.修改 对象 属性值 ----------------------------------------------------------
bzDuiXiang.gfName = '小东东';
console.log(bzDuiXiang.gfName);
//3.为 对象 动态添加 属性------------------------------------------------------
// 语法：对象.要添加的属性名 = 属性值;
bzDuiXiang.money = 15000;
console.log(bzDuiXiang.money);
bzDuiXiang.height = 160;
console.log(bzDuiXiang.height);
//4.为 对象 动态添加 方法 -----------------------------------------------------
bzDuiXiang.beatBF = function(){
console.log('竟敢在外面偷瞄其他男生，打死你个龟孙~~~~~');
};
// 调用 添加的 方法
bzDuiXiang.beatBF();
// 打印整个对象
console.log(bzDuiXiang);
04删除对象里的成员
var benLaoPo = {
name : '小笨蛋',
cook : function(){
console.log('做的菜真难吃~~~');
}
};
console.log(benLaoPo.name);
benLaoPo.cook();
// 无法 通过 设置为 null 来 删除对象里的成员
// benLaoPo.cook = null;
// benLaoPo.cook();
//1. delete 关键字：用来 删除 对象 里的成员
// 删除 对象里的方法
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. 【中括号访问法】使用 [] 来访问 对象的成员 --------------------------------------
// 除了 数组 可以通过 [下标] 来访问 元素
// 对象 也可以 通过 ['属性名'] 来访问 对应的 属性值
console.log(girlFriend);
// 2.1 使用 中括号 来访问 对象里的 属性 --------------------------------------
// 语法：对象['属性名'] 来访问 对应的 属性值
console.log('------------------------------');
console.log(girlFriend['gfName']); // -> girlFriend.gfName -> '小静'
console.log(girlFriend['age']); // -> girlFrined.age -> 21
console.log(girlFriend['gender']); // -> girlFrined.gender -> false
// 2.2 使用 中括号 来访问 对象里的 方法 --------------------------------------
// 语法：对象['方法名'](); 来 调用对应的 方法代码
// girlFriend.xcook( ); // 使用 对象. 调用方法
girlFriend['xcook']( );
06使用in关键字来判断对象中是否存在某个成员
var stuInfo = {
name: '小白',
age: 18,
gender: false,
sayHi: function () {
console.log('你好呀~~~');
}
};
//1. in 关键字：用来判断 对象中 是否 存在 某个成员
// 返回值：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.接收用户输如的 属性名 - 假设用户 输入的 是 'gfName'
var proName = prompt('请输入您要访问的 属性 的名字：'); //相当于 ： var proName = 'gfName'
//2.根据用户书输入的属性名 获取 对应的 属性值
var proValue = girlFriend[proName]; //相当于 ： var proValue = girlFriend['gfName']
// 相当于 ： 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('你好呀~~~');
}
};
// 【前言：遍历对象里的成员 无法使用 下标，因为 对象没有下标，只有 成员名 和 成员值
// 所以，可以 通过 for in 获取 对象中 每个 成员的名字，然后结合 对象成员中括号 访问法 获取 成员的值】
// 0. for(var key in obj){ } ---------------------
// for in 语法 专门用来 遍历 对象 里的每个成员
// a. key 是 每次 循环 获取 到的 对象obj 里的成员 的 名字 字符串
// b. obj[key] 可以 获取 对应成员 的值
//1.遍历 对象 里的成员 ---------------------------------------
//1.1 获取 对象 里的 每个 成员的 名字
for (var k in stuInfo) {
// 但因 k 的值 和 类型
console.log('k = ' + k + ',typeof k =' + typeof (k));
//注意：获取 对应的 属性值
var v = stuInfo[k];
console.log('v = ' + v);
}
//1.2 通过 对象中括号 访问法，根据 成员名 获取 成员的值
// stuInfo['gender']
09创建对象的几种方法补充
//1. new 的方式 创建对象 --------------------------------
//1.1 创建 空 对象
var obj = new Object();
//1.2 创建 带 初始 成员的 对象
var obj2 = new Object({
age: 1,
name: '小白',
sayHi: function () {}
});
//2. { } 字面量 方式 创建 对象----------------------------
//2.1 创建 空 对象
var obj = {};
console.log(obj);
//2.2 创建 带 初始 成员的 对象
var obj2 = {
//a.属性
age: 18,
gender: true,
//b.方法
sayHi: function () {
console.log('你好~~~');
},
beRich: function () {
console.log('睡觉，做梦~~~');
}
};
10js中的this关键字
//1. 函数内部 有两个 js基础阶段 要掌握的 特殊属性： arguments 和 this
// 本质上来说：他们俩 就是 函数内部的两个 特殊的 变量！！！
// arguments中 存的 是 实参列表：所在函数被调用时，传入的 数据，都自动存入了 arguments 属性中
// this 是在函数被调用时，保存了所处的 作用域！！！
// 【this口诀】 函数方法 在调用的时候，谁点.出的这个方法，方法中的this就是谁！！！
// this:就是函数内部的一个特殊的属性，本质上就是一个 变量而已
// this 到底是谁：调用方法时，谁点.出的方法，那么方法里的this就是谁！！！
//1.1 全局函数里的 this -- 特殊：所有的全局变量、全局函数 都是 属于 window对象（全局作用域）-----------
var loverName = '小静静';
function showLove() {
console.log('i love dog~~~');
console.log(this);
}
// 完整的调用语法，应该是 window.方法();
window.showLove();
console.log(window.loverName);
// 特殊：凡是 属于 window(全局作用域)的成员，调用时 都可以 省略 window.
showLove(); // --> js引擎 在执行代码时，会 自动改成： window.showLove();
// 所以，一般情况下，全局函数方法 里面的 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口诀】 函数方法 在调用的时候，谁.出的这个方法，方法中的this就是谁！！！----------------
// 下句代码中 ，sayHi 方法 里的 this 就是 stu 对象！！！
stu.sayHi();
console.log('window.stu.sayHi(); ----');
window.stu.sayHi();
11批量创建对象:工厂函数
// var stu1 = {
// name: '小白',
// age: 21,
// gender: true,
// sayHi: function () {
// console.log('我是小白~~');
// }
// };
// var stu2 = {
// name: '小黑',
// age: 23,
// gender: false,
// sayHi: function () {
// console.log('我是小黑~~');
// }
// };
//简单工厂模式 -- 批量生产 对象
//工厂函数：每次调用，内部都会 创建一个对象，并 设置好 属性的值（一般通过形参传入），最后返回 这个对象 给 调用者
// 1.用来创建 一个 学员对象 的 方法 --------------------------------
function createStuInfo(stuName, stuAge, stuGender) {
//1.1 创建对象 并设置 属性值
var obj = {
name: stuName,
age: stuAge,
gender: stuGender,
sayHi: function () {
console.log('我很喜欢你~~~~');
}
};
//1.2 将 对象 返回
return obj;
}
//2.使用工厂函数 创建2个对象----------------------------------------
var stu1 = createStuInfo('小白', 18, false);
console.log(stu1);
var stu2 = createStuInfo('小黑', 21, true);
console.log(stu2);
12批量创建对象:new和构造函数
//1. 工厂方式 批量创建对象 ---------------------------------------------
function createStuInfo(stuName, stuAge, stuGender) {
//1.1 创建一个 空对象
var obj = new Object();
//1.2 动态 的 为 空对象 添加 成员
obj.name = stuName;
obj.age = stuAge;
obj.gender = stuGender;
obj.sayHi = function () {
console.log('我很喜欢你~~~~');
};
//2. 将 添加了成员的 对象 返回
return obj;
}
//2.【构造函数】：就是用来 批量创建对象的一个种函数写法 -----------------------------------------
// 命名规范：首字母 都 大写 ，一般用 名词
// 用法：通过 new 关键字 来调用
function StuInfo(stuName, stuAge, stuGender) {
this.name = stuName;
this.age = stuAge;
this.gender = stuGender;
this.sayHi = function () {
console.log('我很喜欢你呀~~~小狗狗');
}
}
//【强调】构造函数 不是用来 直接 调用的！而是 给 new 来调用的！！！
// var a = StuInfo(); // var a = undefined;
//2.1 通过 new 关键字 来 调用 构造函数 -----------------------------------------
// 【看不到的细节】 new 关键字 做的四个事情：
// 2.1 偷偷的 创建一个 空对象
// 2.2 偷偷的 将 空对象 传给 被调用的 构造函数 里的 this
// 2.3 调用 构造函数，调用完后，空对象里 就有了 各种 属性 和 方法
// 2.4 返回 对象
var stu1 = new StuInfo('小狗狗', 1, false);
var stu2 = new StuInfo('小猫猫', 2, true);
stu1.sayHi();
console.log(stu1);
console.log(stu2);
13模拟new关键字
function StuInfo(stuName, stuAge, stuGender) {
this.name = stuName;
this.age = stuAge;
this.gender = stuGender;
this.sayHi = function () {
console.log('我很喜欢你呀~~~小狗狗');
}
}
//---------------模拟 new 关键字的 4个事情！！！！-----------
// 【了解就可以，后面 js高级会详细讲解~~！！！！！】
function myNew() {
// 【看不到的细节】 new 关键字 做的四个事情：
// 2.1 偷偷的 创建一个 空对象
var obj = {
flag: '我是空对象，不要理我~~~'
};
// 2.2 偷偷的 将 空对象 传给 被调用的 构造函数 里的 this
// 2.3 调用 构造函数，调用完后，空对象里 就有了 各种 属性 和 方法
StuInfo.call(obj, '小白', 18, false);
// 2.4 返回 对象
return obj;
}
var o = myNew();
