php精品笔记100天10javascript高级js高

1、一、 认识 JavaScriptJavaScript 被认为是客户端“脚本”，它不常叫“语言”，言外之意是比较简单 但是深入了解之后 你会发现 简单的外表下 蕴藏着丰富的内涵。JavaScript 是由 Netscape（网景）提出并发展，它起初名为“livescript”，后从角度考虑更名为“javascript”，但它和 java 没有直接顶多是 js 被期望发展成 java 那样面向对象的语言（基于对象）。现在 JavaScript 标准由 ECMA（European Computer Manufactures Assiocation）制定和维护，因此也叫“ECMAScript”，它是包

2、含了网景的 Javascript 和微软的 Jscript，最新的 js 版本是 ES6（ECMAScript6.0）。作为客户端脚本的 JavaScript 常用于网页浏览器的开发，然则它的设计却是一种通用性的脚本语言，可以被嵌入任何应用，例如嵌入 falsh 脚本化 falsh player 嵌入 applet 脚本化 java。l作为浏览器脚本的 Javascript 具体实现表单验证 JS 诞生的直接网页前端动态效果开发 用来实现用户和浏览器交互 提升用户体验网页游戏开发 替代 flash（ActionScript 3.0）相较于 flash， JS 在网页的支持度更高（无需安装插件）

3、、资源开销少、加载速度快不支持 flash。交互lAjax 异步服务器请求 实现前服务端处理 NodeJS 采用 google V8 引擎、浏览器 javascript 实现所需的技术js语法（语言本身）：变量、数据类型、运算符、函数、系统函数等网页中的应用：DOM、BOM、编程等Ajax 请求：DOM、CSS、XMLHttpRequest复杂功能效果实现时的面向对象编程：面向对象语法 类、构造函数、封装、继承、静态等二、 JS 代码运行环境js 代码是通过直接嵌入页面中的，一个页面中可以有多段定义的代码片段 它们既相互关联 又保持（角度不同）关联性：一段 script 中的内容（变量、函数）

4、 可以在另一段 script 中使用性：一段 script 运行发生错误 不影响另一 script 的执行1全局执行环境js 在运行时 首先会创建一个全局执行环境 这个全局环境就是定义一个全局对象，页面中所有的内容（不同的 script 中的内容） 都是这个全局对象的属性，在浏览器 javascript 中（嵌入网页的 js）这个全局对市昌平区建材城西路龙办公楼一层：象是 window。这就是说不同的 script 中的内容都同属一个 window 对象因此他们的以共享。市昌平区建材城西路龙办公楼一层：2语法和词法分析js 常被认为是“解释性”脚本语言，它是用来“”的，但事实上它也是一门“编译

5、语言”，你无需手动编译。对页面中的多个 script 代码片段，js 会首先一段要执行的代码 然后编译该段代码 最后执行。l一段 script 代码l编译该段代码编译代码的工作就是 将 JS 转化成机器可执行的语言（二进制或汇编），具体：词法分析、语法分析、代码合并和优化、生成代码，例如通过词法分析 将 var bar = “some text” 分解为 var 语法、bar 变量、=运算、“some text”值接下来 语法分析 得出代码的抽象语法树（Abstruct Syntax Tree 源代码 js 和目标代码 c 直接桥梁）最后生成目标代码（机器指令） 你要记住的是 这里只完成了 变

6、量和函数的定义 而不执行（执行需要上下文的环境 只有运行才能知道）var bar; function foo() l执行并输出结果执行编译目标代码 生成结果 具体的工具就是 执行语句、变量赋值、函数调用.bar = “some text”;foo();l下一段要执行的 script 代码 以此往复一个有意思的现象是 函数的定义在编译阶段就完成了 也就意味着 在执行时 它总是的 而无论其在页面中的出场顺序，这个叫“函数的预加载”.（熟悉）市昌平区建材城西路龙办公楼一层：var bar = “some text”; function foo() console.log(“hello php57”)

7、;3运行时错误js 代码运行时的错误分为编译错误和执行错误，编译时的错误主要是语法错误（SyntaxError）,而执行时因为受上下文错误的比较多 有错误（ReferenceError）、类型错误（TypeError）、范围错误（RangeError）无论哪种错误 它们都是 Error 的子类。类似于 PHP 中的异常 Exception，Exception 下有各种异常（例如 PDOException）。当发生编译错误码不执行而执行时的错误会影响错误之后的的输出而不影响前面代码的执行。市昌平区建材城西路龙办公楼一层：总之 无论发生何种错误 一段代码发生了错误不影响另一段代码的运行。l使用异常

8、处理错误（掌握）JS 代码运行时的错误 在页面不显示 不像 PHP 会输出提示。但是 它会自动抛出一个错误对象（Error）如果要处理错误 你只需要使用 try/catch 来捕获该错误对象 就类似于 PHP 中的异常处理。当然你也可以自定义错处处理场景使用 thrownew Error(提示)手动抛出错误。三、 变量和作用域（熟悉）变量是数据的容器，JS 中变量使用 var，与变量密切相关的是它的作用域。作用域是指变量作用的区域 它分为全局和局部的作用域。定义在程序顶层（不属于某个函数）中的变量是全局变量，函数体内的变量为局部变量。全局变量在整个页面中都有效，局部变量只能做作用于函数体内 当

9、函数（执行市昌平区建材城西路龙办公楼一层：完毕、调用结束）时 函数体内的状态会被销毁掉（变量被删除了） 因此无法在外部到。l变量也可不用 varvar的变量会成为全局变量即使是定义在函数体内。l使用 var但是未赋值的变量 初始化值是 undefined市昌平区建材城西路龙办公楼一层：l没有块状作用域4作用域链当代码较复杂 嵌套层次较多时 我们需要深入的理解变量的作用域。前面我们提到 全局变量是全局对象的属性 那么局部变量呢 它是一个叫做激活对象（也叫调用对象是函数调用时产生的对象）的属性。组成变量作用域的是一个对象列表或对象链叫“作用域链”。在程序顶层中变量作用域链为全局对象，定义在函数 f

10、 体内的变量作用域链为 f 的激活对象 = 全局对象，函数体内嵌套的函数 g 的作用域为 g 的激活对象 =函数 f 的激活对象 = 全局对象。当变量 x 值时 JS 会沿着它当前所在位置的作用域链的头部开始查找如果找到则返回结果如果没有则继续往下查找直到根部（根没有则是 undefined）。市昌平区建材城西路龙办公楼一层：g 激活对象：属性 z 值为 3f 激活对象：属性 y 值为 2var x = 1;var y = 100; function f() var y = 2; console.log(z); function g() console.log(x,y); var z = 3;

11、 g();f();全局对象：属性 x 值为 1四、 数据类型（掌握）不同的数据有着不同的类型 决定着它们使用它们不同，JS 中的数据类型可以分为“基本类型”和“引用类型”，像布尔值、字符串、数值、null、undefined 等是基本类型数据，数组、函数和对象是类型。基本类型的数据较小 或者 占据固定的内存空间，例如 一个数值使用 8 个字节而布尔值只要一位 如果我们都使用 8 个字节 那么就可以任何数据。但是类型则不一样 它没有固定的数目 可能很大，例如 数组中可以有任意多的元素、对象可能包含任意多的属性、对应的代码片段可能也很长。当对象较大 且 数量较多时 就会显著占用用户的内存空间。因此

12、 为了避免产生多余的对象 在赋值时 采用传地址操作。5基本类型数据使用基本类型数据 在赋值时 是创建值的副本 它和原件是在存放在不同的内存地址中 因此 互不影响。市昌平区建材城西路龙办公楼一层：l基本类型数据的封装对象很多时候 我们在操作基本类型数据时 会用到它的一些“”例如 查看字符串的长度 str.lengt、截取一段字符串 str.substr()。那么问题来了 作为基本类型的数据 它怎么会像对象那样有属性和呢？JS 中除了有布尔值、字符串、数值等基本类型数据外 还支持他们的封装对象（String、Boolean、Number），当把一个基本类型数据 用做类型 JS 会隐式的创建它的封装

13、对象 然后调用相应的结果 用销毁 是一个很精致的模型。返回6类型数据使用类型数据 在赋值时是了对方的地址也就是说 它们彼此共用一段内存空间无论谁修改了这段地址中的值 都会影响另一个变量。市昌平区建材城西路龙办公楼一层：l对象和对象操作从数学的角度出发对象是命名的数据的集合 在数学中集合使用”JS 中的对象 也是使用用来操作数据。在面向对象编程中对象是属性和的集合，属性用来数据，创建对象两种方式 产生的效果是一样的没有区分直接量的设置更简便灵活 可以在简单功能实现时使用 对象的转化对象是复合类型的数据 它不仅有值 更有结构 因此不直接使用、当把一个对象用于字符串环境中时 JS 会隐式的调用它的

14、toString时 JS 会隐式的调用它的 valueOf获取对象的字符串形式值 然后运算。当把一个对象用于数学环境中获取对象的数字形式值 然后运算。通常对象有自带的 toString 和valueOf 你也可以自定义该。市昌平区建材城西路龙办公楼一层：l数组和数组操作数组是编号的数据的集合它和对象很相似事实上 JS 中的数组本质上就是对象。创建数组关联索引数组JS 本质上没有关联索引数组但是支持下标为字符串的数组元素也就相当于是关联索引的数组。市昌平区建材城西路龙办公楼一层：在打印数组和计算数组长度时都不包含关联索引部分的元素数组JS 原则上也是不支持数组的使用 但是数组元素值可以还是一个数

15、组就相当于一个数组 数组遍历可以使用 for 循环数组的下标 然后去数组元素 下标的范围是0, arr.length-1。该数字下标元素 且要求数组元素是连续的 否则 会产生 undefined 值。只能打印出所有的市昌平区建材城西路龙办公楼一层：五、 运算符和表（掌握）ltypeof使用 typeof 查看变量的数据类型 它是一个运算符 不是函数 当查看一个表来像个函数。类似于 PHP 中的 gettype()函数时 会使用()使之看起ldelete使用 delete 删除一个对象的属性或者数组元素的类似于 PHP 中 unset。除此以外 它还可以用来删除一个未用 var的变量。市昌平区建

16、材城西路龙办公楼一层：linstanceofinstanceof 用来检测一个对象是否是某个类的实例注意不要取检测是否是 Object 的实例（都是 true）l用来in对象中是否有某个属性市昌平区建材城西路龙办公楼一层：lwith 语句变量有作用域当作用域比较长的时候可以使用 with 修改作用域链的头简化代码输入量lfor(var p in o) 语句for/in 用来查看对象的属性（），定义一个变量 p 用来接收 每次从对象 o 循环出来的属性，接下来就可以通过 p 检索每个属性 属性值可以使用 op来获取 而不是 o.p;市昌平区建材城西路龙办公楼一层：l| 运算或运算执行时 当表两边

17、都为 false 时 返回 false，有一个为 true 就返回 true。在实际执行时 当左边为 true 时 直接返回左边的值 不用往后执行。如果左边为 FALSE 呢IF 结构IF (左边) var result = 左边 else var result = 右边和 var result = 左边 | 右边右边代表最终的结果相当于这样的市昌平区建材城西路龙办公楼一层：六、 函数函数是定义一次 但是可以反复使用多次的代码片段，在实际开发中 使用函数 可以提高工作效率 同时模块化的组成 使得代码更加整洁。7定义函数l使用 function一个函数function f() return ;l

18、作为数据类型的函数（掌握）JS 中的函数 是一个数据类型，对象类型的数据和普通的数据值一样它可以被赋值给变量、数组元素作为对象的属性、函数参数等。市昌平区建材城西路龙办公楼一层：l使用构造函数函数是一个对象类型的数据，它所属的类是 Function ，因此可以使用 new Function 来创建一个函数实例。l函数体内的 this 说明作为函数 哪怕有嵌套函数 函数体内的 this 总是指向 window 对象市昌平区建材城西路龙办公楼一层：作为对象的函数函数体内的 this指向当前调用的对象谁调用它就指向谁8函数参数JS 中的函数参数可以不严格的匹配 当调用时传入的实参个数实参个数少于形参

19、 在函数体内的形参值为 undefined。多于定义的形参多出的值会被忽略当市昌平区建材城西路龙办公楼一层：larguments 对象（熟悉）函数体内标识符 arguments 有着特殊的含义 它是一个类似数组的对象 使用数字下标实参的值 此外还有一些其他的属性 例如 length 表示实参个数、callee 表示替代当前正在调用的函数名。arguments 对象可以有效的帮助我们处理可变参数（参数长度不固定 没法定义形参接收实参）函数，这种情况下 就不定义形参 直接使用 arguments 获取所有的实参值。例如 定义一个 max 函数max(1,2)max(1,2,3)max(1,2,3,

20、4)计算一组数的最大值实际调用时会有不同个数的参数传入。注意：argument 只能在函数体内使用函数体外无意义 会报错（未定义 ReferenceError：arguments is not市昌平区建材城西路龙办公楼一层：defined）。9函数对象llength 属性函数是对象，它有属性和，函数的 length 属性是查看函数定义的形参的个数。可以借助该属性来函数调用时的参数是否匹配。lprototype 属性函数的 prototype构造函数（类）的原型对象，原型对象中的以被它的实例对象继承。市昌平区建材城西路龙办公楼一层：lcall 和 apply现有 A 对象中的后删除，它的过程如下

21、：m（A.m） B 对象想要临时使用 就是给 B 对象添加一个 m然后 调用完毕之A 的 m给 B 添加 A 中的 mB.n = A.m;/B/调用执行 获取结果B.n(1.2);delete B.n;这个过程 可以使用 call 和 apply 来操作 实际上 call 和 apply 是将体内的调用对象由 A 换成了 B 也就是改变了体内 this 的指向。市昌平区建材城西路龙办公楼一层：A.m.call(B,1,2) 或 A.m.apply(B,1,2);call 和 apply 的使用案例：可以使用 call 和 apply 转变函数调用时的传参形式Math.max(1,2,3);va

22、r arr = 1,2,3;Math.max.apply(null, arr);使用 call 和 apply 给一个容器绑定多个样式设置的函数也就是将函数体内的 this 指向容器市昌平区建材城西路龙办公楼一层：10作用域和闭包闭包是函数的一种特性 一种现象，它不指代某个具体的语法、定义、概念等，要理解闭包就必须要清楚函数的作用域。l词法作用域和激活对象JS 中的函数是通过词法（语法、定义）划分作用域的 而不是动态创建作用域 这就是说函数是运行在它的作用域 而不是执行时的作用域，例如：当嵌套函数 从改变 但是作用域不变。函数中被导出时 它的执行地发生了接下来 在调用函数时 JS 会首先将作用域设为到作用域链的头部。函数体内的局部变量、起作用的那个作用域 然后创建一个激活对象添加的形参、嵌套的函数 都是激活对象的属性。市昌平区建材城西路龙办公楼一层：l闭包的成因、原理上面的例子 证实了函数是运行在它的作用域 而不是执行时的作用域。那么当嵌套函数被导出市昌平区建材城西路龙办公楼一层：全局环境f 函数定义作用域：执行作用域：f 激活对象 = 全局对象g 函数定义作用域：执行作用域：g 激活对象 = f 激活对象= 全局对象f 激活对象 =全局对象全局对象var x = 1;