前端学习笔记整理：HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源.zip

# JavaScript > [Standard ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) Cookie 写入。 ## JavaScript 组成 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的： * 核心 [ECMAScipt](https://www.ecma-international.org/publications/standards/Ecma-262.htm) * 文档对象模型 [DOM (Document Object Model)](https://www.w3.org/DOM/) * 浏览器对象模型 BOM (Browser Object Model), 主要内容在 HTML 规范中定义. * [JavaScript 实现](http://www.w3school.com.cn/js/pro_js_implement.asp) * [JavaScript学习总结（三）BOM和DOM详解](http://segmentfault.com/a/1190000000654274) ## 函数 ### 常用函数 * `string.slice(start,end)` 复制 string 中的一部分。 * `string.indexOf(searchString, position)` 在 string 中查找 searchString。如果被找到，返回第一个匹配字符的位置，否则返回 -1。可选参数 position 可设置从 string 的某个指定的位置开始查找。 * `object.hasOwnProperty(name)` ### Date ```javascript var t = new Date(); var tt = [ t.getFullYear(), '年', // 不是 getYear() t.getMonth() + 1, '月', t.getDate(), '日', ' ', t.getHours(), '时', t.getMinutes(), '分', t.getSeconds(), '秒' ].join(''); console.log(tt); // 2015年10月30日 22时6分21秒 ``` 注意 `getMonth()` 和 `getDay()` 都是从 0 开始的，需要加 1。 * [Date, mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) ### typeof 和 instanceof 1. typeof: `typeof operand` typeof 操作符返回一个字符串,表示未经求值的操作数(unevaluated operand)的类型。typeof 只有一个实际应用场景，就是用来检测一个对象是否已经定义或者是否已经赋值。而这个应用却不是来检查对象的类型。除非为了检测一个变量是否已经定义，我们应尽量避免使用 typeof 操作符。 ```javascript typeof foo == 'undefined' // 若 foo 未定义, 返回 true ``` 类型 | 结构 :--- | :--- Undefined | "undefined" Null | "object" 布尔值 | "boolean" 数值 | "number" 字符串 | "string" Symbol (ECMAScript 6 新增) | "symbol" 宿主对象(JS环境提供的，比如浏览器) | Implementation-dependent 函数对象 (implements [[Call]] in ECMA-262 terms) | "function" 任何其他对象 | "object" 2. instanceof: `object instanceof constructor` instanceof 运算符可以用来判断某个构造函数的 prototype 属性是否存在另外一个要检测对象的原型链上。(instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。) ```javascript function C(){} // 定义一个构造函数 function D(){} // 定义另一个构造函数 var o = new C(); o instanceof C; // true,因为:Object.getPrototypeOf(o) === C.prototype o instanceof D; // false,因为D.prototype不在o的原型链上 o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true C.prototype instanceof Object // true,同上 C.prototype = {}; var o2 = new C(); o2 instanceof C; // true o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上. D.prototype = new C(); var o3 = new D(); o3 instanceof D; // true o3 instanceof C; // true ``` * [typeof 和 instanceOf的区别](http://segmentfault.com/a/1190000000730982) * [instanceof](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof) * [typeof](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) ### call 和 apply 通过 call 和 apply, 可以实现自定义函数调用的上下文. 1. call: `fun.call(thisArg, arg1, arg2, ...)` call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. thisArg : 在fun函数运行时指定的this值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中就是 window 对象)，同时值为原始值(数字，字符串，布尔值)的 this 会指向该原始值的自动包装对象。 arg1, arg2, ... : 指定的参数列表。 ```javascript /* 将函数的参数 arguments 转换为数组 */ function listFirst(){ // this 指向 arguments // 下面的语句相当于 arguments.slice(0)，但由于 arguments 不是数组，不能直接调用 slice 方法 var arr = Array.prototype.slice.call(arguments, 0); for (var i=0; i < arr.length; i++){ console.log(arr[i]); } } listFirst(1,2,3); // 调用, 输出 1,2,3 ``` 2. apply: `fun.apply(thisArg, [argsArray])` apply() 方法在指定 this 值和参数（参数以数组或类数组对象的形式存在）的情况下调用某个函数。 thisArg : 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。 argsArray : 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。 在调用一个存在的函数时，你可以为其指定一个 this 对象，无需此参数时第一个参数可用 null（比如对于 add）。 this 指当前对象，也就是正在调用这个函数的对象。 使用 apply， 你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。 ```javascript /* 例一: 将函数的参数 arguments 转换为数组 */ function listFirst(){ // this 指向 arguments var arr = Array.prototype.slice.apply(arguments, [0]); for (var i=0; i < arr.length; i++){ console.log(arr[i]); } } listFirst(1,2,3); // 调用, 输出 1,2,3 /* 例二: push 一个数组 */ var arr1=new Array("1","2","3"); var arr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2); ``` * [Function.prototype.apply()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) * [apply 和call的用法](http://segmentfault.com/a/1190000000725712) ### new/构造函数 构造函数只是一些使用 new 操作符时被调用的普通函数。使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。 1. 创建（或者说构造）一个全新的对象。 2. 这个新对象会被执行 `[[prototype]]` 链接。 3. 这个对象会绑定到函数调用的 this。 4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。 ### 函数调用模式 除了声明时定义的形式参数, 每个函数还接收两个附加的参数: this 和 arguments. 在 JavaScript 中一共有 4 种调用模式: 方法调用模式、函数调用模式、构造器调用模式和 apply 调用模式. 函数调用的模式不同, 对应的 this 值也会不同。 1. 方法调用模式 当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this 被绑定到该对象。 ```javascript // print 作为 obj 属性被保存，当 print 被调用时，this 指向 obj var obj = { value: 'I am a string.', pri