JavaScript高级程序设计

// 页面解析完后运行，只适用外部脚本，且不一定按顺序执行
defer=“defer”

// 需要确保脚本不存在依赖关系
stript async

“use strict”;

var message = "hi";

// 检测“不是数值”
isNaN(); 

// 数值转换
parseInt();
parseFloat();
Number(); // 复杂

// 转换为字符串
var ageAsString = age.toString();
// 字符串拼接
var lang = "Java" + "Script";

++ --
~ NOT
& AND
| OR
^ XOR
<< 左移
\>> 有符号右移; >>> 无符号右移
&& || ! 与或非
\* % + -
< > <= >= 
== != === !===
?: = ,

switch(expression) {
    case value: statement
        break;
    default;
}

// 不能重载，但是可通过arguments对象访问参数数组，判断arguments.length达到伪重载
function functionName(arg0,...,argN) {
    statements
}

// 对象或者null则返回object

// 引用类型、Object构造函数为true,基本类型则返回false
alert(person instanceof Object)

// 向上逐级查询，匹配即停止
var color = "blue";

function getColor(){
    var color = "red";
    return color;
}

alert(getColor()); // "red"

// 1 new
var person = new Object();
person.name = "Zhang Yingji";
// 2 对象字面量，可读性好
var person = {
    name : "Zhang Yingji";
}

// 1 new
// new可省略
var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");
// 2 数组字面量
var colors = ["red","blue","green"];
var names = [];

// 一个网页/全局作用域/框架
if (value instanceof Array) {
    // do something
}
// 通用情况,IE9+
if {Array.isArray(value) {
    // do something
}

// sort()会转化为字符串后再比较
// 故接受一个比较函数来正确排序
function compare(value1,value2) {
    if(value1 < value2) {
        return -1;
    } else if (value > value2) {
        return 1;
    } else {
        return 0;
    }
}

values.sort(compare);

// concat() 创建新的数组，末尾追加
var colors2 = colors.concat("yellow");

// slice(start,[end]) 创建新的数组，返回索引start到end的项，不包括end
var colors3 = colors.slice(2);

// splice()
// 删除，指定起始位置、要删除的项数
splice(0,2)
// 插入，指定起始位置、要删除的项数、要插入的项
splice(2,0,"zhang","yingji");
// 替换，指定起始位置，要删除的项数，要插入的项
splice(2,1,"zhang");

// 从开头向后查找
indexOf()
// 从结尾向前查找
lastIndexOf()

// 创建,获得当前日期和时间
var now = new Date();

// 基于GTM创建指定日期 
// 1 Date.parse(),可以后台调用
var someDate = new Date("May 25,2004");
// 2 Date.UTC()
// GMT 2005.5.5 5:55:55,一月是0
var allFives = new Date(Date.UTC(2005,4,5,17,5,5)

// 基于系统设置本地时区，参数一致
var allFives = new Date(2005,4,5,17,5,5)

// 返回调用方法时的毫秒数
var start = Date.now();

// 使用字面量形式
var expression = / pattern / falgs

// 使用构造函数
var pattern = new RegExp("pattern","flags")

([{\^$|)>*+.]}

// exec()
// test()，验证是否匹配时常用
if(pattern.test(text)) {
    alert("matched")
}

// 函数声明，提前
function sum(num1,num2){}

// 函数表达式,另外构造函数法不推荐
var sum = function(num1,num2){}

// arguments.callee解除代码与函数名的耦合
// 现在已不推荐使用,因为每次递归调用时都需要重新创建。影响浏览器的性能，还会影响闭包
function factorial(num) {
    if(num <= 1) {
        return 1;
    } else {
        return num * arguments.callee(num-1);
    }
}

// 改进的方法是给内部函数一个名字

3. `bind()` 创建一个函数实例,便于稍后调用

##### 基本包装类型

...

## 6 面向对象的程序设计

##### 理解对象

`Object.defineProperty()`,IE9+
`Object.defineProperties()`,IE9+

可以修改默认属性的特性，用得少，但是**可以帮助理解JavaScript对象**。

1 数据属性

下面通过一个例子了解一下数据属性

2 访问器属性

包括`configurable`,`enumerable`以及一对函数`getter`和`setter`（非必须，默认undefined）

3 读取属性的特性

`getOwnPropertyDescriptor()` ,IE9+

##### 创建对象

使用同一个接口创建很多对象，会产生大量重复代码

~~1 工厂模式~~

缺点：没有解决对象识别的问题

2 构造函数模式

特点：构造函数大写字母开头，用new实例化

**缺点**：每个方法都在实例上重新创建

3 原型模式

每个函数都有一个`prototype`属性，它是一个指针，指向一个对象(原型对象)。它包含可以由特定类型的所有实例共享的属性和方法。

**优点**：让所有对象实例共享它所包含的属性和方法

**3.1 理解原型对象**

【函数与原型对象】创建新函数→得到prototype属性，指向原型对象→原型对象获得一个constructor(构造函数)属性，指向prototype所在的（构造）函数，举例:Person.protype.constructor指向Person

【实例与构造函数的原型对象】创建实例对象→内部包含一个指针[[Prototype]]，\_\_proto\_\_,指向构造函数的原型对象，举例：person1的[[Prototype]]指向Person的原型对象

确定这种关系的方法

搜索属性时，从实例往原型对象向上搜，直到找到为止

使用`hasOwnProperty()`检测一个属性是否存在实例当中，存在返回true

3.2 原型与 in 操作符

只要通过对象能访问到属性就返回true

结合`hasOwnProperty()`使用，在对象属性存在的情况下，**封装函数来判断属性存在实例中还是原型中**

所有定义的属性都是可枚举的（IE9+)

3.3 更简单的原型语法

**使用字面量(相当于重写prototype)**,但constructor属性不再指向构造函数了，如果很需要constructor,则可以在字面量中加入constructor属性。

但只要它的[[Enumberable]默认设成了true,原生constructor是不可枚举的，可以使用Object.defineProperty()设为false

3.4 原型的动态性

**重写原型对象会切断现有原型与之前任何已经存在的对象实例之间的联系**

3.5 原生对象的原型

原生引用类型也是通过原型模式创建的

3.6 原型对象的问题

默认的初始化参数相同，包含引用类型值的属性会影响到所有实例

4 组合使用构造函数模式和原型模式

**优点**：实例有自己的属性副本，又共享了方法的引用，最大限度节省了内存

5 动态原型模式

**优点：把所有信息都封装在了构造函数中，通过判断存在的方法是否有效来决定是否要出书画原型，保持了组合使用的优点**。

if块初次调用构造函数才会执行，节省空间，若还要添加其他方法也可以直接写在if块中。因为要么它们全都还没有定义(new第一个实例时)，要么已经全都定义了(new其他实例后)，即它们的存在性是一致的，用同一个判断就可以了，而不需要分别对它们进行判断
    

// 方法
if(typeof this.sayName != "function") {
    Person.prototype.sayName = function(){};
} } ```

function Person(name){
    var o = new Object();
    o.name = name;
    
    o.sayName = function(){
        alert(this.name);
    }
    return o;
}

var friend = new Person('Tom');

function Person(name){
    var o = new Objcet();
    
    // 可以定义私有变量和函数
    
    // 添加方法,仅本方法访问得到name
    o.sayName = function(){
        alert(name);
    };
    
    return o;
}

var friend = Person('yingji');

function Super(){}
function Sub(){}

// 继承
Sub.prototype = new Super();

// instanceof操作符
alert(instance instanceof Object);

// isPrototypeOf()
alert(Super.prototype.isPrototypeOf(instance));

function Sub(){
    Super.call(this);
}

function Super(name){
    this.name = name;
    this.colors = ["red"];
}

Super.prototype.sayName = function(){
    alert(this.name);
};

function Sub(name,age){
    // 继承属性
    Super.call(this,name);
    this.age = age;
}

// 继承方法
sub.prototype = new Super();
sub.prototype.constructor = Sub;
sub.prototype.sayAge = function(){
    alert(this.age);
};

var person = {
    name: "tom"
};

// 第二个属性可选，格式参照Object.defineProperties()
var anotherPerson = Object.create(person, {
    name: {
        value: "xiaoming"
    }
});

function createAnother(original){
    var clone = object(original); // 创建新对象
    clone.sayHi = function(){}; // 增强函数
    
    return clone;
}

var person = {
    name: "tom"
};

var anotherPerson = createAnother(person);

function inheritPrototype(sub,super){
    var prototype = object(super.prototype); // 创建对象
    prototype.constructor = sub; // 增强对象
    sub.prototype = prototype; // 指定对象
}

function Super(name){
    this.name = name;
    this.color = ["red"];
}
Super.prototype.sayName = function(){}

function Sub(name,age){
    // 继承属性
    Super.call(this,name)
    
    this.age = age;
}

// 组合继承
// Sub.prototype = new Super();

// 替换前面为子类型原型赋值的语句
inheritPrototype(Sub,Super);
Sub.prototype.sayAge = function(){};

function factorial(num){
    if(num <= 1) {
        return 1;
    } else {
        // return num * factorial(num-1);
        // 用arguments.callee代替函数名，严格模式下不能用
        return num * arguments.callee(num-1);
    }
}

function fn(){
    var result = new Array();
    
    for(var i=0; i < 10; i++) {
        result[i] = function(){
            return i;
        };
    }
    
    return result; // 10个10
}

result[i] = function(num){
    return function(){
        return num;
    };
}(i);

// 创建
var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4) {
        // 状态码判断
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert('Request was unsuccessful:' + xhr.status);
        } 
    }
};

// 启动一个请求：请求的类型、url、是否异步发送
xhr.open('get', 'example.php', true)
// 发送：如不需要主体发送请求则传入null
xhr.send(null);

// 接收到响应前可取消异步请求
xht.abort();

xhr.setRequestHeader('MyHeader','MyValue');

// 获取
var myHeader = xhr.getResponseHeader('MyHeader');
var allHeader = xhr.getAllResponseHeaders();

function addURLparam(url, name, value){
    url += (url.indexOf('?') == -1 ? '?' : '&');
    url += encodeURIComponent(name) + "=" encodeURIComponent(value);
    return url;
}

xhr.open('post', 'test.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var form = document.getElementById('user-info');
xhr.send(serialize(form));

xhr.send(new FromData());

xhr.timeout = 1000;
xhr.ontimeout = function(){
    alert('did not return in a second');
}

// 强迫将响应当做XML而非纯文本来处理
xhr.overrideMimeType('text/xml');

xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};

// 创建进度指示器
xhr.onprogress = function (event) {
    var divStatus = document.getElementById("status");
    if (event.lengthComputable) {
        divStatus.innerHTML = "Recived" + event.loaded + " of " + event.total + " bytes";
    }
}

// 后端开启CORS权限, *表示允许任何域
// 请求和响应不包含cookie
Access-Control-Allow-Origin: https://blog.zhangyingji.top

var img = new Image();
// 如此只要请求完成就能得到通知
img.onload = img.onerror = function(){
    alert("Done");
};
img.src = "http://www.example.com/test?name=zhangyingji";

function handleResponse(response){
    alert(response);
}

var script = document.createElement("script);
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document,body.firstChild);

// JQuery
$(function(){
    $.ajax({
        type: "get",
        async: false,
        url: "",
        dataType: "jsonp",
        // 传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonp: "callback",
        // 回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动处理数据 jsonpCallback:"flightHandler",
        success: function(json){
            alert('success');
        },
        error: function(){
            alert('fail');
        }
    }); 
});

// 加载后取得初始状态
if(navigator.onLine) {
    // 正常
} else {
    // 执行离线状态时的任务
}

// HTML5的两个事件
// 再检测是否变化
EventUtil.addHandler(window,"online",function(){
    alert("online");
)};
EventUtil.addHandler(window,"offline",function(){
    alert("offline");
)};