<script>
    function getSum(){
            // num 在函数内部，而函数内部是函数作用域，所以 sum是局部变量
            const num = 10;
            return sum;
    }
    //  因此 在外部无法直接访问 sum，会报错
    console.log("sum为",sum); // ReferenceError: sum is not defined
</script>

for (let i = 0; i < 10; i++) {
	// {} 内部成为 块作用域, i 是局部变量，外部不能访问
	// console.log(i);
}
console.log(i); //  Uncaught ReferenceError: i is not defined

function fun() {
	let o1 = {};
	let o2 = {};
	// 下面的 o1,o2循环引用，可能导致内存泄露！
	o1.a = o2;
	o2.a = o1;
	return "引用计数法无法回收";
}
fun(); // 调用

function outer(params) {
	const a = 1;
	function inner(params) {
		console.log(a);
	}
	inner();
}
outer();

function outer() {
	const a = 1;
	function inner() {
		console.log(a);
	}
	// 返回外部函数中内部函数 inner
	return inner;
}
const a = outer();
a(); // 外部调用 inner(),访问函数内变量

// -----------------1.不使用闭包-----------------
let i = 0; // 全局作用域的变量容易被修改
function counter() {
	i++;
}
// -----------------2.使用闭包-----------------
/**
     注意：此时 i 虽然是 函数内的局部变量，但是但函数执行完后 i 并不会被回收。
    因为 counter返回 fun的引用，f 指向了 fun，fun中的 i 可以被“找到”，不会被回收
    但是这样会导致 i 一直不回收，可能会导致 内存泄露
*/
function counter() {
	let i = 0;
	function fun() {
		i++;
		console.log(`函数被调用了${i}次`);
	}
	return fun;
}
const f = counter();

// 1. 变量提升：把所有var 声明的变量的声明提到 【当前作用域】的最前面
console.log(num, " 件"); // undefined 件
var num = 10;
// 上述代码相当于
/**
        var num;
        console.log(num, "件"); // 因此num声明但位赋值，默认值为 undefined
        num = 10;
        */
function fun() {
	console.log(num, " 件"); // undefined 件
	var num = 10;
}
fun();

// 1. 函数提升：只提升函数声明，不提升调用
fun(); // 在函数声明前调用函数
function fun() {
	console.log("函数被调用了");
}
/**
上述的代码相当于

function fun() {
     console.log("函数被调用了");
}

fun(); // 在函数声明前调用函数
*/

// 函数表达式
fun2();
var fun2 = function () {
	console.log("函数表达式"); //Uncaught TypeError: fun2 is not a function
};
/*
上述的代码由于是 函数表达式，存在 变量的提升，
因此相当于在 fun2赋值之前调用fun2(),此时fun2 为 undifiend，因此 fun2 不是函数，会报错
*/

function getSum() {
	// arguments 伪数组，仅存在函数中，可以获取传给函数的所有实参
	console.log(arguments);
	let sum = 0;
	for (let i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	console.log("sum: ", sum); // sum: 15
}
getSum(1, 2, 3, 4, 5);

function getSum(a, ...rest) {
	// rest 是真数组，可接受所有剩余的参数
	console.log("rest: ", rest);
	let sum = 0;
	for (let index = 0; index < rest.length; index++) {
		sum += rest[index];
	}
	console.log("sum: ", sum); // sum: 15
}
getSum(1, 2, 3); // 剩余此参数是 [2,3]
getSum(1, 2, 3, 4, 5); // 剩余此参数是 [2,3,4,5]

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3
// 1. 求数组元素最大值,最小值
const maxValue = Math.max(...arr);
const minValue = Math.min(...arr);
console.log("maxValue: ", maxValue); // maxValue:  3
console.log("minValue: ", minValue); // minValue:  1
// 2. 合并数组
const arr2 = [3, 4, 5];
const arr3 = [...arr, ...arr2];
console.log("arr3: ", arr3); //  [1, 2, 3, 3, 4, 5]

// 普通函数
const fn = function () {
	console.log("普通函数");
};
// 1. 箭头函数：一般形式
// 箭头函数属于表达式函数，因此不存在 函数提升
const fn2 = (a, b, c) => {
	console.log("箭头函数");
};
// 3. 箭头函数：形参只有一个，则可省略参数 '()'
const fn3 = (a) => {
	console.log("a:", a);
};
// 4. 箭头函数：函数体只有一个语句，则可省略 '{}'
const fn4 = (b) => console.log("b:", b);
// 5. 箭头函数：函数体只有一个语句，且是 return 返回语句，则可以省略 return ,省略 '{}'
const fn5 = (c) => c++;
// 6. 箭头函数：返回值可以是一个对象
const fn6 = (name) => ({ username: name });

// 利用箭头函数求和
// 箭头函数中没有 arguments ，只有 剩余参数 ...rest
const getSum = (...rest) => {
	let sum = 0;
	for (let index = 0; index < rest.length; index++) {
		sum += rest[index];
	}
	console.log("sum: ", sum); // sum:  87
};
getSum(1, 1, 2, 3, 5, 8, 13, 21, 33);

// -----------------1. 普通函数的 this-----------------
console.log(this); // window
function fn() {
	console.log(this); // window
}
windows.fn();
const obj = {
	name: "foo",
	sayHi: function () {
		console.log(this); // obj
	},
};
obj.sayHi();
// -----------------2. 箭头函数的 this-----------------
const fn1 = () => {
	// 箭头函数的 this 指向上一层作用域的 this
	console.log(this); // window
};
fn1();
// 对象方法的箭头函数
const obj2 = {
	name: "foo",
	sayHi: () => {
		// 箭头函数的 this 指向上一层作用域的 this
		console.log(this); // window
	},
};
obj2.sayHi();
// 对象方法的箭头函数
const obj3 = {
	name: "foo",
	sayHi: function () {
		let i = 10;
		// 当前作用域的 this 是 obj3
		const cont = () => {
			// 箭头函数的 this 指向上一层作用域的 this
			console.log(this); // obj3
		};
	},
};
obj3.sayHi();

// 1. 数组解构：基本使用
const arr = [100, 200, 300];
const [max, min, avg] = arr;
console.log("max: ", max); // max:  100
console.log("min: ", min); // min:  200
console.log("avg: ", avg); // avg:  300
// 2. 数组解构：交换变量的值
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(`a是${a},b是${b}`); // a是2,b是1

// 1. 立即执行函数需要添加 ';'
(function () {})();

// 2. 使用数组的时候
// const arr = [1, 2, 3];
const str = "foo"[
	// const str = 'foo'; // 使用封号
	(1, 2, 3)
].map(function (item) {
	console.log("item:", item); // Uncaught TypeError: Cannot read properties of undefined (reading 'map')
});
/*
    如果上述代码 const str = 'foo' 后 无 ';'，则代码解析会成为
    const str = foo[1,2,3],map...  这样的结构，而没有 foo[1,2,3] 这样的数组，因此没有
    map()方法，就会出错
*/

// 1. 赋值元素数量 大于 解构元素数量，则未赋值元素值为 undefine
const [a, b, c, d] = [1, 2, 3];
console.log(a, b, c, d); // 1 2 3 undefined

// 2. 赋值元素数量 小于 解构元素数量，则有多余的
// 3. 使用剩余参数接收剩余的值
const [x, y, ...rest] = [4, 5, 6, 7];
console.log("x, y: ", x, y); // x, y:  4 5
console.log("rest: ", ...rest); // rest:  6 7

// 4. 为了防止因 出现（1）的情况，可以给赋值元素设置 默认值
const [m, n, p = 30, q = 40] = [10, 20];
console.log("m,n: ", m, n); // m,n:  10 20
console.log("p ", p); // p  30
console.log("q ", q); // q  40

// 5. 按需导入（赋值)解构元素
// 比如下面的 l 不是 '3' 而是 '4' ，因为空出了一个元素
const [h, j, , l] = [1, 2, 3, 4];
console.log("h,j: ", h, j); // h,j:  1 2
console.log("l: ", l); // l:  4

// 6. 支持 多维数组 的数组解构
const arr = [1, 2, [3, 4]];
const [k, r, s] = arr;
console.log("k,r: ", k, r); //  k,r:  1 2
console.log("s: ", s); // s:  [3, 4]
const [u, v] = s;
console.log("u,v: ", u, v); // u,v:  3 4
/**
    上述 s 表示 [3,4] 即原数组第三个元素。然后在对 s 解构
    即 [u,v] = s，u为3,v为4
    也可以一步到位
    const [k,r,[s,t]] = arr 
    k为1,r为2,s为3,t为4
*/

// 1. 直接解构赋值给同名属性变量
const { name, age } = { name: "foo", age: 18 };
console.log("name: ", name, "age: ", age); // name:  foo age:  18

// 2. 赋值非同属姓名变量
const { name: uname, age: uage } = { name: "bar", age: 20 };
console.log("uname: ", uname, ",uage: ", uage); // uname:  bar ，uage:  20

// 3. 解构数组对象（数组元素是对象）
const pig = [{ uname: "peiqi", uage: 15 }];

const [{ uname: name2, uage: age2 }] = pig;
console.log("name2: ", name2, ",age2: ", age2); // nname2:  peiqi ,age2:  15

// 4. 多级对象解构
const pigs = {
	name: "peipi",
	family: {
		mother: "mompig",
		father: "pappig",
		brother: "George",
	},
	age: 6,
};
const {
	family: { brother },
} = pigs;
console.log("brother: ", brother); // brother:  George

// 使用foreach遍历数组
const arr = ["red", "green", "blue"];
const result = arr.forEach((item, index) => {
	console.log("item: ", item, "index: ", index);
});
/*
         item:  red index:  0
         item:  green index:  1
         item:  blue index:  2
*/

const arr = [10, 20, 30, 40];
const result = arr.filter(function (item, index) {
	return item > 10;
});
console.log("result: ", result); // result:  [20, 30, 40]

// 1. -----------------传统创建对象的方式：对象字面量-----------------
const o = {
	name: "foo",
};
console.log("o: ", o); // o:  {name: 'foo'}
// 2. -----------------创建对象：使用 new Object()-----------------
const obj = new Object();
console.log("obj: ", obj); // obj:  {}
obj.name = "foo";
console.log("obj: ", obj); // obj:  {name: 'foo'}
// 创建对象：使用 new Object(),并传入字面量对象
const obj2 = new Object({ name: "foo" });
console.log("obj2: ", obj2); // obj2:  {name: 'foo'}

/*
    3.-----------------构造函数-----------------
        - 构造函数：是一种特殊的函数，主要用来初始化对象
        - 使用场景：常规的`{...}`语法允许创建一个对象。比如我们创建了foo的对象，继续创建bar的对象还需要重新写一
        遍，此时可以通过构造函数来快速创建多个类似的对象。
*/
// 1.定义构造函数
// 构造函数名称首字母大写，如 Pig
function Pig(name, age) {
	this.name = name;
	this.age = age;
	// 构造函数内无需书写 return 语句，返回值即新创建的对象
}
// 2.调用构造函数实例化对象
const peiqi = new Pig("佩奇", 6);
console.log("peiqiL: ", peiqi); // peiqiL:  Pig {name: '佩奇', age: 6}

// 案例：
function Goods(name, price, count) {
	this.name = name;
	this.price = price;
	this.count = count;
}
const m1 = new Goods("小米", 1000, 20);
console.log("m1: ", m1); // m1:  Goods {name: '小米', price: 1000, count: 20}
const hw = new Goods("华为", 3999, 59);
console.log("hw: ", hw); // hw:  Goods {name: '华为', price: 3999, count: 59}

// 实例成员&静态成员
// -----------------1. 实例成员-----------------
function Pig(name) {
	this.name = name;
}
const peiqi = new Pig("佩奇");
const george = new Pig("乔治");
// 给实例对象 添加 实例成员属性
peiqi.name = "小猪佩奇";
// 给实例对象 添加 实例成员方法
peiqi.sayHi = () => {
	console.log("hi~~~~~~~~,我是 peiqi的 sayHi 实例成员方法");
};
console.log("peiqi： ", peiqi); // peiqi：  Pig {name: '小猪佩奇', sayHi: ƒ}
// 使用同一构造函数创建的对象是不同的对象，彼此独立，互不影响
console.log("peiqi === george：", peiqi === george); // peiqi === george： false

// -----------------2. 静态成员-----------------
// (1) 静态成员只能由构造函数访问，（2）静态方法中的 this 指向 构造函数
function Dog(name) {
	this.name = name; // 静态成员属性
}

// 给构造函数 添加 静态成员属性
Dog.name = "小黄";
// 给构造函数 添加 静态成员方法
Dog.bark = function () {
	console.log("this: ", this); // this 就是 构造函数
	/*
                this:  ƒ Dog(name) {
                    this.name = name; // 静态成员属性
                }
            */
	console.log("汪汪汪~~ 🐕"); // 汪汪汪~~ 🐕
};
Dog.bark();
console.log("Dog: ", Dog);
/*
         输出结果
                Dog:  ƒ Dog(name) {
                    this.name = name; // 静态成员属性
                }
        */

// 底层：将基本数据类型 包装为 引用类型
// 1. string 到 String
const str = "foo";
// 底层： const str = String('foo');
// 2. number 到 Number
const num = 12;
// 底层：const num = Nubmer(12);

// 1. Object.keys() 获取对象中所有的 key，并放到数组返回
const obj = { name: "foo", age: 12, sex: "female" };
const keyArr = Object.keys(obj);
console.log("keyArr: ", keyArr); // keyArr:  (3) ['name', 'age', 'sex']

// 2. Object.values() 获取对象中所有的 value，并放到数组返回
const obj2 = { name: "foo", age: 12, sex: "female" };
const valueArr = Object.values(obj);
console.log("valueArr: ", valueArr); //valueArr:  (3) ['foo', 12, 'female']

// 3. Object.assign(target,source) 将指定源对象的 全部键值对 拷贝到 目标对象（深拷贝）
const o1 = {}; // 空对象（目标对象）
const o2 = { name: "foo", age: 12, sex: "female" }; // 源对象
Object.assign(o1, o2);
console.log("o1: ", o1); // o1:  {name: 'foo', age: 12, sex: 'female'}

// 方式1
arr.reduce(function () {}, 初始值);
// 方式2
arr.reduce(function (上一次值, 当前值) {}, 初始值);

// 1. 方式1： 没有初始值
const arr = [1, 3, 5, 7, 9];
const total = arr.reduce(function (pre, current) {
	return pre + current;
});
console.log("total: ", total); // total:  25
// 2. 方式2： 有初始值
const total2 = arr.reduce(function (pre, current) {
	return pre + current;
}, 10);
console.log("total2: ", total2); // total2:  35

const arr = [
	{
		name: "张三",
		salary: 10000,
	},
	{
		name: "李四",
		salary: 12000,
	},
	{
		name: "王五",
		salary: 14000,
	},
];
// 此处由于数组的元素是对象，所以使用 reduce必须需要设置  初始值
// 当设置了 初始值，则 pre的第一次值是 初始值（0）
const totalSal = arr.reduce(function (pre, current) {
	return pre + current.salary * 1.3;
}, 0);
console.log("totalSal: ", totalSal); // totalSal:  46800

const arr = ["red", "blue", "green"];
// -----------------1. find-----------------
// find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const res = arr.find(function (item) {
	// 条件：item === 'blue'
	return item === "blue";
});
console.log("res: ", res); // res:  blue
// -----------------2. every()-----------------
// every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。
const flag = arr.every(function (item) {
	// 条件：item.length > 2
	return item.length > 3;
});
console.log("flag: ", flag); // flag:  false
// -----------------3. some()-----------------
// some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。
const flag1 = arr.some(function (item) {
	return item.length > 3;
});
console.log("flag1: ", flag1); // flag1:  true

const spec = { size: "40cm*40cm", color: "黑色" };
// 1. 使用 values 获取对象的所有值的数组
const values = Object.values(spec);
// 2. 拼接数组使用 '/' 符号
const res = values.join("/");
console.log("res: ", res); // res:  40cm*40cm/黑色
document.querySelector("div").innerHTML = res;

const str = "foo,bar,baz,baba,papa";
// -----------------1. split() -----------------
// split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
const arr = str.split(",");
console.log("arr: ", arr); // arr:  (5) ['foo', 'bar', 'baz', 'baba', 'papa']
// -----------------2. substring()-----------------
// substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。
/*
   1）substring(num) 默认截取从索引num开始往后的全部字符串
   2）substring(num1,num2) 默认截取从索引num1到num2（不包括索引num2的元素）的字符串
        */
const str2 = "fast image cleaner plugin is awsome";
// 截取 str2 索引为5及其后： image cleaner plugin is awsome
console.log("截取 str2 索引为5及其后：", str2.substring(5));
// 截取 str2 索引为0到19： fast image cleaner
console.log("截取 str2 索引为0到19：", str2.substring(0, 19));
// -----------------3. startsWith()-----------------
// startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。
const str3 = "hello everyone,welcome to here!";
console.log("判断 str3 是否以 hello 开头: ", str3.startsWith("hello")); // 判断 str3 是否以 hello 开头:  true
console.log("判断 str3 是否以 every 开头: ", str3.startsWith("every")); // 判断 str3 是否以 every 开头:  false
console.log(
	"判断 str3 索引 15 开始及其后的字符串是否以 we 开头:",
	str3.startsWith("we", 15)
); // 判断 str3 索引 15 开始及其后的字符串是否以 we 开头: true
// -----------------4. includes()-----------------
// includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，并根据情况返回 true 或 false。
console.log("判断 str3 是否包含 hello: ", str3.includes("hello")); //判断 str3 是否包含 hello:  true
console.log("判断 str3 是否包含 anyone: ", str3.includes("anyone")); // 判断 str3 是否包含 anyone:  false
console.log(
	"判断 str3 索引 11 开始及其后的字符串是否包含 one: ",
	str3.includes("one", 11)
); // 判断 str3 索引 11 开始及其后的字符串是否包含 one:  true

// toFixed()
// toFixed() 方法使用定点表示法来格式化一个数值。返回格式化后的字符串
const num = 10.723;
const num2 = 10.123;
console.log("保留整数位（5入）：", num.toFixed()); // 保留整数位（5入）： 11
console.log("保留整数位（4舍）：", num2.toFixed()); // 保留整数位（4舍）： 10
console.log("保留小数点后两位: ", num.toFixed(2)); // 保留小数点后两位:  10.72
console.log("保留小数点后两位: ", num2.toFixed(2)); // 保留小数点后两位:  10.12
console.log("保留整数小数点后两位: ", num3.toFixed(2)); // 保留整数小数点后两位:  10.00

// 构造函数实现封装存在的问题
function Star(name, age) {
	this.name = name;
	this.age = age;
	this.sing = function () {
		console.log("唱歌");
	};
}
const foo = new Star("foo", 19);
const bar = new Star("bar", 18);
// 使用构造函数 创建的对象是不同的对象，如果创建对象数量过多，会造成内存浪费。
console.log("foo === bar", foo === bar); // foo === bar false

// 构造函数实现封装存在的问题
function Star(name, age) {
	this.name = name;
	this.age = age;
	/*  this.sing = function () {
                 console.log("唱歌");
             } */
}
const foo = new Star("foo", 19);
const bar = new Star("bar", 18);
// 使用构造函数 创建的对象是不同的对象，如果创建对象数量过多，会造成内存浪费。
console.log("foo === bar", foo === bar); // foo === bar false
// 输出 Star 此构造函数的原型属性（对象）
console.log("Star的原型属性: ");
// console.dir(Star.prototype);
// 将方法 挂载到原型上,这样对象可共享使用
Star.prototype.sing = function () {
	console.log("唱歌");
};
foo.sing();
bar.sing();
// 这样不同对象所调用的 sing 方法是同一个
console.log("foo.sing === bar.sing ?", foo.sing === bar.sing); // foo.sing === bar.sing ? true

// 探究 构造函数中this 和 挂载到构造函数原型对象上的方法中的this与实例对象的关系
let thatThis;
let thatSing;
function Star(name) {
	thatThis = this;
	this.name = name;
}
const foo = new Star("foo");
Star.prototype.sing = function () {
	console.log(`${this.name}调用了sing()`); // foo调用了sing()
	thatSing = this;
};
foo.sing();
console.log("thatThis === foo? ", thatThis === foo); //thatThis === foo?  true
console.log("thatSing === foo? ", thatSing === foo); //thatSing === foo?  true

// 自定义数组求最大值，最小值，求和方法
const arr = [1, 2, 7, 2, 8, 5];
// 1. 自定义求最大值
Array.prototype.max = function () {
	return Math.max(...this);
};
console.log("arr最大值：", arr.max()); // arr最大值： 8
// 2. 自定义求最小值
Array.prototype.min = function () {
	return Math.min(...this);
};
console.log("arr最小值：", arr.min()); // arr最小值： 1
// 3. 自定义求和
Array.prototype.sum = function () {
	return this.reduce((pre, current) => pre + current, 0);
};
console.log("arr求和：", arr.sum()); // arr求和： 25

/*
            使用 构造函数创建的对象本质都是 Constructor
            只要是 Constrcutor 都有 prototype 属性
            prototype对应的对象也是 Constructor
        */
function Star(name) {
	this.name = name;
}
const foo = new Star("foo");
console.log("@@@@@foo.constructor：");
console.log(foo.constructor);
console.log("@@@@@foo：");
console.log(foo);
console.log("@@@@@Star的 prototype：");
console.log(Star.prototype);
// 验证 Star.prototype.constructor 等于 Star
console.log(Star.prototype.constructor === Star); // true
// 此时给 Star的prototype 替换了一个新对象
// 赋值前的Star.prototype:  {constructor: ƒ}
console.log("赋值前的Star.prototype: ", Star.prototype);
Star.prototype = {
	/*
            如果有多个对象的方法，我们可以给原型对象采取对象形式赋值
但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了
此时，我们可以在修改后的原型对象中，添加一个constructor指向原来的构造函数。
            */
	constructor: Star,
	sing: function () {
		console.log("唱歌");
	},
	dance: function () {
		console.log("跳舞");
	},
};
// 赋值后的Star.prototype:  {constructor: ƒ, sing: ƒ, dance: ƒ}
console.log("赋值后的Star.prototype: ", Star.prototype);

function Star() {}
const foo = new Star();
// foo.__proto__ === Star.prototype ?  true
console.log(
	"foo.__proto__ === Star.prototype ? ",
	foo.__proto__ === Star.prototype
);

/*
            - 当不同构造函数中定义的数据存在结构相同甚至数据相同时，需要提取为公共到构造函数的原型对象上以便数据可以被共享
            - 当不同构造函数创建的对象属性或方法有差异时，此构造函数的原型对象也应不同，这时可以定义构造函数来创建不同的原型对象
        */
// 定义一个对象作为原型 用于储存 女人和 男人的数据和方法
/*   const person = {
              ears: 2,
              head: 1
          } */
// 定义一个构造函数创建不同的person原型对象
function Person() {
	this.ears = 2;
	this.head = 1;
}
// Woman 通过 原型继承 继承属性和方法
function Woman() {} // 定义一个女人的构造函数
/* Woman.prototype = person; // 此时的person是同一个
        Woman.prototype.constructor = Woman;*/
Woman.prototype = new Person(); // 此时 person 时单独创建的
//  此时的 Woman.prototype 和 Man.prototype 不是同一个对象，所以
// Man的原型没有 giveBirth()
Woman.prototype.giveBirth = function () {
	console.log("生孩子");
};
Woman.prototype.constructor = Woman;
const woman = new Woman(); // 使用此构造函数创建 女人
// 而 Woman的原型有 giveBirth(),会正常输出
woman.giveBirth(); // 生孩子
// ----------------- -----------------
function Man() {} // 定义一个男人的构造函数
// Man 通过 原型继承 继承属性和方法
/*  Man.prototype = person; // 此时的person时同一个
         Man.prototype.constructor = Man; */
Man.prototype = new Person(); // 此时 person 时单独创建的
Man.prototype.constructor = Man;
const man = new Man(); // 使用此构造函数创建 男人
// 因为Man的原型没有 giveBirth()，所以使用会报错
// Uncaught TypeError: man.giveBirth is not a function
man.giveBirth();

// 对象.__proto__ = 构造函数.prototype
function Person() {}
const person = new Person();
console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__.constructor === Object); // true
console.log(Object.prototype.__proto__ === null); // true
// -----------------使用 instanceof 运算符-----------------
// 判断 person 是否 由 Person 构造函数创建
console.log(person instanceof Person); // true
const obj = new Object();
// 判断  obj 是否 由 Object 构造函数创建
console.log(obj instanceof Object); // true
// 判断  {} 是否 由 Object 构造函数创建
console.log({} instanceof Object); // true

const obj = {
	name: "foo",
	age: 18,
	family: {
		baby: "bar",
	},
};
// -----------------1.直接复制-----------------
const o = obj; // 赋值的地址
// 修改o的属性age
o.age = 20;
console.log(o.age); // 20
console.log(obj.age); //  20
// ----------------2. 解构对象：浅拷贝-----------------
const o = { ...obj };
// 修改 o 的属性
o.age = 20;
console.log(o.age); // 20
console.log(obj.age); // 18 */
// -----------------3. 使用 Objec.assign() ：浅拷贝-----------------
const o = {};
Object.assign(o, obj);
o.age = 20;
console.log(o.age);
console.log(obj.age); // 18 */

const obj = {
	name: "foo",
	age: 18,
	friend: [
		{
			name: "zhangsan",
			age: 20,
			friend: [
				{
					name: "cate",
					age: 19,
				},
				{
					name: "lili",
					age: 17,
				},
			],
		},
		{
			name: "lisi",
			age: 21,
		},
	],
};
const o = {};
// 实现深拷贝
/*难点：此种递归只是某种形式的“迭代“。
          因为赋值操作在”递“的过程中就完成了。而”归“只是语言调用栈后自然的退栈，退栈过程没有进行额外的处理
          赋值操作的核心在于，给数组或对象添加一个属性或元素的语法 newObj[key] 会承接“上下文”引用，及 
          假设此时的key为 friend, newObj[key] 表示 obj.friend，以此类推为 obj.friend.friend。只有这样才能为同一个对象赋值
          因此在这个过程中因为此特性，newObj已经完成了赋值操作，“递”的过程中只是从 oldObj取值
          因此无需“归”。
         */
function deepCopy(newObj, oldObj) {
	for (const key in oldObj) {
		// 递归判断 {},或 []
		// 1. 解决 []数组
		if (oldObj[key] instanceof Array) {
			newObj[key] = [];
			deepCopy(newObj[key], oldObj[key]);

			// 2. 解决 {}对象
		} else if (oldObj[key] instanceof Object) {
			newObj[key] = {};
			deepCopy(newObj[key], oldObj[key]);
		} else {
			// 将 oldObj的key的value赋值给 newObj的同名的key
			newObj[key] = oldObj[key];
		}
	}
}
deepCopy(o, obj);
console.log(o);

const obj = {
	name: "foo",
	age: 18,
	friend: [
		{
			name: "zhangsan",
			age: 20,
		},
		{
			name: "lisi",
			age: 21,
		},
	],
};
// 1.将目标对象转为字符串
const objJson = JSON.stringify(obj);
// 2.将字符串解析为对象赋值给o
const o = JSON.parse(objJson);
console.log(o);

const obj = {
	name: "foo",
	age: 18,
};
function fn(x, y) {
	// 默认调用函数 this 指向 window
	console.log(this, x, y); // {name: 'foo', age: 18} 1 2
}

// 可用使用call()方法让 this 指向指定对象 （thisArg 参数）
// call(thisArg,arg1,arg2,...)
fn.call(obj, 1, 2);

const obj = {
	name: "foo",
	age: 18,
};
function fn(x, y) {
	// 默认调用函数 this 指向 window
	console.log(this, x, y); // {name: 'foo', age: 18} 1 2
	return x + y;
}
// apply(function,thisArg,[argArray])
// apply的返回值就是调用 apply()函数的函数的返回值
const res = fn.apply(obj, [1, 2]);
console.log("res: ", res); // res:  3

// apply的应用，因和数组有关，可求数组最大值
const max = Math.max.apply(Math, [1, 2, 3]);
console.log("max:", max); // max: 3

<body>
    <div class="box"></div>
    <script>

        const box = document.querySelector('.box');
        let i = 1;
        function mouseMove() {
            box.innerHTML = i++;
        }
        // -----------------实现防抖：使用 lodash-----------------
        box.addEventListener('mousemove', _.debounce(mouseMove, 500))
        // -----------------实现防抖：手写-----------------
        /*
        思路: 核心将执行（触发）的事件操作放置在 setTimeout 定时器中用于清除之前的操作（事件）
        1. 生命定时器变量
        2. 每次触发之前，判断变量中是否存在定时器，有则清除，没有则添加
        3. 函数调用编写在定时器中
        */
        function debounce(fn, time) {
            let timer;
            // 技巧：使用闭包保存 timer上一次数据
            return function () {
                if (timer) clearTimeout(timer);
                timer = setTimeout(function () {
                    fn(); // 要执行的操作的函数
                }, time)
            }
        }
        box.addEventListener('mousemove', debounce(mouseMove, 500))
    </script>
</body>