cordova

移动应用本身是不能直接访问原生的设备功能。

cordova提供了一组设备相关的API，通过这些API，移动应用能够以JavaScript访问原生的设备功能，比如摄像头，麦克风等。

JS

变量


var variableName;

大小写敏感
变量类型
String Number Boolean Array Object
基本上js中任何东西都是对象，可以被存储在变量中

String	Number	Boolean	Array	Object
				基本上js中任何东西都是对象，可以被存储在变量中

内置类型

基本类型：
- Null \ undefined \
  undefined 派生自 null，所以 null==undefined; // true
- boolean:true,false \ 转型函数 Boolean() \ if语句会自动执行Boolean转换
```
xxxxxxxxxx
var t = true;
t.toString(); // true
Number(t); // Number(true) => 1
```
- string
  字符是不可变的，改变时，先创建新的，再销毁旧的字符串；
- number
  保存浮点数需要的内存空间是整数的两倍
  不要测试浮点数值（0.1+0.2 == 0.3?）/* false*/
  isNaN(obj)尝试转为数字; isNaN(true); // false,会被转为1
  转换任意类型：Number( ); // ‘10a’: NaN
  转换字符串类型：parseInt( ), parseFloat( )
- symbol??
对象：Object，引用类型
- constructor
- hasOwnProperty
- isPrototypeOf
- propertyIsEnumerable
- toLocaleString
- toString
- valueOf
Array 数组
数组方法功能备注
sort( comparareFunc ) 破坏性排序


xxxxxxxxxx
Q:引用类型拷贝问题：
var a = {
    name: "asi"
}
var b=a;
b.name="阿肆"；
console.log(a.name); // 阿肆

Typeof


xxxxxxxxxx
undefined \ string \ number \ boolean \ symbol
object \ function
类型判断： typeof obj === 'string'
Q:
var arr = null;
typeof arr; // object
Object.prototype.toString.call(arr); // [object Null]

类型转换

转Boolean


xxxxxxxxxx
除了 null \ undefined \ false \ NaN \ '' \ 0 \ -0 ,
其余均转为 true，包括对象

对象转基本类型


x
先调用 valueOf(),再调用 toString()
var arr = {
    name:"asi",
    valueOf: function(){
        return this.name; // 判断数字试为 NaN,接着执行toString
    },
    toString: function(){
        return 1; // 判断为数字
    }
}

布尔操作
- ! 非操作符：始终返回布尔值，两个一起用返回obj的布尔值
- &&
- ||
四则运算
乘性操作符 * / %： 3/0=Infinity;
==操作符
比较运算符

函数

一等公民特性：
- 将函数赋值给变量
- 将函数传递给函数
- 函数返回函数
函数内部声明变量必须用 var，不使用则生成全局变量；
函数声明：创建函数并创建一个函数名的变量指向函数引用，函数声明提升；
函数表达式：返回函数的引用，所以可以直接将函数表达式绑定到事件上； dom.onclick = function(){...}
函数设计：每个函数做一件事，并把这件事情做好
函数引用指向的到底是什么？
- 封装好的函数，包含函数的代码块
- 函数引用包括：函数代码+与之相关联的环境（方法+局部变量）？？？那 this 呢？
- js的函数都是在定义它的环境中执行的

作用域

词法作用域：意味着只看代码结构就可以确定变量的作用域，而不需要等到代码执行；

闭包

闭包就是能读取其他函数内部变量的函数；另一方面可以让一些变量始终保持再内存中；
闭包：名词，指的是函数和引用环境；
包含自由变量的函数与为所有这些自由变量提供了变量绑定的环境一起，称为闭包；
作用域
- 闭包的局部作用域
- 外部函数的作用域
- 全局作用域
闭包作用
- setTimeout/setInterval
- 回调函数（callback）
- 事件句柄（event handle）

链式作用域


xxxxxxxxxx
var name = "Global name";
function ff(){
    console.log(name);
    var name = "fun name";  // 函数调用初期，声明，但未赋值
    console.log(name);
    console.log(age);
}
ff();
// 输出 undefined      fun name    Uncaught ReferenceError: age is not defined

call,apply,bind区别模拟实现

js中，this的指向会经常改变，所以通过这三个方法来切换、固定this的指向。
call( obj, arg01, arg02 )
apply( obj, args[] )

bind( obj, arg01, arg02 )，绑定函数的this执行环境，并返回函数，不是一个立即执行的函数；


xxxxxxxxxx
function handler( greet ){
    console.log(greet, this.nam);
}
var obj ={ name: "阿肆" };
// 通过 handler()打印 obj 的 name
handler.call(obj, "Hi ");   // 方法一
obj.func = handler;        // 方法二，将handler变为obj的方法
obj.func("Hi ");

this

this在函数定义的时候是确定不了的；只有在执行的时候才能确定；

this指的是函数运行时所在的环境；


xxxxxxxxxx
var obj = {
  foo: function(){console.log(this.bar);},
  bar: 1
};
var foo = obj.foo;
var bar = 2;
foo();          // 输出 2，运行在全局环境，this 指向全局环境
obj.foo();      // 输出 1，运行在 obj 环境，所以 this 指向obj

js允许在函数体内部，引用当前环境的其他变量；由于函数可以再不同的运行环境执行，所以需要一种机制能够在函数体内部获得当前运行环境context。所以this出现了，指代函数当前的运行环境。


xxxxxxxxxx
var f = function(){
    var x = 1;
    console.log(x);
}
var x = 2;
f();     // 输出 1
//---------------------------------------------------------------------------
var f = function(){
    var x = 1;
    console.log(this.x);  // this指向函数运行时所在的环境
}
var x = 2;
f();     // 输出 2

var that = this; 在DOM事件中指定this，当函数内部出现遍历dom元素时，this将指向当前被循环的元素，而that仍旧指向原先被点击的元素。
阮一峰JavaScript的this原理
< 返回目录 >

对象

封装、可复用、原型与实例之间有联系；
构造函数模式
- 相对于普通函数，构造函数中的this是指向实例的，而普通函数调用中的this是指向windows的。
- 内部使用了this变量，通过new生成实例，并且this变量会绑定到实例对象上
- cat1自动含有一个constructor属性，指向他们的构造函数，即Cat
- instanceof( )
- 缺点：浪费内存，公用的不变属性与方法在内存中重复
- 显式的返回基本类型：undefined, null, boolean, number等，不会代替 new 式调用的默认行为。
- 显式返回以下值：{},[],RegExp, Date, Function，均会代替 new 调用的默认返回值 this.
```
xxxxxxxxxx
function Cat(name, color){
    this.name = name;
    this.color = color;
}
cat1 = new Cat('coco', 'white');
alert(cat1 instanceof Cat);     // true
```

原型对象 Prototype 模式

js规定，每一个构造函数都有一个prototype属性，指向另一个对象；
把不变的属性与方法定义在prototype对象上；


xxxxxxxxxx
function Cat(name, color){
    this.name = name;
    this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃猫粮");};
// 生成实例
var cat01 = new Cat("小不点儿", "yellow");
alert(cat01.eat == (new Cat(***", "***")).eat );     // true

isPrototypeOf ()：用于判断某个prototype对象与实例之间关系；


xxxxxxxxxx
// isPrototypeOf
Cat.prototype.isPrototypeOf( cat01 )       // true

hasOwnProperty ()
in运算符

< 返回目录 >

new

第一步，创建一个 Object 对象，"obj。_proto _ = className.prototype"， new时才有原型对象
第二步，将构造函数的执行对象赋给这个新生成的实例
第三步，执行构造函数中的代码
第四步，返回新生成的对象实例，即默认返回 this


xxxxxxxxxx
function Cat(){
    // some code here
}
var cat01 = new Cat();

继承


xxxxxxxxxx
function Animal(){
    this.species = "动物";
}
function Cat( name, color ){
    this.name =  name;
    this.color = color;
}

1、构造函数继承：将父对象的构造函数绑定在子对象上；


xxxxxxxxxx
function Cat( name, color ){
    Animal.call(this, arguments);  //父类构造函数的变量与方法绑定到子类实例，不继承父类的原型对象
    this.name =  name;
    this.color = color;
}

2、原型链继承


xxxxxxxxxx
Cat.prototype = new Animal(); 
Cat.prototype.contructor = Cat;

3、直接继承prototype


xxxxxxxxxx
Animal.prototype.species = "动物";
Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;   // 问题：任何修改Cat.prototype中的内容都会反映到Animal.prototype

4、拷贝继承


xxxxxxxxxx
function extends(Child, Parent){
    var c = Child.prototype;
    var p = Parent.prototype;
    for(var k in p){
        c[i] = p[i];
    }
    c.uber = p;  // 德语向上的意思
}
// 使用
extends(Cat, Animal);

组合继承 = 构造函数继承 + 原型链继承

寄生组合继承


xxxxxxxxxx
function Cat(){
    Animal.call(this);
    
    (function(){
        function F(){};
        F.prototype = Animal.prototype;
        Cat.prototype = new F();
        Cat.prototype.contructor = Cat;
    })();
}  // 较为推荐

< 返回目录 >

异步回调地狱

js异步编程、大量使用回调函数形成回调地狱；

解决：

减少代码嵌套，将匿名函数命名，通过函数名调用
模块化
- 写模块建议
  （1、抽出函数； 2、凑一波函数，用module.export语句，将它们作为模块接口暴露出来，使用相关引用来加载它们；）
Promise 代码看起来像是自顶向下运行
Genetators ？？？
async/await


xxxxxxxxxx
// formuploader.js 模块，并且通过script标签引入到页面中
module.export.submit = formSubmit
function formSubmit(submitEvent){
    ......
}


xxxxxxxxxx
// file 02
var formUploader = require('formuploader')
document.querySelector('form').onsubmit = formUploader.submit

< 返回目录 >

执行上下文

深浅拷贝

浅拷贝
深拷贝


xxxxxxxxxx
var p; // 待拷贝
var res;
 function deepCopy(p, res){
        var res = res || {};
        for(var i in p){
            if(typeof p[i] === "object"){
                res[i] = (p[i].constructor === "Array")? []: {};
                deepCopy(p[i], res[i]);
            }else{
                res[i] = p[i];
            }
        }
        return res;
    }

模块化

CommonJS
AMD

防抖

节流

Promise

用于表示一个异步操作的最终状态（完成、失败）
promise是一个代理对象，被代理的值在创建时是未知的；
状态
- pending：初始状态，既不是成功，也不是失败。
- fulfilled：意味着操作成功；
- rejected：意味着操作失败
p.then(onFulfilled, onRejected); 成功时调用 onfulfilled
- onFulfilled格式：(res) =>{ }，其中res解析于promise.resolve(res)中res的值
- onfulfilled, onrejected 执行均返回 promise对象，所以可以链式调用；

promise.all( iterable ) ：iterable中全部执行完毕才从pending转下一个状态


xxxxxxxxxx
// Promise.resolve方法的返回值
var promise = new Promise(function(){
    
});
function test(){
    
}

Generator？？？

事件流

完整的 js 事件从 window 开始，最后回到 window 的过程
- 事件捕获阶段：不具体的系欸但先接收到事件，具体元素最后接收到事件；
```
xxxxxxxxxx
dom01.addEventListener( 'click',function(){...}, true );
```
- 处于目标过程（此时目标元素先执行先出现在script中的事件，比如：先写冒泡事件，则先执行冒泡，后执行捕获事件）
- 事件冒泡阶段：从最具体的元素，逐级向上传播到较为不具体的节点；
```
xxxxxxxxxx
dom01.addEventListener( 'click',function(){...}, false );
```
IE提出“冒泡流”，IE6，IE7，IE8
网景提出“捕获流”

事件处理函数

也称回调函数、监听器
- 回调函数传入参数：为事件对象。事件对象中包含“target”属性，为目标对象，即触发事件的元素；
- 回调函数中this指向被点击的元素的DOM对象
- 队列 + 控制线程
- setInterval（）：返回一个timer对象
  - setTimeout()/setInterval()第二个参数取值范围为[1,2^31-1]，超过这个范围都会被置为1；

事件委托、事件代理

事件委托就是利用事件冒泡，只指定一个时间处理程序，就可以管理某一类型的所有事件。
event属性
- target
- timeStamp
- type
- clientX
- clientY

Event Loop 事件循环

Map，FlapMap和Reduce

async和await

Proxy

为什么0.1+0.2 != 0.3

正则表达式

元字符
修饰语
字符简写

《简记》

ECMAScript标识符使用驼峰法；

ECMAScript数据类型具有动态性；变量为松散类型；

不使用var声明的变量将成为全局变量；

未经初始化的值，默认取到undefined；

ECMAScript中函数是对象，不是一种数据类型。

声明的变量如果是要存储对象，则在声明时最好初始化为 null值；

注释：


xxxxxxxxxx
// 单行注释
/* 多行注释
* 
*/

代码行位没有分好会导致代码压缩错误，也可以提高想能，检索解析器不用推测在哪里插入分号，提高性能；

valueof( ) toString( )

ES6

函数的扩展

函数参数的默认值


xxxxxxxxxx
function fn( x, y ){
    y = y || '789';  // 设置默认值，问题：y==false,比如空字符串
    
    if(typeof y === "undefined"){
        y = '789';
    }
}
function fn( x, y = '789'){     // ES6
    ...
}

函数的 length 属性将返回未设置默认值的参数个数
函数的name属性返回函数名

箭头函数

如果箭头函数不需要参数或者需要多个参数，就用一个圆括号代表参数部分；
函数体多余一行用{ } 包起来，并使用 return 语句；
用处
- 简化回调函数
- 函数体内的this指向定义时所在的函数，而不是调用时所在的函数
尾调用


xxxxxxxxxx
var f = function( v ){   // ES5
    return v;
}
var f = v => v;         // ES6
var f2 = （ n1, n2）=>{
    ++n1;
    return n1+n2;
}
const full =({first, last})=> first + ' '+last;
var person={
    first: "Jone",
    last: "Snow"
}
alert( full(person) );

数组方法	功能	备注
sort( comparareFunc )	破坏性排序

目录

cordova

JS

变量

内置类型

Typeof

类型转换

函数

作用域

闭包

call,apply,bind区别 模拟实现

this

对象

new

继承

异步回调地狱

执行上下文

深浅拷贝

模块化

防抖

节流

Promise

Generator？？？

事件流

事件处理函数

事件委托、事件代理

Event Loop 事件循环

Map，FlapMap和Reduce

async和await

Proxy

为什么0.1+0.2 != 0.3

正则表达式

《 简记 》

ES6

函数的扩展

问题

ES6新特性

var let

箭头函数

Browser

跨域

Event loop

存储

渲染机制

HTTP

概念

post 和 get区别

常见状态码

HTTP首部

从输入URL到页面加载完成的过程

CSS

居中

flex

性能优化问题

call,apply,bind区别模拟实现

《简记》