Promise

在 2016年9月6日上张贴由 BestLove

// "承诺将来会执行"的对象在JavaScript中称为Promise对象
// new Promise(function (resolve, reject) {});
// then回调resolve catch回调reject
// Math.random() * 2 < 1 会走then的回调，反之走catch的回调
<div id="test-promise-log">
    <p>Log:</p>
</div>
'use strict';
var logging = document.getElementById('test-promise-log');
function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}
var p = new Promise(function (resolve, reject) {
    var ran = Math.random() * 2;
    log('the random num is ' + ran);
    setTimeout(function(){
        if (ran < 1) {
            resolve('quick');
        } else {
            reject('slow');
        }
    }, ran * 1000);
});
p.then(function(data) {
    log('good:' + data);
}).catch(function(data) {
    log('bad:' + data);
});

// 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理
// job1.then(job2).then(job3).catch(handleError);
// job1、job2、job3...都是promise对象
// 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000
function multiply(input) {
    return new Promise(function(resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    }); 
}
function add(input) {
    return new Promise(function(resolve, reject){
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}
var p = new Promise(function(resolve, reject){
    log('start to calculat');
    resolve(5);
});
p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function(result) {
    log('result=' + result);
 });

// 除了串行执行若干异步任务外，Promise还可以并行执行异步任务
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});
// 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果
Promise.race([p1, p2]).then(function (result) {
    console.log(result);  // 'P1'
});

// "承诺将来会执行"的对象在JavaScript中称为Promise对象

// new Promise(function (resolve, reject) {});

// then回调resolve catch回调reject

// Math.random() * 2 < 1 会走then的回调，反之走catch的回调

</div>

'use strict';

var logging = document.getElementById('test-promise-log');

function log(s) {

var p = document.createElement('p');

p.innerHTML = s;

logging.appendChild(p);

}

var p = new Promise(function (resolve, reject) {

var ran = Math.random() * 2;

log('the random num is ' + ran);

setTimeout(function(){

if (ran < 1) {

resolve('quick');

} else {

reject('slow');

}

}, ran * 1000);

});

p.then(function(data) {

log('good:' + data);

}).catch(function(data) {

log('bad:' + data);

});

// 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理

// job1.then(job2).then(job3).catch(handleError);

// job1、job2、job3...都是promise对象

// 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000

function multiply(input) {

return new Promise(function(resolve, reject) {

log('calculating ' + input + ' x ' + input + '...');

setTimeout(resolve, 500, input * input);

});

}

function add(input) {

return new Promise(function(resolve, reject){

log('calculating ' + input + ' + ' + input + '...');

setTimeout(resolve, 500, input + input);

});

}

var p = new Promise(function(resolve, reject){

log('start to calculat');

resolve(5);

});

p.then(multiply)

.then(add)

.then(multiply)

.then(add)

.then(function(result) {

log('result=' + result);

});

// 除了串行执行若干异步任务外，Promise还可以并行执行异步任务

var p1 = new Promise(function (resolve, reject) {

setTimeout(resolve, 500, 'P1');

});

var p2 = new Promise(function (resolve, reject) {

setTimeout(resolve, 600, 'P2');

});

// 同时执行p1和p2，并在它们都完成后执行then

Promise.all([p1, p2]).then(function (results) {

console.log(results); // 获得一个Array: ['P1', 'P2']

});

// 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果

Promise.race([p1, p2]).then(function (result) {

console.log(result); // 'P1'

});

浏览器操作、AJAX、跨域

在 2016年9月4日上张贴由 BestLove

# window对象不但充当全局作用域，而且表示浏览器窗口
// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)
// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高
// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高
window.innerWidth;
window.innerHeigth;

# navigator
// navigator对象表示浏览器的信息，最常用的属性包括
navigator.appName                  //浏览器名称
navigator.appVersion               //浏览器版本
navigator.language                 //浏览器设置的语言
navigator.platform                 //操作系统类型
navigator.userAgent                //浏览器设定的User-Agent字符串
// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的
// 所以不要使用下面这种判断方式
var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}
// 充分利用 || 和 undefined 来做浏览器兼容
var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有
screen.width                //屏幕宽度，以像素为单位
screen.height               //屏幕高度，以像素为单位
screen.colorDepth           //返回颜色位数，如8、16、24

# location
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol;              // 'http'
location.host;                  // 'www.example.com'
location.port;                  // '8080'
location.pathname;              // '/path/index.html'
location.search;                // '?a=1&b=2'
location.hash;                  // 'TOP'
location.assign('/discuss');    // 加载一个新页面
location.reload();              // 重新加载

# document对象表示当前页面
// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
document.title = '努力学习JavaScript!';
var div1 = document.getElementById('div1');     //定位唯一的一个DOM节点
div1.tagName;                                   //div
div1.children;                                  //所有直属子节点 .length获取节点数组长度
div1.parentElement;                             //父节点
div1.firstElementChild;                         //第一个子节点
div1.lastElementChild;                          //最后一个子节点
div1.innerHTML;
div1.innerText;
p.style.fontSize = '20px';                      //设置css样式，驼峰
document.getElementsByTagName('div');           //返回一组DOM节点
document.getElementsByClassName('class1');      //返回一组DOM节点
// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取
// 为了安全起见，建议服务器设置httpOnly
document.cookie;

# appendChild
/*  
    只是移动，并不是添加
    操作前：
    <div id="div2">bbbb</div>
    <div id="div1">aaaa</div>
    操作后：
    <div id="div1">aaaa
        <div id="div2">bbbb</div>
    </div>
*/
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
// 添加
var div3 = document.createElement('div');
div3.id = 'div3';
div3.innerText = 'cccc';
div1.appendChild(div3);
// 添加样式
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = 'div { color: red }';
document.getElementsByTagName('head')[0].appendChild(s);
// 把newElement插入指定的referenceElement之前
parentElement.insertBefore(newElement, referenceElement);
// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed
var removed = div1.removeChild(div2);

# 文件
// enctype="multipart/form-data" method="post"
// 或使用 HTML5 File API File和FileReader两个主要对象
<input type="file">

# AJAX(Asynchronous JavaScript and XML)
// 同源策略 域名要相同 协议要相同(http和https不同) 端口号要相同
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {    //兼容低版本IE
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

# 跨域
// JSONP 
// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)
/*
   CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*
   包括GET、HEAD和POST
   POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain
   并且不能出现任何自定义头（例如，X-Custom: 12345）
   对于PUT、DELETE以及其他类型如application/json的POST请求
   在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）
   OPTIONS /path/to/resource HTTP/1.1
   Host: bar.com
   Origin: http://my.com
   Access-Control-Request-Method: POST
   服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误
   HTTP/1.1 200 OK
   Access-Control-Allow-Origin: http://my.com
   Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
   Access-Control-Max-Age: 86400
*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

# window对象不但充当全局作用域，而且表示浏览器窗口

// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)

// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高

// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高

window.innerWidth;

window.innerHeigth;

# navigator

// navigator对象表示浏览器的信息，最常用的属性包括

navigator.appName //浏览器名称

navigator.appVersion //浏览器版本

navigator.language //浏览器设置的语言

navigator.platform //操作系统类型

navigator.userAgent //浏览器设定的User-Agent字符串

// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的

// 所以不要使用下面这种判断方式

var width;

if (getIEVersion(navigator.userAgent) < 9) {

width = document.body.clientWidth;

} else {

width = window.innerWidth;

}

// 充分利用 || 和 undefined 来做浏览器兼容

var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有

screen.width //屏幕宽度，以像素为单位

screen.height //屏幕高度，以像素为单位

screen.colorDepth //返回颜色位数，如8、16、24

# location

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

location.assign('/discuss'); // 加载一个新页面

location.reload(); // 重新加载

# document对象表示当前页面

// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点

document.title = '努力学习JavaScript!';

var div1 = document.getElementById('div1'); //定位唯一的一个DOM节点

div1.tagName; //div

div1.children; //所有直属子节点 .length获取节点数组长度

div1.parentElement; //父节点

div1.firstElementChild; //第一个子节点

div1.lastElementChild; //最后一个子节点

div1.innerHTML;

div1.innerText;

p.style.fontSize = '20px'; //设置css样式，驼峰

document.getElementsByTagName('div'); //返回一组DOM节点

document.getElementsByClassName('class1'); //返回一组DOM节点

// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取

// 为了安全起见，建议服务器设置httpOnly

document.cookie;

# appendChild

只是移动，并不是添加

操作前：

操作后：

<div id="div1">aaaa

</div>

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

div1.appendChild(div2);

// 添加

var div3 = document.createElement('div');

div3.id = 'div3';

div3.innerText = 'cccc';

div1.appendChild(div3);

// 添加样式

var s = document.createElement('style');

s.setAttribute('type', 'text/css');

s.innerHTML = 'div { color: red }';

document.getElementsByTagName('head')[0].appendChild(s);

// 把newElement插入指定的referenceElement之前

parentElement.insertBefore(newElement, referenceElement);

// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed

var removed = div1.removeChild(div2);

# 文件

// enctype="multipart/form-data" method="post"

// 或使用 HTML5 File API File和FileReader两个主要对象

# AJAX(Asynchronous JavaScript and XML)

// 同源策略域名要相同协议要相同(http和https不同) 端口号要相同

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

} else { //兼容低版本IE

request = new ActiveXObject('Microsoft.XMLHTTP');

}

# 跨域

// JSONP

// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)

CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*

包括GET、HEAD和POST

POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain

并且不能出现任何自定义头（例如，X-Custom: 12345）

对于PUT、DELETE以及其他类型如application/json的POST请求

在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）

OPTIONS /path/to/resource HTTP/1.1

Host: bar.com

Origin: http://my.com

Access-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://my.com

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS

Access-Control-Max-Age: 86400

typeof、包装对象、Date、JSON

在 2016年9月4日上张贴由 BestLove

# typeof关键字
// number string boolean function undefined
typeof 123;                     // 'number'
typeof NaN;                     // 'number'
typeof 'str';                   // 'string'
typeof true;                    // 'boolean'
typeof undefined;               // 'undefined'
typeof Math.abs;                // 'function'
typeof null;                    // 'object'
typeof [];                      // 'object'
typeof {};                      // 'object'
// 判断是否是Array
Array.isArray(arr)
// 判断是否是null
myVar === null
// 判断某个全局变量是否存在
typeof window.myVar === 'undefined'
// 函数内部判断某个变量是否存在
typeof myVar === 'undefined'
// 任何对象都有toString()方法 除了null和undefined
// number使用toString()会报错，可以使用..或()
123..toString()             //'123'
(123).toString()            //'123'

# 包装对象
// 尽量不要去用包装对象，没撒卵用
// 如果没有加new关键字 Number() Boolean() String() 就是普通的强制转换函数
// 如parseInt() parseFloat() object.toString() 
var n = new Number(123);        // 123,生成了新的包装类型    object
var b = new Boolean(true);      // true,生成了新的包装类型   object
var s = new String('str');      // 'str',生成了新的包装类型  object

# Date对象
// Date获取的时间是根据客户端操作系统的时间来的，所以未必准确
var now = new Date();
now;                        // Sun Sep 04 2016 21:10:22 GMT+0800 (中国标准时间)
now.getFullYear();          // 2016, 年份
now.getMonth();             // 8, 月份，注意月份范围是0~11，8表示九月
now.getDate();              // 4, 表示4号
now.getDay();               // 0, 表示星期天
now.getHours();             // 21, 24小时制
now.getMinutes();           // 10, 分钟
now.getSeconds();           // 22, 秒
now.getMilliseconds();      // 13, 毫秒数
now.getTime();              // 1472994622013, 以number形式表示的时间戳
// 可以传入时间戳(精确到毫秒数)
var oneDay = new Date(1472994622013);

# JSON
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
// 第2个参数可以进行筛选和处理格式化后的json值，第3个参数指定缩进距离
JSON.stringify(xiaoming, null, '    ');
/*
    {
        "name": "小明",
        "age": 14
    }
*/
JSON.stringify(xiaoming, ['name', 'age'], '    ');
function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    if (key == 'skills') {
        return '';
    }
    return value;
}
/*
    {
      "name": "小明",
      "age": 14,
      "gender": true,
      "height": 1.65,
      "grade": null,
      "middle-school": "\"W3C\" MIDDLE SCHOOL",
      "skills": ""
    }
*/
JSON.stringify(xiaoming, convert, '  ');
// 如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key
            'Name': this.name,
            'Age': this.age
        };
    }
};
// 反序列号JSON
JSON.parse('[1,2,3,true]');                   // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}');       // Object {name: '小明', age: 14}
JSON.parse('true');                           // true
JSON.parse('123.45');                         // 123.45
// 可以接收一个函数，用来转换解析出的属性
JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
}); // Object {name: '小明同学', age: 14}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

# typeof关键字

// number string boolean function undefined

typeof 123; // 'number'

typeof NaN; // 'number'

typeof 'str'; // 'string'

typeof true; // 'boolean'

typeof undefined; // 'undefined'

typeof Math.abs; // 'function'

typeof null; // 'object'

typeof []; // 'object'

typeof {}; // 'object'

// 判断是否是Array

Array.isArray(arr)

// 判断是否是null

myVar === null

// 判断某个全局变量是否存在

typeof window.myVar === 'undefined'

// 函数内部判断某个变量是否存在

typeof myVar === 'undefined'

// 任何对象都有toString()方法除了null和undefined

// number使用toString()会报错，可以使用..或()

123..toString() //'123'

(123).toString() //'123'

# 包装对象

// 尽量不要去用包装对象，没撒卵用

// 如果没有加new关键字 Number() Boolean() String() 就是普通的强制转换函数

// 如parseInt() parseFloat() object.toString()

var n = new Number(123); // 123,生成了新的包装类型 object

var b = new Boolean(true); // true,生成了新的包装类型 object

var s = new String('str'); // 'str',生成了新的包装类型 object

# Date对象

// Date获取的时间是根据客户端操作系统的时间来的，所以未必准确

var now = new Date();

now; // Sun Sep 04 2016 21:10:22 GMT+0800 (中国标准时间)

now.getFullYear(); // 2016, 年份

now.getMonth(); // 8, 月份，注意月份范围是0~11，8表示九月

now.getDate(); // 4, 表示4号

now.getDay(); // 0, 表示星期天

now.getHours(); // 21, 24小时制

now.getMinutes(); // 10, 分钟

now.getSeconds(); // 22, 秒

now.getMilliseconds(); // 13, 毫秒数

now.getTime(); // 1472994622013, 以number形式表示的时间戳

// 可以传入时间戳(精确到毫秒数)

var oneDay = new Date(1472994622013);

# JSON

var xiaoming = {

age: 14,

gender: true,

height: 1.65,

grade: null,

'middle-school': '\"W3C\" Middle School',

skills: ['JavaScript', 'Java', 'Python', 'Lisp']

};

// 第2个参数可以进行筛选和处理格式化后的json值，第3个参数指定缩进距离

JSON.stringify(xiaoming, null, ' ');

{

"name": "小明",

"age": 14

}

JSON.stringify(xiaoming, ['name', 'age'], ' ');

function convert(key, value) {

if (typeof value === 'string') {

return value.toUpperCase();

}

if (key == 'skills') {

return '';

}

return value;

}

{

"name": "小明",

"age": 14,

"gender": true,

"height": 1.65,

"grade": null,

"middle-school": "\"W3C\" MIDDLE SCHOOL",

"skills": ""

}

JSON.stringify(xiaoming, convert, ' ');

// 如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法

var xiaoming = {

age: 14,

gender: true,

height: 1.65,

grade: null,

'middle-school': '\"W3C\" Middle School',

skills: ['JavaScript', 'Java', 'Python', 'Lisp'],

toJSON: function () {

return { // 只输出name和age，并且改变了key

'Name': this.name,

'Age': this.age

};

}

};

// 反序列号JSON

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]

JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}

JSON.parse('true'); // true

JSON.parse('123.45'); // 123.45

// 可以接收一个函数，用来转换解析出的属性

JSON.parse('{"name":"小明","age":14}', function (key, value) {

if (key === 'name') {

return value + '同学';

}

return value;

}); // Object {name: '小明同学', age: 14}

prototype原型、原型链、class

在 2016年9月4日上张贴由 BestLove

# 原型
// js中没有class的概念，所以需要使用prototype(原型)来模拟
// 把Studuent理解为一个抽象的class，但其实它就是个实例
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};
var xiaoming = {
    name: '小明'
};
// 将小明的原型指向Student，看上去好像小明继承了Student
xiaoming.__proto__ = Student;
xiaoming.name;          // 小明
xiaoming.run();         // 小明 is running...

// 实际编写中，不要直接使用__proto__去改变一个对象的原型
function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}
var xiaoming = createStudent('小明');
xiaoming.run();                         // 小明 is running...
xiaoming.__proto__ === Student;         // true

// JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
// 当我们定义obj.xxx访问一个对象属性时，如果没找到，就会去它的原型对象上找
// 如果一直没找到，就会上溯到Object.prototype对象
// 如果还没有，就返回undefined，下面是arr的原型链例子(类似于php中的多重继承)
// arr ----> Array.prototype ----> Object.prototype ----> null

// 除了用{}创建对象外，还可以使用构造函数创建对象，这种写法更像class的写法了
// Student看上去就是一个普通函数，但是使用new关键字后，就变成了构造函数
// 它绑定的this指向新创建的对象，并默认返回this
function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
// xiaoming -> Student.prototype -> Object.prototype -> null
var xiaoming = new Student('小明');
xiaoming.hello();

// 用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：
xiaoming.constructor === Student.prototype.constructor;     // true
Student.prototype.constructor === Student;                  // true
Object.getPrototypeOf(xiaoming) === Student.prototype;      // true
xiaoming instanceof Student;                                // true

// 上面的写法其实还是有一些问题的，如果再创建小红、小张、小李...
// 都会创建各自的hello方法，这样太浪费内存了，可以让他们共享一个hello
function Student(name) {
    this.name = name;
}
Student.prototype.hello = function() {
   alert('Hello, ' + this.name + '!'); 
};

// 漏下new在strict模式下会报错，非strict模式下可以会造成意想不到的结果
// 所以规定构造函数首字母应该大写，一般函数首字母应该小写
// 这样使用jslint检查工具可以检测到漏下new关键字

// 一个常用的编程模式像这样，好处是可以不写new，而且参数比较灵活
// 可以不传参数，也可以分开传
function Student(props) {
    this.name = props.name || '匿名';     // 默认值为'匿名'
    this.grade = props.grade || 1;       // 默认值为1
}
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
function createStudent(props) {
    return new Student(props || {})
}
var xiaoming = createStudent({
    name: '小明'
});
xiaoming.grade;     // 1

# 原型继承
'use strict';
function Student(props) {
    this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}
// PrimaryStudent构造函数
function PrimaryStudent(props) {
    // 在Student的构造函数中绑定this变量(调用父类构造函数)
    Student.call(this, props);
    this.grade = props.grade || 1;
}
// 调用了父类的构造函数不等于继承了父类，因为原型链没有改变
// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null
// 利用空函数桥接，可以使得原型链变为如下
// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
function inherits(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
inherits(PrimaryStudent, Student);
// 继续在PrimaryStudent原型（就是new F()对象）上定义方法
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
// 验证
alert(xiaoming.__proto__ === PrimaryStudent.prototype); // true
alert(xiaoming.__proto__.__proto__ === Student.prototype); // true
alert(xiaoming instanceof PrimaryStudent); // true
alert(xiaoming instanceof Student); // true

# ES6新增了class关键字
// 有了class关键字，可以更方便地定义类和继承了
// 但是浏览器支持可能还不太好
// 可以试试Babel这个工具将class代码转换成prototypte代码
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

# 原型

// js中没有class的概念，所以需要使用prototype(原型)来模拟

// 把Studuent理解为一个抽象的class，但其实它就是个实例

var Student = {

height: 1.2,

run: function () {

console.log(this.name + ' is running...');

}

};

var xiaoming = {

};

// 将小明的原型指向Student，看上去好像小明继承了Student

xiaoming.__proto__ = Student;

xiaoming.name; // 小明

xiaoming.run(); // 小明 is running...

// 实际编写中，不要直接使用__proto__去改变一个对象的原型

function createStudent(name) {

// 基于Student原型创建一个新对象:

var s = Object.create(Student);

// 初始化新对象:

s.name = name;

return s;

}

var xiaoming = createStudent('小明');

xiaoming.run(); // 小明 is running...

xiaoming.__proto__ === Student; // true

// JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

// 当我们定义obj.xxx访问一个对象属性时，如果没找到，就会去它的原型对象上找

// 如果一直没找到，就会上溯到Object.prototype对象

// 如果还没有，就返回undefined，下面是arr的原型链例子(类似于php中的多重继承)

// arr ----> Array.prototype ----> Object.prototype ----> null

// 除了用{}创建对象外，还可以使用构造函数创建对象，这种写法更像class的写法了

// Student看上去就是一个普通函数，但是使用new关键字后，就变成了构造函数

// 它绑定的this指向新创建的对象，并默认返回this

function Student(name) {

this.name = name;

this.hello = function () {

alert('Hello, ' + this.name + '!');

}

// xiaoming -> Student.prototype -> Object.prototype -> null

var xiaoming = new Student('小明');

xiaoming.hello();

// 用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

xiaoming.constructor === Student.prototype.constructor; // true

Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

// 上面的写法其实还是有一些问题的，如果再创建小红、小张、小李...

// 都会创建各自的hello方法，这样太浪费内存了，可以让他们共享一个hello

function Student(name) {

this.name = name;

}

Student.prototype.hello = function() {

alert('Hello, ' + this.name + '!');

};

// 漏下new在strict模式下会报错，非strict模式下可以会造成意想不到的结果

// 所以规定构造函数首字母应该大写，一般函数首字母应该小写

// 这样使用jslint检查工具可以检测到漏下new关键字

// 一个常用的编程模式像这样，好处是可以不写new，而且参数比较灵活

// 可以不传参数，也可以分开传

function Student(props) {

this.name = props.name || '匿名'; // 默认值为'匿名'

this.grade = props.grade || 1; // 默认值为1

}

Student.prototype.hello = function () {

alert('Hello, ' + this.name + '!');

};

function createStudent(props) {

return new Student(props || {})

}

var xiaoming = createStudent({

});

xiaoming.grade; // 1

# 原型继承

'use strict';

function Student(props) {

this.name = props.name || 'Unnamed';

}

Student.prototype.hello = function () {

alert('Hello, ' + this.name + '!');

}

// PrimaryStudent构造函数

function PrimaryStudent(props) {

// 在Student的构造函数中绑定this变量(调用父类构造函数)

Student.call(this, props);

this.grade = props.grade || 1;

}

// 调用了父类的构造函数不等于继承了父类，因为原型链没有改变

// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

// 利用空函数桥接，可以使得原型链变为如下

// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

function inherits(Child, Parent) {

var F = function(){};

F.prototype = Parent.prototype;

Child.prototype = new F();

Child.prototype.constructor = Child;

}

inherits(PrimaryStudent, Student);

// 继续在PrimaryStudent原型（就是new F()对象）上定义方法

PrimaryStudent.prototype.getGrade = function () {

return this.grade;

};

var xiaoming = new PrimaryStudent({

grade: 2

});

// 验证

alert(xiaoming.__proto__ === PrimaryStudent.prototype); // true

alert(xiaoming.__proto__.__proto__ === Student.prototype); // true

alert(xiaoming instanceof PrimaryStudent); // true

alert(xiaoming instanceof Student); // true

# ES6新增了class关键字

// 有了class关键字，可以更方便地定义类和继承了

// 但是浏览器支持可能还不太好

// 可以试试Babel这个工具将class代码转换成prototypte代码

class Student {

constructor(name) {

this.name = name;

}

hello() {

alert('Hello, ' + this.name + '!');

}

class PrimaryStudent extends Student {

constructor(name, grade) {

super(name);

this.grade = grade;

}

myGrade() {

alert('I am at grade ' + this.grade);

}

箭头函数、迭代生成器

在 2016年9月4日上张贴由 BestLove

# ES6新增箭头函数(Arrow Function)
// 下面2个定义是等效的
var fn = x => x * x;
var fn = function (x) {
    return x * x;
};
// 多个参数用()包裹
(x, y) => x + y;
// 无参数
() => 2;
// 可变参数
(a, b, ...rest) => {
    var i, sum = a + b;
    for(i=0;i<rest.length;i++) {
        sum += rest[i];
    }
    return sum;
};
// 返回对象用()包裹，否则{}会语义冲突
x => ({key:3});

// 箭头函数修复了this的指向，不需要用that来捕获this了
// 但是在箭头函数中使用apply和call，第一个参数无法对this进行绑定了(第一个参数会被忽略)
var obj = {
    birth: 1990,
    getAge: function () {
        var fn = () => {
            return new Date().getFullYear() - this.birth;
        };
        return fn();
    }
};

# ES6新增generator生成器
// 以斐波那契数列为例 0 1 1 2 3 5 8 13 21 ...
// 普通的函数实现，只能一次性返回整个数组
function fib(max) {
    var t,
        a = 0,
        b = 1,
        arr = [0, 1];
    while(arr.length < max) {
        t = a + b;
        a = b;
        b = t;
        arr.push(t);
    }
    return arr;
}

// 以generator实现
function* fib(max) {
    var t,
        a = 0,
        b = 1,
        i;
    for(i=0;i<max;i++) {
        yield a;
        t = a + b;
        a = b;
        b = t;
    }
    return a;
}
var gen = fib(5);
// 可以分段返回
console.log(gen.next());        // Object {value: 0, done: false}
console.log(gen.next());        // Object {value: 1, done: false}
console.log(gen.next());        // Object {value: 1, done: false}
console.log(gen.next());        // Object {value: 2, done: false}
console.log(gen.next());        // Object {value: 3, done: false}
console.log(gen.next());        // Object {value: 5, done: true}
console.log(gen.next());        // Object {value: undefined, done: true}
// 可以对其进行迭代
for(let i of fib(5)) {
    console.log(i);
}

// generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码
ajax('http://url-1', data1, function (err, result) {
    if (err) {
        return handle(err);
    }
    ajax('http://url-2', data2, function (err, result) {
        if (err) {
            return handle(err);
        }
        ajax('http://url-3', data3, function (err, result) {
            if (err) {
                return handle(err);
            }
            return success(result);
        });
    });
});
// 这种写法和上面的效果是一样的
try {
    r1 = yield ajax('http://url-1', data1);
    r2 = yield ajax('http://url-2', data2);
    r3 = yield ajax('http://url-3', data3);
    success(r3);
}
catch (err) {
    handle(err);
}

// 利用generator模拟id自增分发器
function* next_id() {
    var id = 1;
    while(true) {
        yield id;
        id++;
    }
}
var gen = next_id();
alert(gen.next().value);
alert(gen.next().value);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

# ES6新增箭头函数(Arrow Function)

// 下面2个定义是等效的

var fn = x => x * x;

var fn = function (x) {

return x * x;

};

// 多个参数用()包裹

(x, y) => x + y;

// 无参数

() => 2;

// 可变参数

(a, b, ...rest) => {

var i, sum = a + b;

for(i=0;i<rest.length;i++) {

sum += rest[i];

}

return sum;

};

// 返回对象用()包裹，否则{}会语义冲突

x => ({key:3});

// 箭头函数修复了this的指向，不需要用that来捕获this了

// 但是在箭头函数中使用apply和call，第一个参数无法对this进行绑定了(第一个参数会被忽略)

var obj = {

birth: 1990,

getAge: function () {

var fn = () => {

return new Date().getFullYear() - this.birth;

};

return fn();

}

};

# ES6新增generator生成器

// 以斐波那契数列为例 0 1 1 2 3 5 8 13 21 ...

// 普通的函数实现，只能一次性返回整个数组

function fib(max) {

var t,

a = 0,

b = 1,

arr = [0, 1];

while(arr.length < max) {

t = a + b;

a = b;

b = t;

arr.push(t);

}

return arr;

}

// 以generator实现

function* fib(max) {

var t,

a = 0,

b = 1,

for(i=0;i<max;i++) {

yield a;

t = a + b;

a = b;

b = t;

}

return a;

}

var gen = fib(5);

// 可以分段返回

console.log(gen.next()); // Object {value: 0, done: false}

console.log(gen.next()); // Object {value: 1, done: false}

console.log(gen.next()); // Object {value: 2, done: false}

console.log(gen.next()); // Object {value: 3, done: false}

console.log(gen.next()); // Object {value: 5, done: true}

console.log(gen.next()); // Object {value: undefined, done: true}

// 可以对其进行迭代

for(let i of fib(5)) {

console.log(i);

}

// generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码

ajax('http://url-1', data1, function (err, result) {

if (err) {

return handle(err);

}

ajax('http://url-2', data2, function (err, result) {

if (err) {

return handle(err);

}

ajax('http://url-3', data3, function (err, result) {

if (err) {

return handle(err);

}

return success(result);

});

// 这种写法和上面的效果是一样的

try {

r1 = yield ajax('http://url-1', data1);

r2 = yield ajax('http://url-2', data2);

r3 = yield ajax('http://url-3', data3);

success(r3);

}

catch (err) {

handle(err);

}

// 利用generator模拟id自增分发器

function* next_id() {

var id = 1;

while(true) {

yield id;

id++;

}

var gen = next_id();

alert(gen.next().value);

闭包

在 2016年9月3日2016年9月4日上张贴由 BestLove

# 闭包（Closure）
function count() {
    var arr = [];
    for(var i = 1; i < 4; i++) {
        arr.push(function(){
            return i * i;
        });
    }
    return arr;
}
// 输出全部都是16 因为返回的函数引用了变量i，但它并没有立即执行，最后i变成了4
var f = count();
alert(f[0]());      //16
alert(f[1]());      //16
alert(f[2]());      //16

// 可以使用let关键字 此时会输出 1 4 9
// 或者再创建一个函数，用该函数的参数绑定循环变量当前的值
// 无论循环变量后续如何更改，已绑定到函数参数的值不变
function count() {
    var arr = [];
    for (var i = 1; i < 4; i++) {
        arr.push((function(n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

// 上面其实用了创建一个匿名函数并立即执行的语法
(function(n){
    // 因为当前的i已经被执行了，所以无论i怎么变都无所谓了
    // 但是这里还是返回了个匿名函数，
})(i);

// js中没有class 所有没有办法使用private修饰一个成员变量，可以用闭包模拟
// 这里的x就类似于返回的对象的私有属性，因为在返回的对象中无法直接操作x
function create_counter(initial) {
    var x = initial || 0;
    return {
        inc:function() {
            x += 1;
            return x;
        }
    };
}
var c1 = create_counter();
c1.inc();       // 1
c1.inc();       // 2
c1.inc();       // 3
var c2 = create_counter(10);
c2.inc();       // 11
c2.inc();       // 12
c2.inc();       // 13

// 我们经常会用的平方和立方，可以借助闭包"继承"Math.pow
function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);
pow2(2);    //4
pow3(2);    //8

// 匿名函数递归
'use strict';
// 传入匿名函数A，返回匿名函数B，如果执行匿名函数B，会执行匿名函数A，并返回执行结果
var one = function (f) {
    return function (x) {
        return f(x);
    }
};

// 传入类one的匿名函数两个，返回匿名函数B，如果执行匿名函数B，会返回一个匿名函数C
function add(n, m) {
    return function (f) {
        return function (x) {
            // 其实这步，可以分拆成如下(以one为例)
            // var y = n(f)(x); => (n(f))(x); => (one(func()))(x);
            // return m(f)(y); => (m(f))(y); =>  (one(func()))(y);
            return m(f)(n(f)(x));
        }
    }
}

/*
    我们把它拆开来看，下面这步，其实是返回了一个匿名函数，
    它的参数是我们传入的print 1 times的匿名函数
    (one(function () {
        alert('print 1 times');
    }))
    然后它后面还跟了个()
    所以执行了这个匿名函数，然后就执行了传入的匿名函数输出了print 1 times
 */
(one(function () {
    alert('print 1 times');
}))();

// 执行add函数，返回一个结构和one类似的匿名函数，但最内层的执行不同
var two = add(one, one);

/*
    还是把它拆开来看，下面这步，其实同样返回了一个匿名函数
    它的参数是我们传入的print 2 times的匿名函数
    (two(function () {
        alert('print 2 times');
    }))
    然后它后面跟了()，执行了这个匿名函数
    接着会执行m(f)，m就是add的时候传入的one，而它的参数f，就是我们传入的print 2 times的匿名函数
    相当于下面这个式子
    (one(function () {
        alert('print 2 times');
    }))
    跟上面一样，它返回一个匿名函数，匿名函数的参数是print 2 times
    然后这次后面跟的不是()了，而是有参数的 (n(f)(x))
    但是不管有没有参数，都不会影响匿名函数f，就是我们传入的print 2 times的匿名函数的执行
    虽说是不影响print 2 times的匿名函数的执行，但在执行之前，我们应该先执行参数中的n(f)(x)
    先执行它的参数前半段n(f)，跟m(f)一样，n是add传入的one，f是print 2 times
    然后后面跟着(x)，就执行了print 2 times，x是undefined (two(..))(这里没有传入x的值)
    所以，最终输出了2次print 2 times
 */
(two(function () {
    alert('print 2 times');
}))();
var three = add(one, two);
// three的话，其实就是执行了一次(one())() 和一次 (two())() 依此类推
(three(function () {
    alert('print 3 times');
}))();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

# 闭包（Closure）

function count() {

var arr = [];

for(var i = 1; i < 4; i++) {

arr.push(function(){

return i * i;

});

}

return arr;

}

// 输出全部都是16 因为返回的函数引用了变量i，但它并没有立即执行，最后i变成了4

var f = count();

alert(f[0]()); //16

alert(f[1]()); //16

alert(f[2]()); //16

// 可以使用let关键字此时会输出 1 4 9

// 或者再创建一个函数，用该函数的参数绑定循环变量当前的值

// 无论循环变量后续如何更改，已绑定到函数参数的值不变

function count() {

var arr = [];

for (var i = 1; i < 4; i++) {

arr.push((function(n) {

return function () {

return n * n;

}

})(i));

}

return arr;

}

// 上面其实用了创建一个匿名函数并立即执行的语法

(function(n){

// 因为当前的i已经被执行了，所以无论i怎么变都无所谓了

// 但是这里还是返回了个匿名函数，

})(i);

// js中没有class 所有没有办法使用private修饰一个成员变量，可以用闭包模拟

// 这里的x就类似于返回的对象的私有属性，因为在返回的对象中无法直接操作x

function create_counter(initial) {

var x = initial || 0;

return {

inc:function() {

x += 1;

return x;

}

};

}

var c1 = create_counter();

c1.inc(); // 1

c1.inc(); // 2

c1.inc(); // 3

var c2 = create_counter(10);

c2.inc(); // 11

c2.inc(); // 12

c2.inc(); // 13

// 我们经常会用的平方和立方，可以借助闭包"继承"Math.pow

function make_pow(n) {

return function (x) {

return Math.pow(x, n);

}

var pow2 = make_pow(2);

var pow3 = make_pow(3);

pow2(2); //4

pow3(2); //8

// 匿名函数递归

'use strict';

// 传入匿名函数A，返回匿名函数B，如果执行匿名函数B，会执行匿名函数A，并返回执行结果

var one = function (f) {

return function (x) {

return f(x);

}

};

// 传入类one的匿名函数两个，返回匿名函数B，如果执行匿名函数B，会返回一个匿名函数C

function add(n, m) {

return function (f) {

return function (x) {

// 其实这步，可以分拆成如下(以one为例)

// var y = n(f)(x); => (n(f))(x); => (one(func()))(x);

// return m(f)(y); => (m(f))(y); => (one(func()))(y);

return m(f)(n(f)(x));

}

我们把它拆开来看，下面这步，其实是返回了一个匿名函数，

它的参数是我们传入的print 1 times的匿名函数

(one(function () {

alert('print 1 times');

}))

然后它后面还跟了个()

所以执行了这个匿名函数，然后就执行了传入的匿名函数输出了print 1 times

(one(function () {

alert('print 1 times');

}))();

// 执行add函数，返回一个结构和one类似的匿名函数，但最内层的执行不同

var two = add(one, one);

还是把它拆开来看，下面这步，其实同样返回了一个匿名函数

它的参数是我们传入的print 2 times的匿名函数

(two(function () {

alert('print 2 times');

}))

然后它后面跟了()，执行了这个匿名函数

接着会执行m(f)，m就是add的时候传入的one，而它的参数f，就是我们传入的print 2 times的匿名函数

相当于下面这个式子

(one(function () {

alert('print 2 times');

}))

跟上面一样，它返回一个匿名函数，匿名函数的参数是print 2 times

然后这次后面跟的不是()了，而是有参数的 (n(f)(x))

但是不管有没有参数，都不会影响匿名函数f，就是我们传入的print 2 times的匿名函数的执行

虽说是不影响print 2 times的匿名函数的执行，但在执行之前，我们应该先执行参数中的n(f)(x)

先执行它的参数前半段n(f)，跟m(f)一样，n是add传入的one，f是print 2 times

然后后面跟着(x)，就执行了print 2 times，x是undefined (two(..))(这里没有传入x的值)

所以，最终输出了2次print 2 times

(two(function () {

alert('print 2 times');

}))();

var three = add(one, two);

// three的话，其实就是执行了一次(one())() 和一次 (two())() 依此类推

(three(function () {

alert('print 3 times');

}))();

唐晓锋–BLOG

This is just a personal note.

作者：BestLove

Promise

浏览器操作、AJAX、跨域

typeof、包装对象、Date、JSON

prototype原型、原型链、class

箭头函数、迭代生成器

闭包