JS高级-知识点二
面向对象
定义：
一种编程行业通用的写项目级的代码思维
对象特征：（2部分）
1.属性（颜色、名称、身高。。）
2.行为（说话、修改颜色、设置字体大小）
字面量
const obj = { name:'悟空'，height:100,age:5000}
工厂函数：
function createPerson(name){
return{name: name}
}
//无法实现继承
构造函数 * ：
//1 声明函数
function createStudent(name,age){
//2 通过this赋值
this.name = name
this.age = age
}
//3 通过 new 来创建对象
const obj = new createStudent('悟能',83)
console.log(obj)
原理：
1.开辟空间
2.将新的创建的对象构造函数中的this
3.为对象赋值
4.将创建好的对象的地址返回
弊端:
同一个say方法占据了两份内存
function createStudent(name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log(this.name);
}
}
const obj = new createStudent("悟能", 83);
const obj1 = new createStudent("悟能1", 84);
console.log(obj.say === obj1.say); // false 不是同一say方法 浪费了内存
提取同一个say方法
1.解决了浪费内存的弊端
2.但是造成了污染全局变量的问题
// 提前将say 声明好
function say() { // 污染全局变量
console.log(this.name);
}
function createStudent(name, age) {
this.name = name;
this.age = age;
this.say = say
}
const obj = new createStudent("悟能", 83);
const obj1 = new createStudent("悟能1", 84);
console.log(obj.say === obj1.say); // true
原型模式
在构造函数原型上 存放函数
function createStudent(name, age) {
this.name = name;
this.age = age;
}
// 将刚才的全局函数say 直接挂载到 构造函数的原型上 即可
// prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型
createStudent.prototype.say = function () {
console.log(this.name);
}
const obj = new createStudent("悟能", 83);
const obj1 = new createStudent("悟能1", 84);
console.log(obj.say === obj1.say); // true
解决了构造函数产生的污染全局变量的问题(解析)：
原型的单词是prototype , 原型的这个名字是行业内共同认可的名字
原型本质是一个对象，理解为javascript自动帮我们添加的
原型是 JavaScript 自动帮我们在 定义构造函数 的时候添加的
所有的构造函数的实例，共享一个原型
原型上一般是挂载函数
继承
属性继承：call
function Student(name){
Person.call(this,name)//this后面和属性间需要用逗号隔开
}
方法继承：prototype
Student.prototype.say = Person.prototype.say
//让子代继承父代的行为方法
call 借调
const obj={
name:"超人",
skill(){
console.log(this.name +" 会飞");
}
}
// 超人有技能 会飞
const obj2={
name:"普通人"
};
// 让普通人 借 一下超人的技能 skill 固定的规则
obj.skill.call(obj2);
call可以借用别人的函数
es6
函数参数默认值
// 定义函数的同时,可以给形参一个默认值
function show(msg = "大家一起快活呀") {
console.log(msg);
}
show();// 打印 大家一起快活呀
show("搞笑不");// 打印 搞笑不
//msg = "大家一起快活呀"======设置默认值
对象的简写
const name = "悟空";
const skill = "72变";
const say = function () { }
const obj = {
name, skill, say
}
console.log(obj);// {name:"悟空",skill:"72变",say:function(){}}
对象的方法也可以简写
const obj = {
say() {
console.log(this);
}
}
解构
定义：提供更加方便获取数组中元素或者对象中属性的写法
获取数组中的元素
数组
const [a, b, c, d] = [1, 2, 3, 4];
console.log(a, b, c, d);// 1,2,3,4
对象
const{name,height} = {name:'悟空',height:100}
name = '悟空' ， height = 100
元素交互顺序
let a = 1111;
let b = 2222;
[b, a] = [a, b];
console.log(a, b);// 2222 1111
获取对象中的属性（重点）
const obj = {
name: "悟空",
skill: "72变",
say() { }
}
const { name, skill,say } = obj;
console.log(name, skill,say);// 悟空 72变 function(){}
拓展运算符||剩余运算符
通过 “...” 符号来获取剩下的参数
//函数内获取
function show(a, ...all) { // 只能放最后
console.log(a);
console.log(all);
}
show(1);// 1 []
show(1, 2, 3);// 1 [2,3]
//数组内获取
const [a, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(rest);// [2, 3, 4, 5]
//对象内获取
const obj={
name:"悟空",
skill:"72变",
say(){}
}
const {name,...others}=obj;
console.log(name); // 悟空
console.log(others); // {skill: "72变", say: ƒ}
数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>数组去重.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" />
<ul></ul>
<script>
/*
1 输入框绑定键盘按下事件
1 判断按下的是不是 回车键
2 是的话 获取输入框的值
3 判断当前要显示的数据 是否已经存在于数组中 filter 可以 some可以
如果是已经存在 就不要继续添加
如果是不存在 就继续添加
4 把它添加到数组中
5 写一个方法 把数组的数据 拼接成li标签，插入到 ul中
*/
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const arr = ['a', 'b'];
render();
input.addEventListener('keydown', function (event) {
//判断按下的是不是回车
if (event.key === 'Enter') {
// console.log(this.value);
// some 如果数组中有一项 是返回了true 整个some方法就返回了true
// 调用some方法的时候，在它的回调函数中 拿数组中的元素 和 当前要添加的元素 做比较 如果相等 就返回true 表示找到了重复
const isHas = arr.some((value) => value === this.value); // 在我的数组中找到了和你待添加的元素 一样的值 返回true
if (isHas) {
// 有重复了 不要再添加
console.log('有重复了 不要再添加');
} else {
// 没有重复 你可以添加
// 把它添加到数组中
arr.push(this.value);
// 数组发生了改变 重新调用render方法 来实现页面的渲染
render();
}
}
});
function render() {
const html = arr.map((value) => `<li>${value}</li>`).join('');
ul.innerHTML = html;
}
</script>
</body>
</html>
