JavaScript笔记
第一篇
JavaScript是用来控制网页行为的。
一、JS用法
HTML中的JS脚本必须位于<script>和</script>标签之间。
JS脚本代码可以放在HTML的<body>和<head>之中。
二、
1、JavaScript是一种解释性语言，由解释器对代码进行解析。一般可以通过F12调出调试窗口。
eg.console.log("Hellow World!")
注：console.log()用来将指定信息打印到浏览器的开发者控制台
2、不同的浏览器有不同的解析引擎，使得JS的执行在不同的浏览器上有不同的解释效果。
3、嵌入HTML的JS代码有几种表示方法：
- 直接插入代码块
<script>console.log("Hellow World!")</script>
- 加载外部JS文件
<script scr="Hellow.js"></script>
- 使用HTML标签中的事件属性
<a herf="JavaScript:alert('Hellow')"></a>
三、JS数据类型
1、JS是弱类型语言，可以不声明数据类型。
eg.var pi=3.14;
var pi='ratio of the circumference of a circle to its diameter';
2、也可以用new来声明数据类型。
eg.var pi=new Number;(数字）可以带小数点也可以不带小数点
var pi=new String;(字符串）引号中的任意文本
var pi=new Boolean;(布尔值）
var pi=new Array;(数组）
var pi=new Object;(对象）以名称和值对的形式来定义
对象属性有两种寻址方式：
eg.
firstname : "John",
lastname : "Doe",
id : 5566
};
name=person["lastname"];
注：
- NULL:没坑，可以将变量的值设为Null来清空变量和对象。
- Undefined:有坑，但坑中无值。可以设置undefined来清空对象
- 区别：typeof null; //object
typeof undefined //undefined
null==unfined //true
null===undefined (绝对等于） //false
所有JS都是对象，但直接赋值的字符串和对象声明的字符串并不严格相等。
3、SJ拥有动态类型，所有可以用相同的变量用作不同的类型。
eg.var x=1;
var x="Bob";
四、JS编程逻辑
1、if...else...语句
2、for(代码1；代码2；代码3）语句
3、for(x in xs)语句
4、switch{
case 1:
代码块
break;
case 2:
代码块
defult;
}
5、while语句
6、do...while...语句
五、JS打印数据
- window.alert() (弹出警告窗）
- document.write() (写入HTML文档）eg.<script>document.write("<h1>这是一个标题</h1>");</script>
- console.log() (写入浏览器控制台）
注：注释用“//”，用“\"换行。
六、JS对象
1、创建对象：methodName:function(){
//代码块
}
2、访问对象：objectName.methodName() //对象名.访问属性名（）
注：没有括号，返回函数定义；有括号，返回运行结果。
eg.
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
结果：
不加括号输出函数表达式：function() { return this.firstName + " " + this.lastName; }
加括号输出函数执行结果：John Doe
七、JS框架：大部分的前端JS框架使用外部引用的方法将文件引入正在编写的文档。
1、jQuery:封装了常用的JS功能，通过选择器的机制操纵DOM，完成前端的展示。
2、Angular:实现了前端的 MVC 架构，通过动态数据绑定来简化数据转递流程。
3、React:利用组件来构建前端UI框架。
4、VUE：MVVM 构架的前端库。
注：
1、DOM和BOM
- DOM:文档对象模型，JS通过操纵DOM可以动态获取、修改HTML元素、属性、CSS样式，这种修改可能会带来XSS风险。
- BOM：浏览器对象模型，赋予JS对浏览器本身进行有效的操纵，比如获取Cookie,地理位置等。
2、双向数据绑定：
一般MVC框架思想是将数据单向的传送到 View 视图中进行显示，但是有时我们还需要将视图层的数据传输回模型层，这部分的功能就由前端 JS 来接手，因此许多近几年出现的新框架都使用数据双向绑定来完成MVVM的新构架，这就带给了用户更多的权限接触到程序的编程逻辑，进而产生一些安全问题，比较典型的就是许多框架曾经存在的模板注入问题。
八、JS混淆
由于前端代码的可见性，出于知识产权或者其他目的，JS 代码通过混淆的方法使得自己既能被浏览器执行，又难以被人为解读。常见的混淆方法有重命名变量名和函数名、挤压代码、拼接字符、使用动态执行函数在函数与字符串之间进行替换等。
第二篇
一、JS函数
1、函数定义
- 函数声明：function 函数名（变量）{代码}
- 函数表达式：①匿名函数：eg.var x=function(a,b){return a*b}; 注：变量也可以作为函数使用。eg.var x=function(a,b){return a*b}; var z=x(2,3);
②构造函数：使用JS函数构造器（Function())定义。eg.var FunctionName=new Function("a","b","return a*b"); var x=FunctionName(3,4);
③函数提升（Hoisting提升）：eg.myfunction(5); function myfunction(y) {return y*y; } 注：⑴JS中将函数和变量都提升到函数顶部，即变量可以先使用后声明。⑵JS中只有声明的变量会提升，初始化不会提升。 eg. var x=7; ⇔ var x; x=7; 但x=7;不会提升。
④自调用函数：函数表达式后面跟着（），则函数会自动自己调用自己。 eg.(function () {var x = "Hello!!"; // 我将调用自己})();
- 函数是对象：JS函数有属性和方法。利用typeof判断函数类型会返回funtion。①arguments.length返回接收到的参数个数。②toSring()将函数作为一个字符串返回。
扩展：typeof:检测变量的数据类型。 格式：typeof 3.14;
- 箭头函数：格式：（参数1，参数2…）⇒{函数声明} （参数1，参数2…）⇒表达式 相当于（参数1，参数2…）⇒{return 表达式} 注：只有一个参数时括号可选，若无参时必须有括号。const比var更安全，且箭头函数不可提升。
2、函数参数
- 参数类型：①显式参数(Parameters)：函数定义时列出。
②隐式参数（Argument)：函数调用时真正传的值。
- 默认参数：①参数调用时未提供隐式参数，则默认为undefined。
②若函数定义时已经给出参数的默认值，则判断调用时是undefined还是默认值。
eg.function myFunction(x, y = 10) {
// y is 10 if not passed or undefined return x + y; }
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值
- arguments对象：JS中包含了一个内置arguments对象，对象包含函数调用的参数数组。
3、函数调用(格式：①（有返回值）doucument.getElementBYID("id的字母”).innerHTML或window=函数名（参数）；②（带有参数，无返回值为alter)<button onlick="函数名（‘参数’）>点击这里</button>）
- 作为一个函数调用：……innerHTML=函数名（参数）； 不属于任何对象，但默认为全局对象是HTML页面，而window是window对象函数，所有俩种结果相同。
- 函数作为方法调用
- 使用构造函数调用:eg.function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new myFunction("John","Doe"); x.firstName; // 返回 "John"
- 作为函数方法调用函数：利用call()和apply()函数方法。
4、JS闭包
5、补充：
- JS作用域（可访问变量、对象和函数集合）：①JS局部作用域：局部变量只在函数内定义和被访问；在函数开始时执行创建，在函数结束时销毁，所有不同的函数可以使用相同名称的变量。
②JS全局变量：⑴变量在函数外定义⑵变量只要没有在函数内使用“var"进行定义就是全局变量。
eg.myFunction();
document.getElementById("demo").innerHTML ="我可以显示 " + carName;
function myFunction(){
carName = "Volvo";}
结果：我可以显示 Volvo
③HTML全局变量：window对象，可以调用函数内的局部变量；所有数据变量都属于window对象。
eg.myFunction();
document.getElementById("demo").innerHTML ="我可以显示 " + window.carName;
function myFunction(){carName = "Volvo";}
结果：我可以显示 Volvo
- JS this关键字（当前对象的引用，随执行环境的改变而改变）：
①方法中的this:this指向所在方法中的对象。
eg.var person = {firstName: "John",lastName : "Doe",fullName : function() {return this.firstName + " " + this.lastName;}}; 这里this表示person
②单独使用this:this指向全局对象，window就是全局变量为【object Window】 eg.var x=this; （默认），严格返回结果也相同
③函数中的this(默认）:this是默认函数所属者，这时this指向全局变量。 eg.function myFunction(){return this;} 结果：【object Window】
④函数中的this（严格模式）:这是函数没有绑定this，所有this是undefined。eg."use strict" function myFunction(){return this;} 结果：undefined
⑤事件中的this(this指向了接收事件的HTML元素）:
⑴对象方法中绑定:以下的this指向了person
eg.①的eg 、 var person（）{…… full.function(){return this}}; 返回【object Object】
⑵显式函数绑定:在JS中函数也是对象，对象即方法。其中call和apply是异常强大的方法，它允许切换this绑定的对象。
eg.var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); // 返回 "John Doe"
- JS事件：浏览器或用户行为。
- 向未声明的变量赋值默认为window全局变量，不可删除。
二、JS类
1、JS类
- 格式：class 类名{ constructor(){……}} 注：构造函数constructor()用来创建和初始化由class创建对象的属性，若不添加构造函数JS会自动添加一个空的构造方法。
- 使用类：定义好类后，可以使用new来创建对象。eg.class 类名（）{constructor(){……}} let site=new 类名（……）；
- 类表达式：①未命名类：eg.let Runoob=class{constructor(){……}}; console.log(Runoob.name);//输出：Runoob
②命名类：eg.let Runoob=class 类名{constructor(){……}}; console.log(Runoob.name);//输出：类名
- 类的方法：可以在constructor()后面添加任意数量的方法。还可以向类的方法发送参数。
- 类声明和类表达式的主体都执行在严格模式下，否则出现错误。eg.date=Date();//错误 let date=Date();//正确
2、JS类继承
- 格式：class 父类名{……}； class 子类名 extends 父类名{……}；
- 利用super()方法引用父类的构造函数。通过调用super（）方法，可以调用父类的构造方法，从而可以访问父类的属性和方法。
- 类中使用getter和setter来获取值和设置值，其中类中使用getter和setter用的是get和set关键词。 注：使用俩种方法时方法名和属性名必须不相同，且俩种方法在使用时都不需要带括号。
eg.class Runoob {
constructor(name) {
this._sitename = name;
}
get sitename() {
return this._sitename; }
set sitename(x) {
this._sitename = x; }
}
let noob = new Runoob("菜鸟教程");
document.getElementById("demo").innerHTML = noob.sitename;
- 类必须声明，才可以使用，否则会报错；且函数声明会提升，类声明不会提升。eg.let noob = new Runoob("菜鸟教程");
3、JS静态方法：使用static关键字修饰方法，属于类，不属于对象；可以使用方法名、类名调用静态方法。且只能在类中调用，即使用类名调用，不能在对象中调用。
eg.class Runoob {
constructor(name) {
this.name = name; }
static hello(x) {
return "Hello!!"+x.name; }
}
let noob = new Runoob("菜鸟教程"); // 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob/noob.hello(); // 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = noob.hello();
// 以上代码会报错
注：若想利用对象调用，可以作为一个参数传给它。eg.红字
浙公网安备 33010602011771号