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');

}))();

高阶函数、方法

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

# 高阶函数
// js的函数其实都是指向变量，函数的参数能接受变量
// 那么一个函数接受另一个函数作为参数，就称之为高阶函数
function add(x, y, f) {
    return f(x) + f(y);
}
add(-5, 6, Math.abs);       //11

// map
function pow(num) {
    return num * num;
}
var arr = [1,2,3,4,5,6,7,8,9];
arr.map(pow);       // [1, 4, 9, 16, 25, 36, 49, 64, 81]

// map的callback(currentValue, index, array)其实接收3个参数，所以用原生的Math.pow就会有问题
// 结果变成了 1的0次方 2的1次方 3的平方 4的立方 5的四次方...
arr.map(Math.pow);  //[1, 2, 9, 64, 625, 7776, 117649, 2097152, 43046721]

// reduce
function sum(num1, num2) {
    return num1 + num2;
}
arr.reduce(sum);    // 45

// filter
arr.filter(function(x){
    return x % 2 !== 0;         //过滤掉偶数
});

// sort
var arr = [10, 20, 1, 2];
arr.sort();                     // [1, 10, 2, 20] 默认转成string，再根据ASCII排序
arr.sort(function(x, y){        // [1, 2, 10, 20] 自定义排序
    if (x > y) {
        return 1;
    }else if (x == y) {
        return 0;
    } else {
        return -1;
    }
});

# 方法与函数(this关键字)
// 在一个对象中绑定函数，称为这个对象的方法
// 和普通函数也没啥区别，但是它在内部使用了一个this关键字
function getAge () {
    var y = new Date().getFullYear();
    return y - this.birth;
}
var xiaoming = {
    'name' : '小明',
    'birth' : 1990,
    'age' : getAge
};
alert(xiaoming.age());     // 26(2016-1990=26) 该函数的this指向被调用的对象 xiaoming
alert(getAge());           // NaN 该函数的this指向被调用的对象 window，在'use strict';模式下会指向undefined，所以会报错
var fn = xiaoming.age;     // 先拿到xiaoming的age函数
alert(getAge());           // NaN 这样也不行，要保证this指向正确，必须用obj.xxx()的形式调用！

// 匿名嵌套的情况下，内层匿名如果直接使用this也会执行window或undefined
// 可以使用that先捕获this
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this;    // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth;  // 用that而不是this
        }
        return getAgeFromBirth();
    }
};
alert(xiaoming.age());  // 26

# apply和call绑定this的指向
// 可以使用apply方法控制this的指向 第一个参数：需要绑定this的变量 第二个参数Array，函数本身的参数
alert(getAge.apply(xiaoming, []));  //26 函数指向xiaoming，参数为空
// call和apply类似，但是参数按顺序传入不是打包成Array 类似于php的call_user_func和call_user_func_array
// 对于普通函数的调用通常把this绑定为null
alert(Math.max.apply(null, [2,3]));
alert(Math.max.call(null, 2, 3));

// 装饰器
// JavaScript所有的对象都是动态的，包括内置函数
// 比如我们想统计使用了多少次parseInt()
var count = 0;
var oldParseInt = parseInt;
window.parseInt = function() {
    count++;
    return oldParseInt.apply(null, arguments);
}
parseInt('1');
parseInt('2');
alert(count);

# 高阶函数

// js的函数其实都是指向变量，函数的参数能接受变量

// 那么一个函数接受另一个函数作为参数，就称之为高阶函数

function add(x, y, f) {

return f(x) + f(y);

}

add(-5, 6, Math.abs); //11

// map

function pow(num) {

return num * num;

}

var arr = [1,2,3,4,5,6,7,8,9];

arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

// map的callback(currentValue, index, array)其实接收3个参数，所以用原生的Math.pow就会有问题

// 结果变成了 1的0次方 2的1次方 3的平方 4的立方 5的四次方...

arr.map(Math.pow); //[1, 2, 9, 64, 625, 7776, 117649, 2097152, 43046721]

// reduce

function sum(num1, num2) {

return num1 + num2;

}

arr.reduce(sum); // 45

// filter

arr.filter(function(x){

return x % 2 !== 0; //过滤掉偶数

});

// sort

var arr = [10, 20, 1, 2];

arr.sort(); // [1, 10, 2, 20] 默认转成string，再根据ASCII排序

arr.sort(function(x, y){ // [1, 2, 10, 20] 自定义排序

if (x > y) {

return 1;

}else if (x == y) {

return 0;

} else {

return -1;

}

});

# 方法与函数(this关键字)

// 在一个对象中绑定函数，称为这个对象的方法

// 和普通函数也没啥区别，但是它在内部使用了一个this关键字

function getAge () {

var y = new Date().getFullYear();

return y - this.birth;

}

var xiaoming = {

'name' : '小明',

'birth' : 1990,

'age' : getAge

};

alert(xiaoming.age()); // 26(2016-1990=26) 该函数的this指向被调用的对象 xiaoming

alert(getAge()); // NaN 该函数的this指向被调用的对象 window，在'use strict';模式下会指向undefined，所以会报错

var fn = xiaoming.age; // 先拿到xiaoming的age函数

alert(getAge()); // NaN 这样也不行，要保证this指向正确，必须用obj.xxx()的形式调用！

// 匿名嵌套的情况下，内层匿名如果直接使用this也会执行window或undefined

// 可以使用that先捕获this

var xiaoming = {

birth: 1990,

age: function () {

var that = this; // 在方法内部一开始就捕获this

function getAgeFromBirth() {

var y = new Date().getFullYear();

return y - that.birth; // 用that而不是this

}

return getAgeFromBirth();

}

};

alert(xiaoming.age()); // 26

# apply和call绑定this的指向

// 可以使用apply方法控制this的指向第一个参数：需要绑定this的变量第二个参数Array，函数本身的参数

alert(getAge.apply(xiaoming, [])); //26 函数指向xiaoming，参数为空

// call和apply类似，但是参数按顺序传入不是打包成Array 类似于php的call_user_func和call_user_func_array

// 对于普通函数的调用通常把this绑定为null

alert(Math.max.apply(null, [2,3]));

alert(Math.max.call(null, 2, 3));

// 装饰器

// JavaScript所有的对象都是动态的，包括内置函数

// 比如我们想统计使用了多少次parseInt()

var count = 0;

var oldParseInt = parseInt;

window.parseInt = function() {

count++;

return oldParseInt.apply(null, arguments);

}

parseInt('1');

parseInt('2');

alert(count);

js基础回顾

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

# 很久没用js了，有些生疏，正好看到廖老师的js教程，回顾下。网址如下：
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

# 一些简单介绍如下：
// ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现
// 最新版ECMAScript 6标准（简称ES6）ECMA（European Computer Manufacturers Association）
// chrome console可以简单调试js代码 js是严格区分大小写
// NaN：Not a Number  null：空  undefined：未定义  Infinity：无限大  number：所有的数字
// NaN === NaN;(false)  isNaN(NaN);(true)  typeof variable === 'number'  typeof variable === 'undefined' ...
// js设计缺陷(声明变量可以不用var，这样变量就变成了全局变量)，如果多个页面不用var，就会导致变量相互冲突
// ECMA在后续规范中推出了strict模式 如果没有用var声明变量 就会导致运行错误 'use strict';

# 数组(通常使用[]，更简单高效)
[1, 3.14, 'hello', true, null, ...];
new Array();

# 对象
// js对象不管加不加''，其实它的字段名都是字符串
var obj = {
    name : '张三',
    'age' : 13,
    tags : ['js', 'php'],
    // 最后一个值后面不要加, 如果字段名不符合变量标准(字符数字下划线，字母开头) 必须使用''
    'middle-school' : 'No.1 middle school'
};
obj.name;
obj['name'];
obj['middle-school'];               //不符合变量标准的字段名只能用[]语法
obj.test;                           //undefined
obj.test = 1;                       //动态添加
delete obj.test;                    //删除
'age' in obj;                       //true
'toString' in obj;                  //true in判断,会有继承的情况,所有对象都会在原型链上指向object object拥有toString属性
obj.hasOwnProperty('toString');     //false 如果要判断当前对象中是否包含某个属性，用hasOwnProperty

# 最新的ES6(ECMAScript6的缩写)引入
'use strict';
// `...` 多行字符串
`abcdefg
hijklmno
pqrstuvw
xyz`;

// 变量替换${variable}，类似php的{$variable}
var name = '小明';
var age = 20;
var message = `我叫，${name}，今年${age}岁了。`;

// 引入Map
var m = new Map([ ['Michael', 95], ['Bob', 75] ]); 
m.get('Michael');   //95
m.set('Adam', 58);  //添加
m.set('Bob', 59);   //设置
m.has('Adam');      //true
m.delete('Adam');   //删除
m.get('Adam');      //undefined

// 引入Set
var s = new Set([1,2,3,3,'3']);     //{1,2,3,"3"} 重复的会被过滤
s.add(4);       //添加，重复值添加不进去
s.delete(1);    //删除

# iterable类型 Array、Map和Set都属于iterable类型
// for...in由于历史遗留问题，它遍历的实际上是对象的属性(字段) 
var a = ['A','B','C'];
a.name = 'hello';
for(var x in a) {
    alert(x);       //依次输出 0 1 2 name
}
alert(a.length);    //长度依然是3
for (var x of a) {
    alert(x);       //依次输出 A B C
}

// forEach是ES5.1引入 效果跟for...of类似
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);         //依次输出 A B C
    alert(index);           //依次输出 0 1 2
    alert(array.name);      //依次输出 hello hello hello
    alert(array[index]);    //依次输出 A B C
});

// Set和Array类似，但Set没有索引，所以前2个参数都是指向当前元素的值
s.forEach(function(element, sameElement, set){});

// Map的回调函数的参数依次为value、key、map本身
m.forEach(function(value, key, map){});

# 函数
// js允许传入任意个数的参数
function abs(num) {
    if (typeof num !== 'number') {
        throw 'Not a number';
    }
    if (num >= 0) {
        return num;
    }
    return -num;
}
abs(-9, 'haha', 'hehe', null);      //9 后面的参数被忽略
//不进行参数检查：NaN 参数undefined，所以返回NaN
//进行参数检查：会抛一个 Not a number 的异常
abs();

// 利用arguments处理
function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var num = arguments[0];
    return num >= 0 ? num : -num;
}
abs(-9, 'haha', 'hehe', null);      //9
abs();                              //0

// 利用arguments做可选参数，参数默认值
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null
function foo(a, b, c){
    if (arguments.length === 2) {
        c = b;
        b = null;
    }
}

// ES6引入rest参数 rest只能在最后面，前面用...标识 如果参数没填满，rest是一个空数组
function sum(a, b, ...rest) {
    var rs = a + b;
    for(var i = 0; i < rest.length; i++) {
        rs += rest[i];
    }
    return rs;
}
alert(sum(1,2,3,4,5));      //15

// 函数嵌套，内部函数可以访问外部函数定义的变量，反之则不行
function foo() {
    var x = 1;
    function bar() {
        var y = x + 1;      //bar可以访问foo的变量x
    }
    var z = y + 1;          //foo不可以访问bar的变量y
}

// 变量重名，js的函数查找变量时是从自身函数开始由"内"向"外"查找
function foo() {
    var x = 1;
    function bar() {
        var x = 'A';        
        alert(x);           //A
    }
    alert(x);               //1
    bar();
}

// 变量提升(以下函数不会报错，而是输出hello undefined)
// 因为y变量被js提升了 相当于在alert之前 var y; 然后在alert之后赋值
function foo() {
    var x = 'hello ' + y;
    alert(x);
    var y = 'boy';
}

# 作用域
// 全局作用域(不在任何函数内的变量具有全局作用域，实际上被绑定到window的一个属性)
var course = "Learn JavaScript";
alert(course);              //Learn JavaScript
alert(window.course);       //Learn JavaScript

// 其实，我们平时使用的alert也是window的一个属性
window.alert("test");               //test
var oldAlert = window.alert;
window.alert = function(data) {     //这样就能修改原生的alert方法
    // do something
};

// 名字空间(可以避免多文件变量冲突)
// 全局变量会绑定到window上，不同的js文件，可能会使用相同的变量名，导致冲突
var MyApp = {};     //充当当前文件的window
MyApp.name = 'myapp';
MyApp.foo = function() {
    return 'foo';
};

// 局部作用域
// ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量
function foo() {
    for (var i = 0; i < 10; i++) {
    }
    alert(i);   //10
    for (let j = 0; j < 10; j++) {
    }
    alert(j);   //j is not defined
}

// ES6引入const来定义常量，const和let都具有块级作用域
const PI = 3.14;

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

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

# 很久没用js了，有些生疏，正好看到廖老师的js教程，回顾下。网址如下：

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

# 一些简单介绍如下：

// ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现

// 最新版ECMAScript 6标准（简称ES6）ECMA（European Computer Manufacturers Association）

// chrome console可以简单调试js代码 js是严格区分大小写

// NaN：Not a Number null：空 undefined：未定义 Infinity：无限大 number：所有的数字

// NaN === NaN;(false) isNaN(NaN);(true) typeof variable === 'number' typeof variable === 'undefined' ...

// js设计缺陷(声明变量可以不用var，这样变量就变成了全局变量)，如果多个页面不用var，就会导致变量相互冲突

// ECMA在后续规范中推出了strict模式如果没有用var声明变量就会导致运行错误 'use strict';

# 数组(通常使用[]，更简单高效)

[1, 3.14, 'hello', true, null, ...];

new Array();

# 对象

// js对象不管加不加''，其实它的字段名都是字符串

var obj = {

name : '张三',

'age' : 13,

tags : ['js', 'php'],

// 最后一个值后面不要加, 如果字段名不符合变量标准(字符数字下划线，字母开头) 必须使用''

'middle-school' : 'No.1 middle school'

};

obj.name;

obj['name'];

obj['middle-school']; //不符合变量标准的字段名只能用[]语法

obj.test; //undefined

obj.test = 1; //动态添加

delete obj.test; //删除

'age' in obj; //true

'toString' in obj; //true in判断,会有继承的情况,所有对象都会在原型链上指向object object拥有toString属性

obj.hasOwnProperty('toString'); //false 如果要判断当前对象中是否包含某个属性，用hasOwnProperty

# 最新的ES6(ECMAScript6的缩写)引入

'use strict';

// `...` 多行字符串

`abcdefg

hijklmno

pqrstuvw

xyz`;

// 变量替换${variable}，类似php的{$variable}

var name = '小明';

var age = 20;

var message = `我叫，${name}，今年${age}岁了。`;

// 引入Map

var m = new Map([ ['Michael', 95], ['Bob', 75] ]);

m.get('Michael'); //95

m.set('Adam', 58); //添加

m.set('Bob', 59); //设置

m.has('Adam'); //true

m.delete('Adam'); //删除

m.get('Adam'); //undefined

// 引入Set

var s = new Set([1,2,3,3,'3']); //{1,2,3,"3"} 重复的会被过滤

s.add(4); //添加，重复值添加不进去

s.delete(1); //删除

# iterable类型 Array、Map和Set都属于iterable类型

// for...in由于历史遗留问题，它遍历的实际上是对象的属性(字段)

var a = ['A','B','C'];

a.name = 'hello';

for(var x in a) {

alert(x); //依次输出 0 1 2 name

}

alert(a.length); //长度依然是3

for (var x of a) {

alert(x); //依次输出 A B C

}

// forEach是ES5.1引入效果跟for...of类似

a.forEach(function (element, index, array) {

// element: 指向当前元素的值

// index: 指向当前索引

// array: 指向Array对象本身

alert(element); //依次输出 A B C

alert(index); //依次输出 0 1 2

alert(array.name); //依次输出 hello hello hello

alert(array[index]); //依次输出 A B C

});

// Set和Array类似，但Set没有索引，所以前2个参数都是指向当前元素的值

s.forEach(function(element, sameElement, set){});

// Map的回调函数的参数依次为value、key、map本身

m.forEach(function(value, key, map){});

# 函数

// js允许传入任意个数的参数

function abs(num) {

if (typeof num !== 'number') {

throw 'Not a number';

}

if (num >= 0) {

return num;

}

return -num;

}

abs(-9, 'haha', 'hehe', null); //9 后面的参数被忽略

//不进行参数检查：NaN 参数undefined，所以返回NaN

//进行参数检查：会抛一个 Not a number 的异常

abs();

// 利用arguments处理

function abs() {

if (arguments.length === 0) {

return 0;

}

var num = arguments[0];

return num >= 0 ? num : -num;

}

abs(-9, 'haha', 'hehe', null); //9

abs(); //0

// 利用arguments做可选参数，参数默认值

// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null

function foo(a, b, c){

if (arguments.length === 2) {

c = b;

b = null;

}

// ES6引入rest参数 rest只能在最后面，前面用...标识如果参数没填满，rest是一个空数组

function sum(a, b, ...rest) {

var rs = a + b;

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

rs += rest[i];

}

return rs;

}

alert(sum(1,2,3,4,5)); //15

// 函数嵌套，内部函数可以访问外部函数定义的变量，反之则不行

function foo() {

var x = 1;

function bar() {

var y = x + 1; //bar可以访问foo的变量x

}

var z = y + 1; //foo不可以访问bar的变量y

}

// 变量重名，js的函数查找变量时是从自身函数开始由"内"向"外"查找

function foo() {

var x = 1;

function bar() {

var x = 'A';

alert(x); //A

}

alert(x); //1

bar();

}

// 变量提升(以下函数不会报错，而是输出hello undefined)

// 因为y变量被js提升了相当于在alert之前 var y; 然后在alert之后赋值

function foo() {

var x = 'hello ' + y;

alert(x);

var y = 'boy';

}

# 作用域

// 全局作用域(不在任何函数内的变量具有全局作用域，实际上被绑定到window的一个属性)

var course = "Learn JavaScript";

alert(course); //Learn JavaScript

alert(window.course); //Learn JavaScript

// 其实，我们平时使用的alert也是window的一个属性

window.alert("test"); //test

var oldAlert = window.alert;

window.alert = function(data) { //这样就能修改原生的alert方法

// do something

};

// 名字空间(可以避免多文件变量冲突)

// 全局变量会绑定到window上，不同的js文件，可能会使用相同的变量名，导致冲突

var MyApp = {}; //充当当前文件的window

MyApp.name = 'myapp';

MyApp.foo = function() {

return 'foo';

};

// 局部作用域

// ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量

function foo() {

for (var i = 0; i < 10; i++) {

}

alert(i); //10

for (let j = 0; j < 10; j++) {

}

alert(j); //j is not defined

}

// ES6引入const来定义常量，const和let都具有块级作用域

const PI = 3.14;

唐晓锋–BLOG

This is just a personal note.

月份：2016年9月

typeof、包装对象、Date、JSON

prototype原型、原型链、class

箭头函数、迭代生成器

闭包

高阶函数、方法

js基础回顾