qidao123.com技术社区-IT企服评测·应用市场

标题: 【js基础笔记] - 包含es6 类的利用 [打印本页]

作者: 嚴華 时间: 3 天前
标题: 【js基础笔记] - 包含es6 类的利用
js基础

js 预解析

js 代码的编译和执行
通俗的说，预解析是在代码执行之前，先对代码进行通读息争释，之后执行代码
js变量提升

// 声明式函数
var fn = 100;
function fn() {
console.log('方法执行')
}
console.log(fn);//100
fn()//fn is not a function

复制代码

变量提升执行步骤
fn
fn()
fn = 100

//undifined 预解析了title的变量名称，没有赋值
console.log(title)
var title = '苹果';
console.log(title)//苹果

复制代码

赋值式函数和声明式函数

上述例子中，预解析只是声明了 func这个变量，没有赋值所以说func()不是 function 只是声明了一个func变量
第一个函数只能在声明后执行
第二个声明式函数可以在之前执行
DOM相干知识

节点选择器

<div id="hbox">
强大的内心
<div id="box"></div>
</div>

复制代码

childNodes属性 children

box.childNodes //获取所有节点
box.children 所有元素

复制代码

firstChild and firstElementChild

box.firstChild //获取所有节点中的第一个包含 text /n
box.firstElementChild 所有元素标签

复制代码

lastChild lastElementChild
previousSibling previousElementSibling //上一个节点的兄弟节点
nextSibling nextElementSibling //下一个节点的兄弟节点
parentNode parentElement //父节点 parentElement拿不到则为null

获取属性节点

box.getAttribute('index');
console.log(box.attributes[1]);

复制代码

创建节点

创建之后，直接可以利用 '.'方式更改/添加的属性

const newDiv = document.creatElement('div');
newDiv.className = 'newd';
newDiv.id = 'dd';
newDiv.innerHTML = "玫瑰和王子不属于一个世界";

复制代码

插入节点

<div id="box">
<div id="box1"></div>
</div>
<script>
box.appendChild(newDiv) //在box下增加一个节点
// insertBefore(要插入的节点，谁的前面)
hbox.insertBefore(newDiv,box);
// 删除节点(节点对象)
box.removeChild(newDiv);
// 删除自己以及后代
box.remove();
</script>

复制代码

更换节点

replaceChild(新的节点，老的节点)

<script>
// 替换节点
const newDiv = document.createElement('div')
newDiv.innerHTML = '替换'
box.replaceChild(newDiv,box1)
</script>

复制代码

克隆节点

cloneNode() 默认不传参仅克隆当前j节点

<script>
// 克隆节点
// cloneNode(true) 克隆包含后代
const clnode = box.cloneNode(true);
clnode.id = 'cloneId';
document.body.appendChild(clnode);
</script>

复制代码

获取节点属性

节点范例属性名属性值元素节点nodeType1属性节点nodeName2文本节点text3

<script>
const box = document.getElementbyId('box')
console.log(box.nodeType)
</script>

复制代码

获取元素尺寸

offsetWith 和 offsetHeight
获取尺寸：内容+padding+border 宽/高度
clientWidth 和 clientHeight
获取尺寸：内容+padding 宽/高度
获取元素偏移量

offsetLeft 和 offsetTop
参考点是定位父级 position:relative;
如果元素没有定位，偏移量相对于body
标准的dom变乱流

捕获：window -> document -> body -> outer
目的：inner
冒泡：outer -> body -> document -> window
默认环境只在冒泡触发按照 dom2变乱绑定，并进行设置，才能看到捕获的回调函数被触发
制止变乱传播

// propagation 传播
e.stopPropagation();

复制代码

制止默认行为

e.preventDefault();

复制代码

变乱委托

e.target
减少多个函数绑定的性能损耗
动态添加li也有变乱处理
可以根据dom流，将变乱委托给父组件，在父组件中获取到点击元素
详见示例

<ul id="list">
<li><button type="button"></button></li>
</ul>

复制代码

变乱委托，将变乱绑定在父组件<u id='list'>上
此时打印e.target可以获取到整个父节点和子节点。
通过获取 e.target.nodeName 选择要绑定的子组件节点范例
也可以根据节点操作方式，对节点操作

正则表达式

js复杂范例

字面量 //

字符中包含连续字符 abc

const reg = /abc/
//验证data.value是否符合表达式规则
reg.test(data.value)

复制代码

内置构造函数

const reg = new RegExp("abc")

复制代码

元字符 - 根本元字符

\d 包含一位数字（0-9）

const reg = /\d/
console.log(reg.test("abc"))//false
console.log(reg.test("123"))//true

复制代码

\D 包含一位非数字

const reg = /\D/
console.log(reg.test("abc"))//true
console.log(reg.test("123"))//false

复制代码

\s 包含一位空缺（空格缩进换行）

const reg = /\s/
console.log(reg.test("ab c"))//true
console.log(reg.test("123"))//false

复制代码

\S 包含一位非空缺（空格缩进换行）

const reg = /\S/
console.log(reg.test("ab c"))//false
console.log(reg.test("123"))//true

复制代码

\w 包含一位字母数字下划线

const reg = /\w/
const reg2 = /\w\w/ //包含两个
console.log(reg.test("123ab c"))//true
console.log(reg.test("&*"))//false

复制代码

\W 包含一位非字母数字下划线

const reg = /\W/
const reg2 = /\W\W/ //包含两个
console.log(reg.test("123ab c"))//false
console.log(reg.test("&*"))//true

复制代码

. 恣意内容（换行不算）

一个符合条件就可以如果 exec() 截取只会截取第一个

const reg = /./
console.log(reg.test("\n\n\n"))//false
console.log(reg.test("&\naac*"))//true

复制代码

. \转义字符

const reg = /\d\.\d/
console.log(reg.test("1.2"))//true
console.log(reg.test("1a2"))//false

复制代码

元字符 - 边界符

^ 以什么为开头

const reg = /^\d/ //以数字开头
console.log(reg.test('abc'))//false
console.log(reg.test('1abc'))//true

复制代码

$ 以什么为末了

const reg = /\d$/ //以数字结尾
console.log(reg.test('abc'))//false
console.log(reg.test('abc33'))//true

复制代码

^开头末了$

const reg = /^ae$/
console.log(reg.test('abc'))//false
console.log(reg.test('ae'))//true

复制代码

const reg = /^a\de$/
console.log(reg.test('abc'))//false
console.log(reg.test('a2e'))//true
console.log(reg.test('a232323e'))//false

复制代码

元字符 - 限定符

* 0到多次

const reg = /^a\d*c$/;
console.log(reg.test('a222222c'))//true
console.log(reg.test('a222222'))//f

复制代码

+ 1到多次

const reg = /\d+/;
console.log(reg.test('a222222c'))//true
console.log(reg.test('a222222'))//f
console.log(reg.exec('ads222222'))//可以取出符合条件的字符

复制代码

？ 0-1次

const reg = /\d?/;
console.log(reg.test('a222222c'))//true
console.log(reg.test('ac'))//true

复制代码

{n} 指定次数 n

const reg = /\d{3}/
console.log(reg.test('ac'))//false
console.log(reg.test('a2c'))//false
console.log(reg.test('a232e'))//true

复制代码

{n,m} 指定次数 n < x < m

const reg = /\d{1,3}/
console.log(reg.test('ac'))//false
console.log(reg.test('a2c'))//true
console.log(reg.test('a232e'))//true
console.log(reg.test('a123456e'))//true
console.log(reg.exec('a123456e'))//123

复制代码

元字符 - 特别符号

() 团体

const reg = /(a){2}/
console.log(reg.test('aca'))//false
console.log(reg.test('aac'))//true

复制代码

| 或 , 左右是一个团体

const reg = /a|2/ // a或者是2
console.log(reg.test('aca'))//false
console.log(reg.test('aac'))//true

复制代码

const reg = /(abc|234)/ //abc或者是 234
console.log(reg.test('ab234'))//true
console.log(reg.test('abc34'))//true
console.log(reg.test('abc'))//true

复制代码

const reg = /abc|234/ //ab c或2 34
console.log(reg.test('ab234'))//true
console.log(reg.test('abc'))//true
console.log(reg.test('ab34'))//false
console.log(reg.test('c23'))//false
console.log(reg.test('234'))//true

复制代码

[] 包含其中1个

[a-zA-Z0-9_] 等价于 \w 字母数字下划线
[0-9] <=> \d

const reg = /[123sad]/
console.log(reg.test('abc'))//true
console.log(reg.test('234'))//true

复制代码

const reg = /[123sad]{3,5}/
console.log(reg.test('ba2s'))//true
console.log(reg.test('ab2s'))//false 要包含在【】中连续在一起的为true

复制代码

[^abc] 取反 ^

^ 写在外面以什么为开头写在[]中取反

const reg = /[^abc]/
console.log(reg.test('wabc'))//true
console.log(reg.test('abc'))//false 要包含在【】中连续在一起的为^ 取反

复制代码

正则表达式 - 捕获

exec(‘表达式’)
截取字符串中，符合正则表达式的内容
但是是懒惰模式，只会匹配碰到的第一个内容，不会返回多个片段

const str = 'who say 2025-05-20'
const reg = /\d{4}-\d{1,2}-\d{1,2}/
console.log(reg.test(str))//true
console.log(reg.exec(str)[0])//2025-05-20

复制代码

标识符 g i

g 全局匹配 global

const str = 'who say 2025-05-20 is my birthday,my birthday in 2025-6-1';
const reg = /\d{4}-\d{1,2}-\d{1,2}/g
console.log(reg.test(str))//true
console.log(reg.exec(str)[0])//2025-05-20

复制代码

const reg = /(\d{4})-(\d{1,2})-(\d{1,2})/g该表达式加了（）会将符合的团体单独提取

const str = 'who say 2025-05-20 is my birthday,my birthday in 2025-6-1';
const reg = /\d{4}-\d{1,2}-\d{1,2}/g
// const reg = /(\d{4})-(\d{1,2})-(\d{1,2})/g 加了（）会将符合的整体单独提取
console.log(reg.test(str))//true 全局模式会记录此次内容
const res1 = reg.exec(str);//2025-6-1',
const res2 = reg.exec(str);// null 最上面的console.log 输出一次调用了reg 匹配全局g记录了输出的操作，所以只剩下第二次的结果

复制代码

i 忽略大小写 - ignore

const str = 'who say 2025-05-20 is my birthday,my birthday in 2025-6-1';
const reg = /a-z/i
console.log(reg.test(str))//true

复制代码

贪婪非贪婪?

示例
贪婪匹配匹配符合条件的最大次数

const reg = /\d{1,4}/
console.log(reg.exec('aca124856'))//1248 贪婪匹配匹配符合条件的最大次数

复制代码

？非贪婪匹配匹配符合条件的最小次数

const reg = /\d{1,4}?/
console.log(reg.exec('aca124856'))//1 ？非贪婪匹配匹配符合条件的最小次数

复制代码

常见搭配
*?
+?
??
{n,}? {n,m}?
场景应用

const str = `<p class='list'> xxxxx <p/>`
const reg = /^<p.*>$/
const reg = /./ //一个符合条件就可以
console.log(reg.exec(str))//<p class='list'> xxxxx <p/> 贪婪匹配

复制代码

const str = `<p class='list'> xxxxx <p/>`
const reg = /^<p.*?>$/
console.log(reg.exec(str))//<p class='list'> xxxxx <p/> >$存在正则引擎必须要找到正确的，所以会匹配到第二个p 。为了满足 $，.*? 会继续扩展直到能匹配到字符串末尾的 >

复制代码

const str = `<p class='list'> xxxxx <p/>`
const reg = /^<p.*?>/
console.log(reg.exec(str))//<p class='list'> 非贪婪匹配

复制代码

正则与字符串写法

正则.test(字符串)
正则.exec(字符串)
字符串.replace search match

const str = 'I will marry with my boy friend,I do not want get marry';
const reg = /marry/g
console.log(str.replace(reg, '*'))//I will * with my boy friend,I do not want get marry

复制代码

const str = '';
const reg = /marry/g
console.log(str.search(reg))//有返回开始下标没有则 -1

复制代码

const str = 'I will marry with my boy friend,I do not want get marry';
const reg = /marry/g
console.log(str.match(reg))// ['marry', 'marry']

复制代码

call、apply、bind的作用与区别

call apply 和 bind 都是可以修改 this 指向
利用区别是

call apply 会立即执行函数 . bind 返回一个function 必要被调用执行
参数的区别
call(this的指向，arg1,arg2…）传递多个参数
apply(this的指向，[arg1,arg2… ]) 第二个参数是数组
bind(this的指向，arg1,arg2…) 传递多个参数

速记： call 相称于打电话，拨打号码，要输入多个数字
示例：

未被改变的this指向
谁调用，this指向谁

通过 call apply bind 修改 this 指向后

call 和 apply 修改 this 指向是 立即执行 所以不必要调用函数，直接会执行被修改的function

apply 第二个参数是数组【】

bind 修改this 不会立即执行，必要调用

js 类写法 (es6)

本质是构造函数 class 写法是es6的语法糖可以用prototype修改

class Hander {
constructor(name, adge) {
this.name = name;
this.adge = adge;
}
introduce() {
console.log('hello', this.name, this.adge)
}
}
const obj = new Hander('张三',12)//传递的参数，会被构造函数 construct 接收
obj.introduce();//调用类中的方法

复制代码

js 构造函数 (es5)

function Hander(name,age){
this.name = name;
this.age = age;
}
// 节省空间公用内存，将function写在原型prototype上
Hander.prototype.introduce(){
console.log('挂在原型上的方法',name,age)
}
const obj = new Hander('百里'，400)；
obj.introduce();

复制代码

js原型链

每一个对象上都有一个 __proto__
通过 obj.__proto__ 可以获取到上一级方法的构造方法，逐级向上，形成原型链
obj.__proto__ === 构造函数.prototype
  这俩的区别是 __proto__是一个内置函数。雷同君子协议，以__开头的方法不允许被调用。所以，利用prototype代替
原型链的源头：
可以理解为null 由于 Object.prototype.__proto__ = null
也可以说是 Object.prototype
  js面向对象继续 es5

分为构造函数继续 和 原型继续
通过 改变this指向(call || apply)，实现长途继续
通过 prototype 改变父类构造函数实现增强或复用

继续属性
通过 call/apply改变父方法的this指向

call 会立即执行函数参数允许恣意多个
apply 会立即执行函数参数允许两个第二个是[]

function Person(name,age){
this.name = name;
this.age = age;
}
function getGrades(){
console.log(this.name,this.age,'3年级');
}
// 构造函数继承继承属性
function Student(name,age){
// call('this要指向的对象'，参数1，...,参数n)
Person.call(this,name,age);
}
const obj = new Student('1班','35号')
console.log(obj)//成功继承能看到有name 和 age

复制代码

上述中 Person.call(this,name,age); 修改父方法 Person的this指向子方法Student 此时，相称于子方法，存在父方法的 this.name = name; this.age = age;

继续方法
直接在子方法的原型prototype上创建一个父对象，就相称于继续了父亲的方法

// 对象原型继承继承方法
Student.prototype = new Person();
// 原型增加
Student.prototype.getName = function () {
console.log(this.name)
}

复制代码

属性增强
子方法，可以通过原型prototype创建新的方法,继续父方法。
也可以创建同名方法，进行覆盖大概继续

通过this继续父方法中的 getGrades()方法

// 原型增强1
Student.prototype.getGrades2 = function () {
this.getGrades();
console.log('增强了原来的方法')
}

复制代码

创建同名方法，修改this指向，进行覆盖 + 增强
// 注意：在原型继续的时间要在 new 实例化之前

// 原型增强2
Student.prototype.getGrades = function () {
Person.prototype.getGrades.call(this)
// console.log('增强了你的方法',this.name)
}
// 原型覆盖
Student.prototype.getGrades = function () {
console.log('覆盖了你的方法',this.name)
}
const obj = new Student('1班','35号')
obj.getGrades();//可以看到 getGrades方法被调用成功继承

复制代码

es6 类继续

通常利用super继续父类的变量和方法
在子类中，如果是同名方法，父类同名方法会被覆盖。
也可以通过super继续方法，并提升方法
父类代码示例

//父类 father.js
class father{
construct(gender){
this.gender = gender
}
getToal(){
console.log('父类方法')
}
}

复制代码

子类继续示例
子类继续中 super关键字必须在第一行

//子类 child.js
class child extends father{
construct(gender,name,age){
super(gender)//继承父类的属性
this.name = name;
this.age = age;
}
//如果只写父类同名方法，父类会被覆盖；
//可以使用 super继承父类方法
getToal(){
super.getToal(){
console.log('我是子类')
}
}
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)