Smileyby|星空灬

function fn(num, callback){
    // callback 传递进来的回调函数
    typeof callback === 'function' ? callback() : null;
    // callback && callback(); 这种方式默认没有上面的严谨
}
fn(10);
fn(20, function(){
    // 此处的匿名函数就是给callback传递的值
})

//=> 需求：执行fn可以实现任意数求和，把求出的和传递给回调函数
function fn(callback){
    var argNumAry = Array.prototype.slice.call(arguments, 1),
        total = eval(argNumAry.join('+'));
    typeof callback === 'function' ? callback.call(fn, total) : null;
}
fn(function(result){
    console.log(result, this); // 100 fn
}, 10,20,30,40);

var ary = [12, 23, 34];
ary.sort(function(a, b){
    //=> a：当前项
    //=> b：后一项
    return a-b; //=> 返回一个大于零的值，则a和b位置交换
})；
ary.forEach(function(item, index, input){
    //=> item：当前便利的这一项
    //=> index：当前便利这一项的索引
    //=> input：原始便利的数组
    //=> forEach每当循环便到数组中的每一项都会把当前传递的回调函数执行一次（不仅执行，还把便利的这一项的值传递给回调函数）
});
//=> map遍历数组中的每一项，原有数组不变，返回结果是修改后的新数组（map相对于forEach来说，增加了对原有想的修改）
ary.map(function(item, index, input){
    //=> item：当前便利的这一项
    //=> index：当前便利这一项的索引
    //=> input：原始便利的数组
    return item*10; //=> 回调函数中返回的是啥，详单与把当前便利的这一项改为啥（回调函数中不屑return，默认返回的是undefined）
});

$.ajax({
    url: '',
    dataType: 'jsonp',
    jsonpCallback: 'fn', //=> 自定义传递给服务器的函数名，而不是用JQ自动生成的
    jsonp: 'cb', //=> 把传递函数名的那个形参改为cb
    success: function(){
        
    }
})

typeof 12; // 'number'
typeof NaN; // 'number'
typeof ''; // 'string'
var flag = true;
typeof flag; // 'boolean'
typeof undefined; // 'undefined'

null == undefined; // true
function fn(n, m){
    if (typeof n === 'undefined') {
        //=> 比双等号更严谨
    }
}
typeof null; // 'object' 虽然是基本数据类型值，但是他属于空对象指针，检测的结果是对象
typeof {}; // 'object'
typeof function(){}; // 'function'
typeof []; // 'object'
typeof /^$/; // 'object'
typeof 1>1?0:2; // 2
typeof (1>1?0:2); // 'number'

[] instanceof Array; // true
[] instanceof RegExp; // false

var num = 12;
num.toFixed(2); // '12.00' 12是Number类的一个实例，可以调取Number.prototype上的方法，但是他是基本类型值

var num2 = new Number(12);
num2.toFixed(); // '12.00'
typeof num2; // 'object'

//=> 不管哪一种方式创建的基本类型值，都是自己所属类的实例（只不过类型不一样而已）
num instanceof Number; // false
num2 instanceof Number; // true

var ary = [];
ary instanceof Array; // true
ary instanceof Object; // true

function Fn(){}
Fn.prototype = new Array(); // 原型继承（Fn是Array的子类）
var f = new Fn();
f instanceof Array; // true f其实不应该是数组，虽然在他的原型上可以找到数组，但是它不具备数组的基础结构，这也是instanceof的弊端

ary.constructor === Array; // true 说明ary是数组
ary.constructor === RegExp; // false
ary.constructor === Object; // false

(12).toString(); // '12'
(true).toString(); // 'true'
[12,23].toString(); // '12.23'
var obj = {name: 'aa'};
obj.toString(); // "[object Object]" 调取的正是Obejct.prototype.toString
Object.prototype.toString.call(12); // "[object Number]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(''); // "[object String]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object undefined]"
Object.prototype.toString.call([]); // '[object Array]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call(/^$/); // "[object RegExp]"
Object.prototype.toString.call(function(){}); // "[object Function]"
Object.prototype.toString.call(Math); // "[object Math]"
Object.prototype.toString.call(document.body); // "[object HTMLBodyElement]"
Object.prototype.toString.call(document); // "[object HTMLDocument]"


//=> obj.toString(); 执行
//=> 执行的是Object.prototype.toString
//=> 方法中的this指向的是obj
//=> object.prototype.toString执行的时候返回的是当前方法中this所属类的信息
//=> 也就是，我们想知道谁的所属类信息，我们就把这个toString方法执行，并且让this变为我们检测的这个数据值，那么方法返回的结果就是当前检测这个值得所属累信息

~function(){
    var obj = {
        isNumber: 'Number',
        isString: 'String',
        isBoolean: 'Boolean',
        isNull: 'Null',
        isUndefined: 'Undefined',
        isPlanObject: 'Obejct',
        isArray: 'Array',
        isRegExp: 'RegExp',
        isFunction: 'Function'
    };
    var check = {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var value = obj[key];
            check[key] = (function(classValue){
                return function(val){
                    return new RegExp('\\[object '+ classValue +'\\]').test(Object.prototype.toString.call(val));
                }
            })(obj[key]);
        }
    }
    window.check = check;
}();

function Parent(){
    this.x = 100;
}
Parent.prototype.getX = function(){
    console.log(this.x);
}
function Children(){
    Parent.call(this); //=> Parent执行，方法中的this依然是子类的实例（再父类构造体中写一些this.xxx=xxx 都相当于给子类的实例增加一些私有的属性和方法）
    this.y = 200;
}
var child = new Children();

//=> Obejct.create
var Obj = {name: 'aa'}
//=> 创建一个空对象，把obj作为当前空对象的原型
var newObj = Obejct.create(obj);
newObj.__proto__ = obj;

function Parent(){
    this.x = 100;
}
Parent.prototype.getX = function(){
    console.log(this.x);
}
var obj = Obejct.create(Parent.prototype);
//=> console.log(obj instanceof Parent); //=> true

function Children(){
    Parent.call(this); //=> 继承父类私有
    this.y = 200;
}
Children.prototype = Object.create(Parent.prototype); //=> 继承父类公有
Children.prototype.constructor = Children;
Children.prototype.getY = function(){
    console.log(this.y);
}

Object.myCreate = function myCreate(obj){
    var Fn = new Function();
    Fn.prototype = obj;
    return new Fn();
};
var aa = {name: 'aa'};
Object.myCreate(aa);

class Fn {
    constructor(){
        //=> constructor:Fn
        //=> 这里边的 this.xxx = xxx;是给当前实例设置的私有属性
        //=> 给实例设置的私有属性
        this.xxx = xxx;
    }
    //=> 这里设置的方法都放在Fn.prototype上（给实例提供的公有的属性方法）
    //=> getX setX 都是给fn的prototype设置方法
    getX(){
        
    }
    setX(){
        
    }
    //=> 把Fn当做一个普通对象，增加的属性和方法
    static xxx(){
        
    }
};
var f = new Fn();

class A{
    constructor(){
        this.x = 100;
    }
    getX(){
       	console.log(this.x);
    }
}
class B extends A {
    constructor(){
        super(); //=> call继承
        this.y = 200;
    }
    getY(){
        console.log(this.y);
    }
}
var b = new B();

Object.prototype.myXX = function(){
    
};
var obj = {name: 'aa'};
for(var i in obj){
	console.log(i);
}

let str = '我是一串中文 @China'
escape(str); //=> "%u6211%u662F%u4E00%u4E32%u4E2D%u6587%20@China"
unescape('%u6211%u662F%u4E00%u4E32%u4E2D%u6587%20@China'); //=> "我是一串中文 @China"

let str = '我是一串中文 @China'
encodeURI(str); //=> "%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%B2%E4%B8%AD%E6%96%87%20@China"
decodeURI('%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%B2%E4%B8%AD%E6%96%87%20@China'); //=> "我是一串中文 @China"

let obj = {
    name: '小明'，
    age: 12,
    url: 'http://www.baidu.com?lx=1&Thyme &time=again',
}
//=> 此处不能使用encodeURI，因为不能处理特殊字符
for (let key in obj){
    str += '${key}=${encodeURIComponent(obj[key])}&';
}
str = str,replace(/&$/g, '');

//=> 后期获取URL问号参数的时候，我们把获取的值依次解码即可
String.prototype.myQueryUrlParameter = function myQueryUrlParameter(){
    let reg = /[?&]([^?&=]+)(?:=([^?&=]*))?/g;
    obj = {};
    this.repalce(reg, (...arg)=> {
        let [,key, value] = arg;
        obj[key] = decodeURIComponent(value);
    });
    return obj;
}

let xhr = new XMLHttpRequest();
xhr.open('get', 'test.json', false);
xhr.onreadystatechange = () => {
    console.log(xhr.readyState);
}
xhr.send();
//=> 只输出一次，结果是4
// 由于采用的是异步编程，所以主任务队列没有完成（其他事情都做不了）1=>2 2=>3 3=>4状态改变3次
// xhr.readyState === 4 AJAX任务完成，主任务队列也执行完成，执行等待任务队列中的事情
// 此时的onreadystatechange只是别到1=>4，执行一次输出结果是4

let xhr = new XMLHttpRequest();
xhr.open('get', 'test.json', false);

//=> 同步，开始发送ajax发送，开启ajax任务，在任务没有完成之前什么都做不了（下面绑定事件也做不了） => loading => 当readyState === 4的时候ajax任务完成，开始执行下面的操作
xhr.send();
xhr.onreadystatechange = () => {
    console.log(xhr.readyState);
}
//=> 绑定方法之前状态已经是4，此时ajax的状态不会改变成其他值，所以事件不会被触发，一次都没有执行（使用ajax同步变成，不要把send放在事件监听前，这样我们无法再绑定的方法中获取到相应主体的内容）

let xhr = new XMLHttpRequest();
xhr.open('get', 'test.json');
xhr.onreadystatechange = () => {
    console.log(xhr.readyState);
}
xhr.send();
// 不需要等待ajax任务结束，此时等待任务队列就已经完成了
// 1=>2 响应头信息返回 状态改变会触发事件监听，把绑定的方法执行（2）
// 2=>3 绑定的方法再次执行（3）
// 3=>4 绑定的方法再次执行（4）
// ajax任务完成

let xhr = new XMLHttpRequest();
xhr.open('get', 'test.json');
xhr.send();
xhr.onreadystatechange = () => {
    console.log(xhr.readyState);
}
// 2=>3=>4

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
    console.log(xhr.readyState);
}
xhr.open('get', 'test.json', false);
// xhr.readyState === 1 AJAX特殊处理的一件事，执行open状态变为1，会主动把之前监听的方法执行一次，然后再去执行send方法
xhr.send();

$.ajax({
    url: 'xxx.json',
    method: 'get', 、、//=> 在老版本的JQ中使用的是type，使用type或method效果相同 
    dataType: 'json', //=> |只是预设获取结果的类型，不会影响服务器结果的返回（服务器端一般给我们返回的都是json格式的字符串），如果我们预设的是json，那么类库中将把服务器返回的字符串转成JSON对象，如果我们预设的是text（默认值），我们把服务器获取的结果直接拿过来操作即可，我们预设的值还可以是xml等。
    cache: false, //=> 设置是否清除缓存，只对get系列请求有作用，默认是true不清除缓存，手动设置为false，JQ类库会在请求URL的末尾追加一个随机数来清除缓存
    data: null, //=> 我们通过data可以把一些信息传递给服务器，get系列请求会把data中的内容拼接在URL的末尾通过问号传参的方式传递给服务器，POST请求会把内容放在请求主题中传递给服务器；data的值可以设置为两种格式：字符串、对象，如果是字符串，设置的值是什么传递给服务器的就是什么，如果是对象，JQ会把对象变为 xxx=xxx&xxx=xxx 这样的字符串传递给服务器
    async: true, //=> 设置同步或者异步，默认是异步（true）、同步（false）
    success: function(res){
    	//=> 当ajax请求成功（readyState === 4 && status是以2|3开头的）
    	//=> 请求成功后JQ会把传递的回调函数执行，并且把获取的结果当做实参传递给回调函数（res就是我们从服务器端获取的结果）
	},
    error: function(){}, //=> 请求错误触发
    complate: function(){}, //=> 不管请求是错误还是正确都会触发回调函数
})

~function(){
    class ajaxClass {
        //=> send ajax
        init(){
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && /^[23]\d{2}$/.test(xhr.status)) {
                    let response = xhr.responseText;
                    //=> dataType 处理
                    try {
                       switch(this.dataType.toUpperCase()) {
                        case 'TEXT':
                        case 'HTML':
                            break;
                        case 'JSON':
                            response = JSON.parse(response);
                            break;
                        case 'XML':
                            response = xhr.responseXML;
                            break;
                    	} 
                    } catch (e) {
                        console.log(e);
                    }
                    this.success(response);
                }
            }
            
            //=> data
            if (this.data !== null) {
                this.formatData();
                if (this.isGET) {
                    this.url += this.querySymbol() + this.data;
                    this.data = null;
                }
            }
            //=> cache
            this.isGET ? this.cacheFn() : null;
            xhr.open(this.method, this.url, this.async);
            xhr.send(this.data);
        }
        
        //=> 把传递的对象格式转化为字符串data
        formatData() {
            //=> this:example
            //=> 检测数据类型的四中方法 instanceof typeof constructor Object.prototype.toString.call()
            if (Object.prototype.toString.call(this.data) === '[object Object]') {
                let obj = this.data,
                	str = ``;
                for (let key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        str += `${key}=${obj[key]}&`;
                    }
                }
                this.data = str.replace(/&$/g,'');
            }
        }
        
        cacheFn(){
            //=> this：example
            !this.cache ? this.url += `${this.querySymbol()}=${Math.random()}` : null;
        }
        
        querySymbol() {
            //=> this:example
            return this.url.indexOf('?') > -1 ? '&' : '?'
        }
    }
    
    //=> init parameters
    window.ajax = function({
        url=null,
        method='GET',
        type='GET',
        data=null,
        dataType='JSON',
        cache=true,
        async=true,
        success=null
    } = {}){
       let _this = new ajaxClass(); 
       ['url', 'method', 'data', 'dataType', 'cache', 'async', 'success'].forEach((item) => {
           if (item === 'method') {
               _this.method = type === null ? method : type;
               return;
           }
           if (item === 'success') {
               _this.success = typeof success === 'function' ? success : new Function();
               return;
           }
           _this[item] = eval(item);
       });
        _this.isGET = /^(GET|DELETE|HEAD)$/i.test(_this.method);
        _this.init();
        return _this;
    } 
}();