JS闭包复习、对象、构造函数、实例化
目录
闭包复习
对象
构造函数、实例化
一、闭包复习
- 闭包是内部函数可以操作访问外部变量，如果内部函数有操作外部变量的方法且内部函数被返回出去并被保存，那这个内部函数的作用域链内就一直存着外部函数的AO，所以可以一直操作或访问
- 做闭包面试题时，把题和图在心里面想想，理清作用域和作用域链
- 做项目，封装，模块化，闭包都很有用
二、对象
let teacher = {
name: "张三",
age: 32,
sex: "male",
height: 180,
weight: 130,
teach() {
console.log("I am teaching JavaScript");
}, // 在对象里叫方法 在外部叫函数
smoke() {
console.log("I am smoking");
},
eat() {
console.log("I am having a dinner");
},
};
// 给对象添加属性
teacher.address = "成都";
// 给对象添加方法
teacher.drink = function () {
console.log("I am drinking beer");
};
// 改对象属性
teacher.height = 185;
// 改对象方法
teacher.teach = function () {
console.log("I am teaching HTML");
};
// 删除对象属性
delete teacher.address;
// 删除对象方法,删除对象方法后面不能加括号，加括号就代表执行这个方法（面试题）
delete teacher.smoke;
-
对象语法：
let obj = {}或者let obj = new Object()- 直接使用
obj.xxx就能访问或修改obj对象的xxx属性
三、构造函数、实例化
new关键字 ，首字母大写- 系统自带的构造函数有
new Array、new Object、new Function
let obj = {
name: "张三",
sex: "male",
};
obj.name = "李四";
// 叫对象字面量或者叫对象直接量
//
// 构造函数
// 系统内自带的构造函数
var obj1 = new Object(); // 对象字面量相等的
obj1.name = "张三";
obj1.sex = "男士";
自定义构造函数
- 项目中大量使用，模块化、组件化都需要自定义构造函数
- 命名方式采用大驼峰方式，和普通函数做区分
- 当用自定义构造函数
new了一个对象，这个操作叫做实例化
// 自定义构造函数
// 大驼峰 首单词首字母大写
function Teacher() {
this.name = "张三";
this.sex = "男士";
this.weight = 130;
this.smoke = function () {
this.weight--;
console.log("I am smoking");
};
this.eat = function () {
this.weight++;
console.log("I am having a dinner");
};
}
// this是谁用就指向谁
// 实例化构造函数才能构造出对象的实例 new了以后
let teacher1 = new Teacher();
let teacher2 = new Teacher();
teacher1.name = "李四";
// console.log(teacher1, teacher2);
- 自定义函数中设置形参
options，这个options是个对象
// 构造函数传参
function Teacher(options) {
this.name = options.name;
this.sex = options.sex;
this.weight = options.weight;
this.course = options.course;
this.smoke = function () {
this.weight--;
console.log(this.weight);
};
this.eat = function () {
this.weight++;
console.log(this.weight);
};
}
let t1 = new Teacher({
name: "张三",
sex: "男",
weight: 145,
course: "JavaScript",
});
let t2 = new Teacher({
name: "李四",
sex: "女",
weight: 90,
course: "HTML",
});
console.log(t1, t2);
四、课后习题
习题1
//写一个构造函数，接受数字类型的参数，参数数量不定，完成参数相加和相乘的功能
function Num(options) {
this.arr = []; // 初始化一个新数组方便后续操作
this.Num1 = 0;
this.Num2 = 1;
options.forEach((option) => {
if (typeof option === "number") {
// 判断实参传的是不是数字类型 如果是数字类型才push进arr数组
this.arr.push(option);
}
});
this.add = function () {
this.arr.forEach((num) => {
this.Num1 += num;
});
return this.Num1;
};
this.mul = function () {
this.arr.forEach((num) => {
this.Num2 *= num;
});
return this.Num2;
};
}
let num2 = new Num([1, 4, 5, 8, 9]);
console.log(num2.add());
console.log(num2.mul());
let num3 = new Num(["字符串", 2, "1", "2", 4]);
console.log(num3);
习题1评讲
// 第一课评讲
function Compute() {
var args = arguments; // 把接受的实参存进变量里
res = 0; // 声明一个变量存计算结果
this.plus = function () {
loop("add", res);
};
this.times = function () {
res = 1;
loop("mul", res);
};
function loop(method, res) {
for (var i = 0; i < args.length; i++) {
let item = args[i];
if (method === "add") {
res += item;
} else if (method === "mul") {
res *= item;
}
}
console.log(res);
}
}
let compute = new Compute(2, 4, 6);
compute.plus();
compute.times();
习题2
//写一个构造车的函数，课设置车的品牌，颜色，排量
//再写一个构造消费者的函数，设置用户的名字，年龄，收入，通过选车的方法实例化该用户喜欢的车，再设置车的属性。
function Car(options) {
this.brand = options.brand;
this.color = options.color;
this.power = options.power;
}
function Parson(options) {
this.name = options.name;
this.age = options.age;
this.income = options.income;
this.car = function (options) {
let seCar = new Car({
brand: options.brand,
color: options.color,
power: options.power,
});
return seCar;
};
}
let p1 = new Parson({
name: "白境",
age: "20",
income: 20000,
car() {},
});
console.log(p1);
p1.car({
brand: "奔驰",
color: "白色",
power: "3.0",
});
console.log(
p1.car({
brand: "奔驰",
color: "白色",
power: "3.0",
})
);
习题2评讲
//第二题评讲
function Car(options) {
this.brand = options.brand;
this.color = options.color;
this.power = options.power;
}
function Person(options) {
this.name = options.name;
this.age = options.age;
this.income = options.income;
this.selectCar = function () {
let myCar = new Car(opt.carOpt);
console.log(
this.name +
"挑选了一辆排量为" +
myCar.power +
"的" +
myCar.color +
myCar.brand
);
};
}
let jack = new Person({
name: "杰克",
age: 24,
income: "15k",
carOpt: {
brand: "Benz",
color: "白色",
power: "2.4",
},
});
jack.selectCar();
\
