eight
一:对象
实现 对象 的最基本的增删改查方法
以下代码为上述内容的实验模板
var teacher = {
name: '张三',
age: 28,
sex: 'male',
height: 178,
weight: 145,
teach: function(){
console.log('I am teaching JavaScript');
},
smoke: function(){
console.log('I am smokeing');
},
eat: function(){
console.log('I am having a dinner');
}
}
1.1 对象的增加操作
观察下面的代码,由此可见: 都是通过赋值的方式来增加。
//给对象增加一个键值对
teacher.address = '北京';
console.log(teacher.address);
//Print Result:北京
//给对象增加一个方法
teacher.say = function(){
console.log('He\'s talking about Javascript');
}
teacher.say();
//Print Result:He's talking about Javascript
1.2 对象的删除操作
观察下面的代码,由此可见: 都是通过写入关键字
delete的方式来删除对象中的成员。 需要注意的是,删除方法时,别在方法名后面加上执行符号(),否则就是执行该方法了。
//删除对象中的键值对
delete teacher.name;
console.log(teacher.name);
//Print Result:undefined
//删除对象中的方法
delete teacher.say;
console.log(teacher.say);
//Print Result:undefined
1.3 对象的修改操作
观察下面的代码,由此可见: 都是通过重新赋值的方式来改变。
//修改对象中键值对中的值
teacher.name = '李四';
console.log(teacher.name);
//Print Result:李四
//修改对象中的方法
teacher.smoke = function(){
console.log('He does\'n want to smoke now.');
}
console.log(teacher.smoke);
//Print Result: smoke 方法的函数体
1.4 对象的查看操作
观察下面的代码,由此可见: 除开查看整个对象,是使用对象名外,其余都是使用
.语法来查看。
//直接打印(查看)整个对象
console.log(teacher)
/**Print Result:
* {
* name: '张三',
* age: 28,
* sex: 'male',
* height: 178,
* weight: 145,
* teach: [Function: teach],
* smoke: [Function: smoke],
* eat: [Function: eat]
*/}
//已知键名,查看键值
console.log(teacher.name)
//Print Result: 张三
//已知方法名,查看方法的函数体
console.log(teacher.smoke)
//Print Result:
/**ƒ (){
* console.log('I am smokeing');
* }
*/
二:this 初步认识
在对象中使用
this关键字,所指的就是对象本身。
代码范例
var obj = {
name: '张三',
age: 23,
height: 180,
weight: 132,
print: function(){
console.log(this.name + '的身高是:' + this.height + '。') //这里的this就是对象的本身,也就是 obj。
}
}
obj.print();
//Print Result:张三的身高是:180。
三:学习数组的新方法
indexOf获取数组中元素(成员)的下标;
splice添加或删除数组中的元素
var arr = ['a', 'b', 'c', 'd', 'e'];
//获取数组中元素的下标
var idx = arr.indexOf('c');
console.log(idx);
//Print Result:2
//使用splice方法。
//第一个参数:删除数组中指定下标的元素;
//第二个参数:要删除的元素数量,包含自身;
arr.splice(idx, 1);
console.log(arr);
//Print Result:[ 'a', 'b', 'd', 'e' ]
代码范例:学生出勤管理
var attendance = {
students: [],
total: 6,
join: function(name){
this.students.push(name);
if(this.students.length === this.total){
console.log(this.students + '学生已到齐。')
}else{
console.log(name + ',已到课。')
}
},
leave: function(name){
var idx = this.students.indexOf(name);
if(idx !== -1){
this.students.splice(idx, 1);
console.log(name + ',早退!')
console.log('当前学生到课名单' + this.students + '。');
}
},
classOver: function(){
this.students = [];
console.log('已下课');
}
}
//执行一
attendance.join('李明');
attendance.join('张静');
attendance.join('王强');
attendance.join('赵梅');
attendance.join('周文');
//Print Result One:
//李明已到课。
//张静已到课。
//王强已到课。
//赵梅已到课。
//周文已到课。
//执行二,衔接执行一。
attendance.join('吴丽');
//Print Result two:
//李明已到课。
//张静已到课。
//王强已到课。
//赵梅已到课。
//周文已到课。
//吴丽已到课。
//李明,张静,王强,赵梅,周文,吴丽:学生已全部到齐。
//执行三,衔接执行一与二。
attendance.leave('王强');
//Print Result three:
//李明已到课。
//张静已到课。
//王强已到课。
//赵梅已到课。
//周文已到课。
//吴丽已到课。
//李明,张静,王强,赵梅,周文,吴丽:学生已全部到齐。
//王强,早退!
//当前学生到课名单:李明,张静,赵梅,周文,吴丽。
//执行,衔接执行一与二和三。
attendance.classOver();
//Print Result four:
//李明已到课。
//张静已到课。
//王强已到课。
//赵梅已到课。
//周文已到课。
//吴丽已到课。
//李明,张静,王强,赵梅,周文,吴丽:学生已全部到齐。
//王强,早退!
//当前学生到课名单:李明,张静,赵梅,周文,吴丽。
//已下课
四:构造函数
创建对象方法一: 声明一个变量,将对象赋值给变量,这种方式也叫对象字面量(直接量)。
代码范例-创建对象方法一:
var obj = {
name: '张三',
age: 28,
say: function(){
console.log('hello world');
}
}
创建对象的方法二分之一: 用系统自带的构造函数,通过
new关键字,实例化一个对象。与对象字面量(直接量)相比,是相等的,只是创建方式不一样而已并无区别。 对象与构造函数是两个不同的内容,对象是通过实例化构造函数而创建的。 构造函数是可以自定义对象的属性和方法,同时系统自带的构造函数,在日常开发中,并不经常使用。
代码范例-创建对象的方法二分之一:
var obj = new Object();
obj.name = '张三';
obj.age = 28;
obj.say = function(){
console.log('hello world');
}
console.log(obj);
//Print Result:
//{name: '张三', age: 28, say: ƒ}
创建对象的方法二分之二: 自定义构造函数:与书写普通函数没有太大的区别,不同之处 函数名首字母大写(约定俗成),也就是大驼峰写法; 函数内的语句是使用的是关键字
this是指向该构造函数实例化后对象的本身; 同时,this在自定义构造函数没有实例化时,并没有生成;this在没有实例化时,指向的是window; 只有在new实例化后才指向该构造函数实例化后对象的本身。问:自定义构造函数中,一定要用大驼峰写法吗?是否可以用小驼峰或者下划线等写法呢?
答:这个只是约定俗成,是为了是跟普通函数表面看起来区分而已,至于其它写法都可以,但不建议。
应用场景:模块、插件、组件化,都必须使用自定义构造函数,同时,在日常开发中,会大量使用自定义构造函数。
代码范例-创建对象的方法二分之二:
function Teacher(){
this.name = '张三';
this.age = 28;
this.say = function(){
console.log('hello world');
}
}
var teacher = new Teacher();
console.log(teacher);
//Print Result:
//Teacher {name: '张三', age: 28, say: ƒ}
五:自定义构造函数实例化初步认识
通过构造函数,实例化两个内容相同,但名称不一样的对象
function Teacher(){
this.name = '张三';
this.age = 28;
this.say = function(){
console.log('hello world');
}
}
//通过构造函数,实例化两个内容相同,但名称不一样的对象
var t1 = new Teacher();
var t2 = new Teacher();
console.log(t1);//Teacher {name: '张三', age: 28, say: ƒ}
console.log(t2);//Teacher {name: '张三', age: 28, say: ƒ}
通过对象点语法
.语法改变 t1 对象 name 属性的值观察到 t2 对象 name 属性的值并没有发生改变
由此可见,实例化多个对象,每个对象都是完全独立,互不干扰。
function Teacher(){
this.name = '张三';
this.age = 28;
this.say = function(){
console.log('hello world');
}
}
var t1 = new Teacher();
var t2 = new Teacher();
t1.name = '李四';
console.log(t1);//Teacher {name: '李四', age: 28, say: ƒ}
console.log(t2);//Teacher {name: '张三', age: 28, say: ƒ}
自定义构造函数 ---> 传参
由此可见,自定义构造函数传参与普通函数传参书写并没有任何不同,如果参数太多,书写其它就很繁琐。
function Teacher(name, age, course){
this.name = name;
this.age = age;
this.course = course;
}
var t1 = new Teacher('张三', 28, 'JavaScript');
var t2 = new Teacher('李四', 25, 'HTML');
console.log(t1);//Teacher {name: '张三', age: 28, course:'JavaScript'}
console.log(t2);//Teacher {name: '李四', age: 25, course:'HTML'}
改造:自定义构造函数 ---> 传参
对象传参 --- 最常见的书写方法。
一般书写:option(选项),简写为opt。
function Teacher(opt){
this.name = opt.name;
this.age = opt.age;
this.course = opt.course;
}
var t1 = new Teacher({
name: '张三',
age: 28,
course: 'JavaScript'
});
var t2 = new Teacher({
name: '李四',
age: 25,
course: 'HTML'
});
console.log(t1);//Teacher {name: '张三', age: 28, course:'JavaScript'}
console.log(t2);//Teacher {name: '李四', age: 25, course:'HTML'}