进击JavaScript核心

一、JavaScript函数

0x1 遍历对象

for in 循环
for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。也就是说，for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

//变量可以是数组的元素，也可以是对象的属性。
for (变量 in 对象)
{
在此执行代码
}
//遍历数组
var arr = ["html", "css", "JavaScript", "JQuery"];
for (p in arr) {
    console.log(p);
    console.log(arr[p]);
    console.log(arr.p);//这种访问属性不正确，p此时为字符串"p";
}
//遍历对象
var person = {};
person.name = "summer";
person.sex = "girl";
person.age = "18";
for (v in person) {
    console.log(v);
    console.log(person[v]);
    console.log(person['v']);
    console.log(person.v);
}
console.log(v);获取到的是 person 对象中的每个属性
console.log(person[v]);获取到的是 person 对象中属性所对应的属性值
console.log(person['v']);和console.log(person.v)； 这两个获取不到属性也获取不到属性值。

//变量可以是数组的元素，也可以是对象的属性。

for (变量 in 对象)

{

在此执行代码

}

//遍历数组

var arr = ["html", "css", "JavaScript", "JQuery"];

for (p in arr) {

console.log(p);

console.log(arr[p]);

console.log(arr.p);//这种访问属性不正确，p此时为字符串"p";

}

//遍历对象

var person = {};

person.name = "summer";

person.sex = "girl";

person.age = "18";

for (v in person) {

console.log(v);

console.log(person[v]);

console.log(person['v']);

console.log(person.v);

}

console.log(v);获取到的是 person 对象中的每个属性

console.log(person[v]);获取到的是 person 对象中属性所对应的属性值

console.log(person['v']);和console.log(person.v)；这两个获取不到属性也获取不到属性值。

0x2 函数

1、函数的使用

一处定义，四处调用
有很多相似或者相同的代码是要封装成函数
当暴露了太多的代码细节就需要封装起来
函数的二象性：函数、对象
- 可以给函数添加属性，缓存特定的值
函数可以作为数据值使用
- var add = function(){}匿名函数
- 给数组的某个键的值设置为函数
- 对象也可以有函数
函数作为参数
函数作为返回值 return function()

2、函数的定义
字面量方式定义：

//1、function声明
function add() {
     body...
}  //是声明没有分号;
add();

//2、var赋值表达式
var add = function (argument) {
     body...
};  //是语句有分号;
add();

注：
声明的方式定义函数，调用不一定要放在定义之前，由于预解析的机制可以调用。
var赋值表达式调用必须要在定义之后。

//1、function声明

function add() {

body...

} //是声明没有分号;

add();

//2、var赋值表达式

var add = function (argument) {

body...

}; //是语句有分号;

add();

注：

声明的方式定义函数，调用不一定要放在定义之前，由于预解析的机制可以调用。

var赋值表达式调用必须要在定义之后。

构造函数定义：

//函数传参必须是字符串，是语句，结尾有分号;
var add = new Function('num1', 'num2', 'return num1 + num2;');
add();

//函数传参必须是字符串，是语句，结尾有分号;

var add = new Function('num1', 'num2', 'return num1 + num2;');

add();

3、函数的调用
匿名函数

//1、将函数赋一个变量
var add = function () {
    // body...
};
add();

//2、将函数用括号括起来，不让解析器认为是一个声明
(function () {
    console.log(1);
})();  //括号括住函数的声明

(function () {
    console.log(1);
}()); //括号括住声明加执行

//1、将函数赋一个变量

var add = function () {

// body...

};

add();

//2、将函数用括号括起来，不让解析器认为是一个声明

(function () {

console.log(1);

})(); //括号括住函数的声明

(function () {

console.log(1);

}()); //括号括住声明加执行

递归调用

function factorial(num) {
    if (num <= 1) return 1;
    return num * factorial(num - 1);
    // return 5 * 4! = 5 * 4 * 3! =... 5 * 4 * 1!
}
console.log(factorial(5));

function factorial(num) {

if (num <= 1) return 1;

return num * factorial(num - 1);

// return 5 * 4! = 5 * 4 * 3! =... 5 * 4 * 1!

}

console.log(factorial(5));

4、方法的调用
对象下面的方法调用

合法的函数名用不用引号都可以调用
不合法的函数名必须要用引号括起来
点调用不能调用不合法的函数名，方括号调用可以
变量调用必须用方括号

var operation = {
    add: function (num1, num2) {
        return num1 + num2;
    },
    subtract: function (num1, num2) {
        return num1 - num2;
    },
    '@': function () {
        console.log('@');
    },
    key: function () {
        // body...
    }
};
console.log(operation.add(1, 2));
console.log(operation['@'](1, 2));
var key = 'add';
console.log(operation[key](1, 2));

var operation = {

add: function (num1, num2) {

return num1 + num2;

subtract: function (num1, num2) {

return num1 - num2;

'@': function () {

console.log('@');

key: function () {

// body...

}

};

console.log(operation.add(1, 2));

console.log(operation['@'](1, 2));

var key = 'add';

console.log(operation[key](1, 2));

5、链式的调用
类似jQuery的链式调用法则，JavaScript想调用的话，需要return this

var operation = {
    add: function (num1, num2) {
        console.log(num1 + num2);
        return this;
    },
    subtract: function (num1, num2) {
        console.log(num1 - num2);
        return this;
    }
};
operation.add(1, 2).subtract(2, 1);

var operation = {

add: function (num1, num2) {

console.log(num1 + num2);

return this;

subtract: function (num1, num2) {

console.log(num1 - num2);

return this;

}

};

operation.add(1, 2).subtract(2, 1);

6、构造函数的调用
必须要 new Object（）

7、间接调用
apply()方法与call()方法类似，但传入实参的形式和call()不同，apply()的实参都是放到一个数组里面的。
我们可以将call()和apply()看做是某个对象的方法，通过调用方法的形式来间接调用函数，call()和apply()的第一个实参是要调用函数的母对象，该对象是函数中的上下文，可以通过this关键字来获取该对象的引用，如果想要以obj对象来调用函数a，可以像下面这样调用。

//call()
var obj = {x: "obj"};
//声明一个函数a，控制台输出函数中的上下文(this)        
function a() {
    console.log(this);
}
//函数a调用call方法，传入obj对象做上下文
a.call(obj);⇒ Object {x: "obj"}

//apply()
var obj = {x: "obj"};
//声明一个函数a，控制台输出函数中的上下文(this)        
function a() {
    console.log(this);
}
//函数a调用call方法，传入obj对象做上下文
a.apply(obj);⇒ Object {x: "obj"}

//call()

var obj = {x: "obj"};

//声明一个函数a，控制台输出函数中的上下文(this)

function a() {

console.log(this);

}

//函数a调用call方法，传入obj对象做上下文

a.call(obj);⇒ Object {x: "obj"}

//apply()

var obj = {x: "obj"};

//声明一个函数a，控制台输出函数中的上下文(this)

function a() {

console.log(this);

}

//函数a调用call方法，传入obj对象做上下文

a.apply(obj);⇒ Object {x: "obj"}

function add() {
    // body...
}
add();
add.call
add.apply

var name = 'xm';
var person = {};
person.name = 'xh';
person.getName = function () {
    return this.name;
};
console.log(person.getName());
console.log(person.getName.call(window));
console.log(person.getName.apply(window));

function add(num1, num2) {
    return num1 + num2;
}
console.log(add(1, 2));
var datas = [1, 2];
console.log(add.call(window, 1, 2));
console.log(add.apply(window, datas));

function add() {

// body...

}

add();

add.call

add.apply

var name = 'xm';

var person = {};

person.name = 'xh';

person.getName = function () {

return this.name;

};

console.log(person.getName());

console.log(person.getName.call(window));

console.log(person.getName.apply(window));

function add(num1, num2) {

return num1 + num2;

}

console.log(add(1, 2));

var datas = [1, 2];

console.log(add.call(window, 1, 2));

console.log(add.apply(window, datas));