2020-09-24

***前端知识，过久没写了从如今学的往前写***

JS面向对象
特色：封装性 继承性 多态性
ES6
定义类 calss Star(){
constrouctor(参数1，参数2) {
this.参数1=参数1,…}
sing (){}
}
(构造函数是每一个类都有的，若是本身没定义内部也会给你本身生成,注意，在ES6建立类中，多个方法不能用逗号隔开)
实例化对象
var ldh=new Star(‘刘德华’，…);
类的继承
calss Father(){}
calss Son extends Father{};
super()至关于调用父类中的构造函数
super().say()至关于调用父类的普通函数
如
类中共有属性和方法要加this，如
经典案例 tab栏切换
首先平常引入Bootstrap的css和js还有jq的js

接着完成网页，因为是案例因此作个很随意

css
js




案例注意的点：
在获取全部Li的时候要手动给li加上index，
li.index=i;
建立小li后每次追加，用insertAdjacentHTML(
四个参数 ‘beforeend’ ,li 或者 ‘afterend’,li or)
第一个是在子节点的最后加，第二个是在子节点前面加。
因为appednchild不支持追加字符中的元素，而insertAdjacentHTMLzhichi1.
在每次点击+号后，都要从新获取全部的Li和section，而且把他们的兄弟清除当前的类。
双击编辑：
双击事件：ondblclick,禁止选中文用这个
双击编辑的原理：点击后，生成一个input，而且在输入后，点击回车键或者鼠标移开后将input的value赋值给原来那个span，这样就成功修改里面的文字了。css

构造函数****
三种建立对象
1 var obj=new Object{};
2 var obj={};
构造函数
3 function Star (参数1， 参数2) {
this…=…
}
var ldh=new Star(‘刘德华’)；
实例成员：this.的这些，只能经过对象名.成员名来访问
静态成员：Star.sex=‘男’,在构造上添加的成员，只能经过函数名.成员名来访问。
重点
原型对象与对象原型
原型对象：prototype 每一个类都有的，无论有没有定义，能够实现共享。
对象原型：__proto__每一个实例化对象都有的，用来指向prototype
ldh.proto=Star.prototype;这两个东西自己也是对象。
constructor：指向本身构造函数的自己。

前端

如图，当采用的不是Star.prototype.sing=function(){}而是如图同样的直接赋值时，会覆盖住里面的内容，里面的contructor也会不见，而咱们的__proto__也是指向prototype的，此时咱们的ldh.proto
.constructor也不会指向原来的Star,而是指向prototype里面的__proto__所指向的一个object对象，如图，
在这里插入图片描述

因此为了防止这种状况就得手动添加constructor：Star使他指回去。

原型链

接下来则是this指向，this指向的是实例化对象。web

扩展内置对象数组

类名.call(v,参数1，参数…)
其中的v是用来改变调用call的类里面的this的，
若是定义 var o={};
Star.call(o,a,b),里面的Star的this是指向o。
如继承，

方法继承的话不能直接Son.prototype=Father.prototype来赋值，由于若改变Son.prototype，因为地址问题,Father.prototype也会受影响。
因此这时候实例化对象再赋值，就不会改变其Father.prototype.如图，

儿子不止可使用本身的方法play();也能够调用父亲的Money();app

ES5
数组
：遍历
arr.forEach(function(varlue,index,array){});
如


arr.filter(function(varlue,index,array){});筛选遍历每个，符合的以数组形式返回。

arr.some(function(varlue,index,array){});若查到知足条件的则返回布尔值，而且中止遍历。

案例 查询商品
渲染

svg

按照商品名查询时最好用some(),只要匹配到立马中止，提升效率。函数