高阶函数
了解什么是面向对象？
- 面向对象 : 是 一种注重结果的解决问题 思维方式 面向过程 : 注重的是过程 面向对象 : 注重的是结果
2.面向对象与面向过程区别
用别人的对象： 好处效率高 坏处不利于维护
自己写的对象： 好处维护方便 坏处效率低
今后实际开发中如何运用面向对象开发思维
小技巧：今后实际开发中如何运用面向对象开发思维 当拿来一个需求的时候，先不要急着写，而是去网上找有没有现成的框架。如果有，则下载CV搞定。如果没有再自己写。
面向对象代码演示
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<script>
//需求： 给页面每一个div标签 和 p标签 设置颜色 和 边框
/* 1.面向过程 : 注重过程
特点：代码冗余
*/
/* 2.面向对象
(1)函数封装 :
全局变量污染 :
(2)对象封装:
*/
let obj = {
setColor: function (list, color) {
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = color
}
},
setBorder: function (list, border) {
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = border
}
}
}
obj.setColor(divList, "red")
obj.setColor(pList, "cyan")
</script>
</body>
</html>
内置对象
工厂函数
数组对象
<script>
/* 一定要练习哟，不然学完就会忘
内置对象: js作者提前封装好的对象
*/
//声明数组
let arr = [10, 20, 30]
//1.arr.concat(数组)，连接数组 得到一个连接后新数组
// 应用场景：下拉加载更多的时候，连接到原来数组后面。
arr = arr.concat(40, 50, 60, )
console.log(arr); //[10,20,30,40,50,60]
// reverse() :翻转数组
// 应用场景 电商类 销量 价格 距离 点击之后就会翻转显示
arr.reverse()
console.log(arr);
// 数组排序
// arr.sort()
let newArr = [20, 50, 10, 3, 6, 4, 80, 7, 9]
newArr.sort(function (a, b) {
// return a - b //从小到大
return b - a //从大到小
})
console.log(newArr);
</script>
字符串对象
/* 一定要练习哟，不然学完就会忘记 */
let str = '黑马程序员武汉大前端女神节快乐!'
// 字符串类似于数组， 也有长度 + 下标
console.log(str.length)
console.log(str[2])
// str.indexOf('字符串') ：返回字符串在str中的首字符下标
// 如果存在，则返回首字符下标 如果不存在 则返回固定值 -1
let index1 = str.indexOf('武汉')
console.log(index1); //5
let index2 = str.indexOf('女神')
console.log(index2); //10
let index3 = str.indexOf('干饭')
console.log(index3); //-1
let index4 = str.indexOf('黑大')
console.log(index4); //-1
</script>
原型对象
1.原型对象是什么? : 任何函数被创建的时候系统会自动创建一个对应的对象，称之为原型对象
2.原型对象作用? : 内存浪费 + 变量污染
3.原型对象相关三个属性 : 描述 构造函数 原型对象 实例对象 三者关系
1.prototype : 属于构造函数，指向原型对象
*作用 ： 解决构造函数浪费内存 + 变量污染
2._proto_ : 属于实例对象, 指向原型对象
*作用 ： 让实例对象直接使用原型的成员 （函数 + 属性）
3. constructor : 属于原型对象，指向构造函数
*作用 ： 让实例对象知道自己的构造函数是谁
构造函数new关键字的原理面试题
创建新对象
构造函数this指向新对象
执行构造函数代码，修改this，添加新的属性
返回新对象
内置构造函数
在 JavaScript 中最主要的数据类型有 6 种：
基本数据类型：字符串、数值、布尔、undefined、null
引用类型: 对象
了解原型对象函数内部方法缺点 :浪费内存资源
代码演示
this.name = name
this.age = age
this.cet = function () {
console.log('吃肘子');
}
}
let p1 = new Person('小刘', 19)
let p2 = new Person('小红', 19)
console.log(p1, p2);
console.log(p1.cet === p2.cet) //是错误的 因为p1和p2都是方法
并且代码一致引用类型比较的是地址 他们的地址不相同 结果为false
解决方法 使用全局变量 弊端 造成变量污染 使用对象 ：解决内存浪费 + 变量污染
代码演示2
function Person(name, age) {
this.name = name
this.age = age
}
// 2.原型对象
Person.prototype.eat = function () {
console.log('吃东西');
}
// constructor 属于原型对象 ， 指向构造函数
// 可以让实例对象只但自己被哪一个构造函数创建
console.log(person.prototype.constructor);
person
// 实例对象
let p1 = new Person('班长', 20)
console.log(p1);
// 查看p1原型
console.log(p1._proto_.constructor);
console.log(p1._proto_ === Person.prototype);true
内置对象：属于object类型，是js作者提前写好的对象，里面存储了一些属性和方法，方便开发者直接使用
Math：数学对象
Date：日期对象
Function：函数对象
RegExp：正则表达式
Array：数组对象
String ：string对象
Boolean ：boolean对象
Number ：number对象
值类型与引用类型
a.值类型（基本数据类型）:栈中存储的是数据，赋值拷贝的是数据，修改拷贝后的数据对原数据没有影响
b.引用类型（复杂数据类型）：栈中存储的是地址，数据存在堆中，赋值拷贝的是地址，修改拷贝后的数据对原
构造函数、原型对象、实例对象三者关系
1.构造函数有一个属性prototype，指向自己的原型对象
2.实例对象有一个属性__proto__指向自己的原型对象
3.原型对象有一个属性constructor，指向自己的构造函数
