js总结

正则表达式

正则表达式的web开发中的常见场合

1: 邮箱验证

2:用户名验证

3:替换字符串某一部分

4:信息采集,用来分析有效的代码段

.....

.....

 

正则表达式 : 规则表达式

"一种有规律的字符串的描述"

 

正则表达式是一门独立的知识,同样的一段描述,比如,对于email的匹配表达式,

在不同语言是一样的, 但是,调用的函数可能不一样.

 

 

学习正则表达式

1: 在js里,如果写一个正则表达式, "/正则表达式/" (不含双引号)

2: 在js里,用正则表达来验证字符串是否满足, 可以用  reg.test(String); // 验证

3:  js, 用正则表达式的.exec函数, 用来查找匹配的选项,并把查到的值取出. // 查找

4: 字符串应用正则, 

string.match(reg), 正则查找字符串

string.search(reg), 正则查找位置

string.replace(reg,'newstr');正则替换

String.split(reg); 正则拆分

 

 

 

正则表达式3句话

1:要找什么字符?

2:从哪儿找?

3:找几个?

 

 

1.要找什么字符?

1.1 字面值,"hi", 就是找"hi"

1.2 字符集合来表示,[abcd], 指匹配abcd中的任意一个

1.3 用范围来表示字符 [0-9],[a-z] [A-Z]

1.4 字符"簇" (就是系统为常用的字符集合创建的一个简写)

 例: \d ----> [0-9], \w--->[0-9a-zA-Z_], \s ------->[ \t\v\f\r\n](空白符)

1.5 补集的形式来表示字符集合. 

例:[0-9]===>[^0-9],  [abcef]===>[^abcef]

对于字符簇,只需把字母大写,即可表示补集

[\d] ==== >[\D],  [\w]===>[\W],[\s]==>[\S](非空白字符)

1.6 "", 代表"任意字符,不包括换行符"

 

 

 

2:从哪儿找,找到哪儿?

2.1 \b, ====>'单词边界'

\bhi ===>从单词的边界开始匹配,hi

 

2.2 \B ===> 单词的非边界, 把单词中间的某一部分取出来

把中间含有 hi的单词取出, 即hi不能在两端

 

2.3 ^ caret, 从"字符串的起始位置开始匹配",

2.4 $ ,匹配到字符串的结束位置 

 

 

3: 找多少

* :  0--->N  ===> 等价 {0,}

+: [1,N] ====>等价  {1,}

?: [0,1]  ====>等价   {0,1}

a{n} : 字符a准确的出现n次

a{n,}: 字符a至少出现次

a{n,m}, n-->m次 

 

 

个数修饰符默认是贪婪模式,尽量多找

"个数修饰符后面加?",则为非贪婪模式, 尽量少的找.

 

模式:

以匹配为例,默认情况,match找到一次就结束,

能否 告诉匹配过程, 一直找,在全文范围内一直找.

g ->全局模式 ,global  [找所有的,而不是找一次结束]

i---> 忽略大小写 ignore 

m->多行模式

s-->单行模式(把整个字符串看成一行) (js不支持单行模式)

在js里,不支持单行的情况下,如何换行?

--->什么样的模式能代表"所有"字符串

==> 用[\d\D], [\s\S],[\w\W]

 

预先判断是否为指定值

 

正向预查

C

O

M

I

N

g

灰色:是查找的值

 

预先判断是否不为指定值

 

负向预查

C

O

M

I

N

g

灰色:是查找的 

 

向前正向预查:

U

n

L

U

C

ky

Js不支持向前正向预查(零宽度正回顾后发断言)

反向引用/后向引用

 

子表达式

Exec为例:

匹配到的数组, 第0个单元代表 "整个正则表达式的匹配结果"

1

2

3

...

N   , 则代表第 N个子表达式的匹配结果

 

如何引用子表达式所匹配的结果?

答:

在表达式内部,反向引用时, \n来匹配第N个子表达式的结果

子表达式的当成变量传递时,$N来匹配 第N个子表达式的匹配结果

 

 

全角空格的unicode编码   \u3000

 

Js中的事件

行为,结构,样式分离的页面

绑定事件的3种方式

1: 直接写在html标签内声明

<div id="school" onclick="t();">

这种写法最古老,兼容性最强.属于DOM的lev0级的标准.

 

这个效果,等同于在点击div的时候,执行"t();"这一语句,

在全局范围内执行,因此,t函数内部的this指代全局对象-->window

想操作被点击的DOM对象,用this就不行了.

 

问:在这种绑定方式中,如何达到点击后,把div的背景换成蓝色

 

第2种绑定方式:

DOM对象.onclick = function () {}

这种绑定是把一个DOM对象onclick属性赋值为一个函数,

因此,函数内部的this直接指向该DOM对象.

 

在这种绑定方式中,只能给一个事件,绑定一个处理函数

即 .onclick = fn1;  .onclick = fn2;

最终的效果, 是.onclick = fn2;
如果用函数来调用其他函数的形式

例.onclick = function () {fn1(),fn2()}

那么此时，　fn1,fn2中的this又指向window．

 

如何绑定多个函数，　并令this指向DOM对象

 

 

第三种绑定事件的方法:

DOM lev3的事件绑定标准

 

添加和去除监听事件.

 

addEventListener('事件',函数);  // 第一个参数事件参数, 没有前缀"on", w3c的标准,IE不支持

 

注意点1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"

注意占2: 事件处理函数中的this 指代 DOM节点自身 (w3c标准)

注意点3: 第一个事件参数,一律把事件名称的'on'去掉 (w3c标准)

 

去除绑定

removeEventListener('事件',函数)

 

 

IE下绑定事件与解除事件的方法

attachEvent('事件',函数)   // 注意: 事件 要加on

detachEvent('事件',函数) // 事件依然要加on

 

 

总结一下:

W3c addEventListener 与IE的attachEvent()的不同

1: 函数名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件后的执行顺序不同, w3c按绑定事件的顺序来执行, 而IE6,7,8,是后绑定的事件先发生.

4: this的指向, w3c中,绑定函数中的this指向 DOM对象, 而IE6,7,8中,指向window对象
事件的捕捉与冒泡模型

在w3c的模型中, 

addEventListener 支持 第3个参数来声明事件的模型为冒泡还是捕捉.

如果声明为 true,则为捕捉方式

如果声明为false, 或者不声明, 则为冒泡方式

 

注意: IE的attchEvent 没有第3个参数,不支持捕捉模型

 

事件对象的概念:

当事件对应的函数被触发时, 函数会接收到一个事件参数, // w3c标准

例 xx.onclick = function (ev) {alert(ev)}

点击后,ev 参数就代表单击那一瞬间的"各个参数",以一个对象的方式传过去.

 

对于IE, 当事件发生的瞬间,事件对象赋值给window.event属性

 

事件的中断

如何中断事件的传播???????

在w3c:  事件.stopPropagation();

在IE中,  事件对象.cancelBubble = true;

cancelBubble = true //IE取消冒泡

stopPropagation(); // w3c取消冒泡

 

returnValue = false; // IE取消事件效果

preventDefautl() ;// w3c取消事件效果

 

取消事件的默认效果

事件对象.preventDefault();  // 阻止事件的默认效果, w3c方法

事件对象.returnValue = false; // 设置returnValue 的属性值为false;

Js 之作用域链

作用域链
原型链

AO上有哪些属性

对于函数的AO,属性来自于3个方面

1:参数

2:局部变量声明

3:函数声明

在函数调用的瞬间, AO这样来形成,

首先 分析参数, 把分析的参数,形成AO的属性

如果传来实参,则把实参赋给相应的属性.

 

其次,分析 var 声明

以var str = 'hello';

把str声明为AO的属性, 值为 undefined;

 

如果var 声明的变量名与 形参名称一致,不产生影响,因为AＯ的str属性已经存在．

 

 

最后, 分析函数声明

Function 函数名() {

}  // 有函数名

 

函数声明, 假设函数名为fn, 

函数声明会把函数赋为 AO.fn 属性的值.

 

* 函数声明与函数表达式的区别

表达式必有返回值,把返回值(即匿名函数)赋给了一个变量.

此时 就是普通的赋值过程.

例: var fn = function () {}   , 这是一个函数表达式

对于上例, 函数表达式返回函数, 并把函数作为值, 赋给fn

 

而函数声明的优先级高

例: function fn() {

}

则会把 AO.fn = function fn() {}

This, 与 arguments

当一个函数运行的时候,函数内部能引用的变量有这么几种

AO

arguments

this

 

对于 arguments和this, 每个函数都有自己独有的arguments和this, 且不进行链式查找

arguments是什么?

答:1:arguments是收到的实参副本

在词法分析中, 首先按形参形成AO的属性,值为undefined

当实参传来时, 再修改AO的相应属性.

2:并把所有收到实参收集起来,放到一个arguments对象里

t(a,b,c){},  

调用时: t(1,2,3,4,5) 个参数 

此时 , AO属性只有a,bc,3个属性, arguments里有1,3,3,4,5, 所有的值

 

对于超出形参个数之外的实参, 可以通过arguments来获得

 

3:arguments 的索引 从 0, 1,2,....递增,与实参逐个对应

4:arguments.length 属性代表实参的个数

 

5:Arguments一定不是数组, 是长的比较像数组的一个对象,虽然也有length属性

 

6:Arguments每个函数都会有,因此,arguemnts只会在内部找自身的arguments,

无法引用到外层的arguments

This是谁

This是指调用上下文

 

针对函数的应用场景来讨论

函数的4种调用方式 

1:函数方式

直接调用函数名,或函数表达式的返回值, 

This指代全局对象,window

2:属性方式(对象方法方式)

This指代该对象(方法的属主)

3:构造器方式

通过 new 函数名() , 来创建对象

在js里, 构造函数与对象的关系比较松散, 

对象就是"属性->值"的集合

构造器的作用,是制造一个对象,把this指向该对象,

4:call,apply方式

函数本身即是对象,对象就有方法

函数名.call(对象,参数1,参数2,参数3);

以fn.call(obj,'a','b');

实际效果相当于

1:fn内部的this指向了obj

2:fn('a','b');

 

Apply的效果与call一样, 只不过传参时,把所有参数包装在数组里,传过去.

例 fn.call(obj,'a',' b')  ===> fn.apply(obj,['a','b']);

 

还有一种改变this的方法

With 语句

With(对象) {

语句1

语句2

.....

}

在with内部的语句,就把参数中的对象当成的上下文环境.

Js面向对象

属性,方法-->对象

"类"能做到封装,继承,多态,

"类"的静态方法

 

1: js中的对象是什么?

答:js的对象就是键值对的无序集合,

 

2:3种创建对象的方法

  2.1 通过字面量来创建对象

例:{age:22,hei:180}

{}->空对象,没有属性

  2.2 通过 new Object([value]);

 

  2.3 通过构造函数来创建对象(和第2种没区别,因为Object就是系统内建的构造函数)

Js面向对象中的封装

对象的属性外界是可读可写的, 如何来达到封装的目的?

答:通过闭包+局部变量来完成

 

在构造函数内部声明局部变量, 和普通方法, 

因为作用域的关系,只有构造函数内的方法,才能访问到局部变量.

而方法对于外界是开放的,因此可以通过方法来访问局部变量.

 

 

继承

当调用老虎的属性或者方法时, 首先在老虎的对象上查找属性或者方法,

如果查询不到,则到老虎的构造函数的原型对象上查找,

并不是把原型上的属性复制到自身

 

在查找属性或方法的过程中, 沿着原型链来查找属性,

对象->原型->原型的原型....->空对象-->NULL

原型形成一条链

这个查找属性的方式,称为js的原型链

原型冒充的方式来完成继承

复制继承, 又称对象继承,其实就是复制父对象的属性到子对象身上

Js面向对象中的静态属性或者静态方法

从豆浆机-->制造豆浆的流程看, 豆浆机充当的是构造函数的角色.

如果单独看豆浆机本身, 豆浆机也是一部机器,也是一个对象,也可以有属性和方法.

那么,豆浆机作为对象时的属性和方法,就相当于类的静态属性,静态方法.