JS常用语法

这是⼀个段落。

这是另⼀个段落。

这是⼀个段落。

这是另⼀个段落。

这种写法最古⽼,兼容性最强.属于DOM的lev0级的标准.这个效果,等同于在点击div的时候,执⾏\"t();\"这⼀语句,

在全局范围内执⾏,因此,t函数内部的this指代全局对象-->window 想操作被点击的DOM对象,⽤this就不⾏了.

第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\的标准,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链） 1:参数

2:局部变量声明

3:函数声明

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

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

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

①、js并不是⼀句⼀句顺序执⾏的,先进⾏词法分析

This, 与 arguments

当⼀个函数运⾏的时候,函数内部能引⽤的变量有这么⼏种

AO、arguments、this

对于 arguments和this, 每个函数都有⾃⼰独有的arguments和this, 且不进⾏链式查找

arguments是什么?

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

2:收到实参收集起来,放到⼀个arguments对象⾥

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

当实参传来时, 再修改AO的相应属性. 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:词法分析阶段

先把接收到的参数放到激活对象上

再对函数体中代码作分析a: var xx = yy;

做法:声明⼀个xx属性在激活对象上,但不赋值,如果已经有xx,则不⽆动作.b:function ttt() {}

做法:直接声明ttt属性,且内容是函数体

2:执⾏语句阶段

六、Js⾯向对象

属性,⽅法-->对象

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

\"类\"的静态⽅法

1: js中的对象是什么?

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

2:种创建对象的⽅法

①、通过字⾯量来创建对象

例:{age:22,hei:180}

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

②、通过 new Object([value]);

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

七、Js⾯向对象中的封装

javascript语⾔中,没有现成的私有属性/⽅法机制,但可以通过作⽤域来模拟私有属性,私有⽅法

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

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

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

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

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

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

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

原型形成⼀条链

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

①、原型冒充的⽅式来完成继承

复制继承, ⼜称对象继承,其实就是复制⽗对象的属性到⼦对象⾝上

⼋、Js⾯向对象中的静态属性或者静态⽅法

从⾖浆机-->制造⾖浆的流程看, ⾖浆机充当的是构造函数的⾓⾊.

如果单独看⾖浆机本⾝, ⾖浆机也是⼀部机器,也是⼀个对象,也可以有属性和⽅法.

那么,⾖浆机作为对象时的属性和⽅法,就相当于类的静态属性,静态⽅法. ⼗、闭包

⼀句话说闭包:

函数的作⽤域,不取决于运⾏时的环境,⽽取决于函数声明时的环境.

典型应⽤:

闭包与局部作⽤域模拟私有属性

闭包与匿名函数完成\"不受⼲扰的变量\"

①、闭包(4) 闭包+匿名函数