一、对象
(1)创建对象的方法
- 对象字面量创建: 声明一个变量,将对象赋给变量这种方式叫对象字面量
- 构造函数创建: 这里的构造函数分为系统自带的构造函数和自定义构造函数
// 字面量创建对象
var obj = {
name: '张三',
sex: 'male'
}
// 内置构造函数创建对象
var obj = new Object();
(2)对象的写法
- 对象里面的属性以键值对的方式来书写
- 对象里面的函数叫方法
var teacher = {
name: '张三',
age: 32,
sex: 'male',
height: 176,
weight: 130,
teach: function () {
console.log('I am taching JavaScript');
},
smoke: function () {
console.log('I am smoking');
},
eat: function () {
console.log('I am having a dinner');
}
}
(3)对象的增删改查
console.log(teacher.teach); // 查询属性
teacher.teach(); // 调用方法
teacher.address = '北京'; // 增加属性
teacher.height = 180; // 修改(重新赋值)
delete teacher.address; // 删除(delete是对象删除功能的一个关键字)
(4)案例
// 1.每抽一根烟长一斤,每吃一口饭减一斤
var teacher = {
name: '张三',
age: 32,
sex: 'male',
height: 176,
weight: 130,
teach: function () {
console.log('I am taching JavaScript');
},
smoke: function () {
this.weight--; //this相当于teacher,在对象里面this代表对象本身
console.log(this.weight);
},
eat: function () {
this.weight++;
console.log(this.weight);
}
}
// 2.学生会议出席名单
// 方法一
var attendance = {
students: [],
join: function (name) {
this.students.push(name)
},
leave: function (name) {
for (var i = 0; i < this.students.length; i++) {
if (this.students[i] === name) {
this.students.splice(i, 1)
}
}
}
}
attendance.join('小管')
attendance.join('小白')
attendance.leave('小白')
console.log(attendance.students);
// 方法二
var attendance = {
students: [],
total: 6,
join: function (name) {
this.students.push(name)
if (this.students.length >= this.total) {
console.log(name + '到课,学生已到齐');
} else {
console.log(name + '到课,学生未到齐');
}
},
leave: function (name) {
if (this.students.indexOf(name) !== -1) {
this.students.splice(this.students.indexOf(name), 1)
}
console.log(name + '早退');
},
classOver: function () {
this.students = [];
console.log('已下课');
}
}
attendance.join('张三')
attendance.join('李四')
attendance.join('王五')
attendance.join('周六')
attendance.join('吴七')
attendance.join('赵八')
attendance.leave('吴七')
attendance.classOver()
console.log(attendance.students);
二、构造函数
(1)系统自带的构造函数
通过new Object()实例化出来一个对象
var obj = new Object(); //等同对象字面量(new可以实例化一个对象)
obj.name = '张三';
obj.sex = '男生';
console.log(obj);
问题:
- 对象和构造函数的区别:
对象是通过实例化构造函数而得出的对象实例。 - 自带的构造函数实例化出来的一个对象(new object())和对象字面量创建的对象有什么区别?
没有任何区别,完全相等(系统的用的不多)
(2)自定义构造函数
命名方式: 大驼峰(为了区分普通函数)
function Teacher() {
this.name = '张三';
this.sex = '男士';
this.smoke = function () {
console.log('I am smoking');
}
}
var teacher = new Teacher();
问题:
- this指向的是谁?
没有实例化之前是指向的window,实例化了之后指向实例化对象
三、实例化
(1)实例化同一个构造函数
// 示例1
function Teacher() {
this.name = '张三';
this.sex = '男士';
this.smoke = function () {
console.log('I am smoking');
}
}
var teacher1 = new Teacher();
var teacher2 = new Teacher();
teacher1.name = '李四'
console.log(teacher1, teacher2);
// teacher1:Teacher { name: "李四", sex: "男士", smoke: ƒ }
// teacher2:Teacher { name: "张三", sex: "男士", smoke: ƒ }
// 构造函数实例化出来的多个对象相互之间是不影响的
// 示例2
function Teacher() {
this.name = '张三';
this.sex = '男士';
this.weight = 130;
this.smoke = function () {
this.weight--;
console.log(this.weight);
}
this.eat = function () {
this.weight++;
console.log(this.weight);
}
}
var t1 = new Teacher();
var t2 = new Teacher();
t1.smoke(); // 129
t1.smoke(); // 128
console.log(t2.weight); // 130
// 再次印证构造函数实例化出来的多个对象相互之间是不影响的
构造函数实例化出来的多个对象相互之间是不影响的(除了原形)
(2)传统传参
function Teacher(name, sex, weight, course) {
this.name = name;
this.sex = sex;
this.weight = weight;
this.course = course;
this.smoke = function () {
this.weight--;
console.log(this.weight);
}
this.eat = function () {
this.weight++;
console.log(this.weight);
}
}
var t1 = new Teacher('张三', '男', '145', 'JavaScript');
var t2 = new Teacher('李四', '女', '90', 'HTML')
(3)对象传参
// var opt = {
// name:123,
// sex:123
// }
function Teacher(opt) { // option选项、设置项,它相当于一个对象
this.name = opt.name; // opt对象的名字
this.sex = opt.sex; // opt对象的性别
this.weight = opt.weight; // opt对象的体重
this.course = opt.course; // opt对象的课程
this.smoke = function () {
this.weight--;
console.log(this.weight);
}
this.eat = function () {
this.weight++;
console.log(this.weight);
}
}
var t1 = new Teacher({
name: '张三',
sex: '男',
weight: 145,
course: 'JavaScript'
});
var t2 = new Teacher({
name: '李四',
sex: '女',
weight: 90,
course: 'HTML'
});
// 这样写就好配置好维护,就是知道每个参数对应的属性是什么
四、作业
1.写一个构造函数,接收数字类型的参数,参数数量不定,完成参数相加和相乘的功能
// 方法1
function Compute() {
var args = arguments,
res;
this.plus = function () {
res = 0;
for (var i = 0; i < args.length; i++) {
res += args[i]
}
console.log(res);
}
this.times = function () {
res = 1;
for (var i = 0; i < args.length; i++) {
res *= args[i]
}
console.log(res);
}
}
var compute = new Compute(2, 4, 6, 8);
compute.plus()
compute.times()
// 方法2
function Compute() {
var args = arguments,
res;
this.plus = function () {
res = 0;
loop('plus', res);
}
this.times = function () {
res = 1;
loop('times', res);
}
function loop(method, res) {
for (var i = 0; i < args.length; i++) {
var item = args[i]
if (method === 'plus') {
res += item;
} else if (method === 'times') {
res *= item;
}
}
console.log(res);
}
}
var compute = new Compute(2, 4, 6, 8);
compute.plus()
compute.times()
// 方法3
function Compute() {
var res = 0;
this.plus = function () {
loop('plus', arguments, res)
}
this.times = function () {
res = 1;
loop('times', arguments, res)
}
function loop(method, args, res) {
for (var i = 0; i < args.length; i++) {
var item = args[i]
if (method === 'plus') {
res += item;
} else if (method === 'times') {
res *= item;
}
}
console.log(res);
}
}
var compute = new Compute();
compute.plus(1, 2, 3, 4)
compute.times(1, 2, 3, 4)
2.写一个构造车的函数,课设置车的品牌,颜色,排量,在写一个构造消费者的函数,设置用户的名字,年龄,收入,通过选择的方法实例化改用户喜欢的车,再设置车的属性。
function Car(opt) {
this.brand = opt.brand;
this.color = opt.color;
this.displacement = opt.displacement;
}
function Person(opt) {
this.name = opt.name;
this.age = opt.age;
this.income = opt.income;
this.selectCar = function () {
var myCar = new Car(opt.carOpt)
console.log(this.name + '挑选了一辆排量' + myCar.displacement + '的' + myCar.brand);
}
}
var john = new Person({
name: 'john',
age: 28,
income: '20k',
carOpt: {
brand: 'Benz',
color: '红色',
displacement: '2.0'
}
})
john.selectCar()