JavaScript学习笔记八

47 阅读6分钟

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'}