2021-02-21

对于js的一些总结

一、通常，通过 JavaScript，您需要操作 HTML 元素。

1、通过 id 找到 HTML 元素

2、通过标签名找到 HTML 元素

3、通过类名找到 HTML 元素

①、改变 HTML 元素的内容 (innerHTML)
②、改变 HTML 属性
③、改变 HTML 样式
④、添加或删除 HTML 元素
二、DOM事件
unload:事件在用户退出页面时发生

window.onload = function(){
　　　　　　return “页面关闭!”;

};

onblur:失去焦点发生变化

window.onblur = function(){
　　　　　　inp.value = inp.value.toUppercase();

};

onfocus:点击文本框会获得焦点发生

inp.focus = function(){
　　　　　　alert(‘弹出的内容’);

};

onselect:要选中文本框中的内容会执行的事件

inp.onselect = function(){
　　　　　　alert(‘要执行的内容’);

};

onchange:事件会在域的内容发生改变时发生

inp.onchange = function(){
　　　　　　alert(‘要执行的内容’);

};

onreset:当点击重置的时候才会发生

form.onreset = function(){
　　　　　　//点击重置,是form;

};

onsumbit:点击提交

form.onsumbit = function(){
　　　　　　alert(‘要执行的内容’);

};

onresize:当窗口发生大小变换的时候就会执行

window.onresize = function(){
　　　　　　alert(‘要执行的内容’);

};

scrollBy、scrollTo:相对于自己之前的位置发生偏移,一个x一个y轴为参数

function scroll(){
　　　　　　window.scrollBy(100,100);

window.scrollTo(100,100);//绝对，固定

};

ondbclick:双击发生变化

inp.ondbclick = function(){
　　　　　　inp.value = “我双击了”；

}；

onclick:点击发生变化

inp.onclick = function(){
　　　　　　inp.value = “我点击了”；

}；

onmouseover:鼠标经过会发生变化，类似hover效果

inp.onmouseover = function(){
　　　　　　inp.value = “我鼠标滑过了”；

}；

onmouseout:鼠标移除会发生变化

inp.onmouseout = function(){
　　　　　　inp.value = “我鼠标移除来了了”；

}；

onmousedown:鼠标按键按下去会发生变化

inp.onmousedown = function(){
　　　　　　inp.value = “我鼠标按下来了”；

}；

onmouseup:按键按下去并释放松开会发生变化

inp.onmouseup = function(){
　　　　　　inp.value = “我鼠标按下并释放了”；

}；

onkeydown:按下键盘去会发生变化

inp.onkeydown = function(){
　　　　　　inp.value = “我按下键盘了”；

}；

onkeyup:按下键盘去会发生变化

inp.onkeyup = function(){
　　　　　　inp.value = “我松开键盘了”；

}；

三、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封装
1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。
2、使用对象封装，将代码封装到对象中.但是对象如果被覆盖，则全部失效，风险极高。
3、使用工厂模式,将代码进行封装，但是并没有解决问题。
4、将封装的函数名字去除，避免覆盖。但是函数没有办法调用了。
5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复调用，并且数据没有办法获取。
6、使用闭包,将数据一次性挂载到window对象下。