1、函数的定义和调用
1.1函数定义方式
函数定义有三种方式：
1、 函数声明方式 function 关键字 (命名函数)
function fn(){}
2、函数表达式(匿名函数)
var fn = function(){}
3、new Function() 方式
var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);
var fn = new Function('参数1','参数2'..., '函数体')
注意
/*Function 里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象
*/
由此看出函数都是Function函数的实例对象（js中有一切皆对象的说法：数组等也是）
由于函数也是是对象所以其也有__proto__；
打印出fn instanceof Object为true也能说明函数就是对象
1.2函数的调用
1、普通函数
/* 1. 普通函数 */
function fn() {
console.log('人生的巅峰');
}
fn();
2、对象中的方法
/* 2. 对象的方法 */
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sayHi();
3、构造函数
/* 3. 构造函数*/
function Star() {};
//构造函数通过new来调用并在前面用等号赋给变量
new Star();
4、绑定事件函数
btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
//也可以 btn.click = fn； 如果写成fn()则会立即执行
5、定时器函数
setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次
//也可以setInterval(fn, 1000); 其中fn是外面定义的函数，如果写成fn()则不会等待定时器而直接执行
6、立即执行函数
/* 6. 立即执行函数(自调用函数)*/
(function() {
console.log('人生的巅峰');
})();
2、this相关
2.1函数中this指向
这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同，一般指向我们的调用者；
其中如定时器函数，其完整写法是window.setTimeout所以其this指向是window；
2.2改变函数中的this指向
上面讲述了不同函数中this的指向，但我们可以根据自己的实际需求来更改函数的this指向，主要方法有三种：call、apply、bind；
1、call()方法在之前已经讲过，其主要是能够在更改this指向的同时调用函数，主要用在继承中：
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
2、apply()也是改变this指向的同时调用函数，其与call的不同之处在于传递的参数是以数组的形式：
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3
由上面代码，我们可以看到其会自动解析数组传过来的参数成相应的类型，如传的[1,2]会自动解析成a为1，b为2；
apply的这种特性通常用来对数组使用Math方法，如Math.max()是不能处理数组的，所以我们可以写成Math.max.apply(null,arr)，其中null代表不改变this指向，arr是要取最大值的数组；或者觉得null这种写法不够规范我们可以写成Math.max.apply(Math,arr)因为是Math的max方法所以把this指向Math；
3、bind()与call方法类似，但区别是其只会改变this指向而不会调用函数，专门用在仅需改变this指向而不用马上调用函数的场合；
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数，注意要用另个变量对处理结果接收
f();//调用新函数 this指向的是对象o 参数使用逗号隔开，注意这时调用不用再传参数a、b了（因为在bind时已经传过）
应用场景：一个按钮按下后3秒后才可重新点击（如网页中常见发送信息要60s后才能重发功能）
如上通过bind将定时器函数中的this(指向window)改成了和外部函数一致(指向触发点击事件的btn)；
尤其在有多个button时，如果通过for循环来为每一按钮实现该效果，如下图：
延时+for循环会导致i的数值错乱从而报错，应该采用bind方法解决：
3、严格模式
3.1严格模式概念
JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。
严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改：
1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
2.消除代码运行的一些不安全之处，保证代码运行的安全。
3.提高编译器效率，增加运行速度。
4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名
3.2开启严格模式
1、为整个脚本开启严格模式；但有的 script 脚本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他script 脚本文件。
(function (){
//在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式
"use strict";
var num = 10;
function fn() {}
})();
//或者
<script>
"use strict"; //当前script标签开启了严格模式
</script>
<script>
//当前script标签未开启严格模式
</script>
2、为某个函数开启严格模式；要给某个函数开启严格模式，需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句之前。
function fn(){
"use strict";
return "123";
}
//当前fn函数开启了严格模式
3.3严格模式的变化
1、在正常模式中，如果一个变量没有声明就调用默认是全局变量；但在严格模式中变量必须先声明再使用，否则报错；
如果未声明直接用就会报错，如下：
2、严格模式禁止删除已经声明的变量，否则报错；
3、正常模式下全局普通函数的this指向window，但严格模式下式undefined；
4、正常模式下，构造函数如果只调用不加new创建新对象是可以运行的；而在严格模式下构造函数如果不加new只调用会报错；
如图，若在严格模式下其会报错；若在正常模式下会给window对象添加一个sex为男的属性；因为正常模式下this指向window，而严格模式下this为undefined如果往该this地址添加数据会报错；
而如果用了new后，严格模式下构造函数中this也会指向所创建的实例对象；
5、定时函数this仍是window，其他与正常模式基本一致；
6、严格模式下函数中不允许相同的形参；而正常模式下出现相同形参只会影响结果但不会报错；
如上，如果在正常模式中输出结果为4，因为a的值以后面赋的2位最终结果，所以2+2=4；但在严格模式下其会报错；
7、函数必须声明在顶层，不允许在非函数的代码块内声明函数
如上，如果在if和for这种非函数代码块中声明函数则会报错，而在一个函数中声明另一个函数则是正确；
4、高阶函数
高阶函数是对其他函数进行操作的函数，其接收函数作为参数或者将函数作为返回值；
实例代码如下：
上面的callback&&callback()表示如果callback接收到了内容就调用该callback函数；
5、闭包相关
5.1变量作用域相关
变量根据作用域的不同分为两种：全局变量和局部变量(现在还没到ES6，所以只有全局作用域和函数级作用域，而还没有块级作用域的概念)
- 函数内部可以使用全局变量；
- 函数外部不可以使用局部变量；
- 当函数执行完毕，本作用域内的局部变量会销毁；
5.2闭包概念
闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量；
如上，函数fn中的一个局部变量num可以被该函数fn以外的函数fun访问时，该函数fn即称为闭包；
此外，还有通过高阶函数的方法，将函数作为返回值，如下：
function fn() {
var num = 10;
function fun() {
console.log(num);
}
return fun;
}
var f = fn();
f();
fun作
为fn的返回值后，以后在外面调用f则可以访问num了；
可以定义好函数在返回，也可以直接返回匿名函数：
总的来说，闭包延伸了变量的作用范围；
5.3闭包相关案例
1、利用闭包获取多个li的索引号，以前获取多个li的索引号通过以下方式：
而如果通过闭包的方式，则如下所示：
在立即执行函数中，最后的i是for循环的i作为实参传入立即执行函数，而紧跟着function的i则是形参，其可以写成任意变量；
2、闭包在定时器+for循环中的作用，延时3s后打印所有li元素的内容：
在不使用闭包的情况下：
这里的i使用的是for循环的i，在定时器时间还没到情况下i就已经随着for循环变化了，无法达到所需效果；
而如果采取闭包方法进行实现，如下：
for (var i = 0; i < lis.length; i++) {
(function(i) {
setTimeout(function() {
console.log(lis[i].innerHTML);
}, 3000)
})(i);
}
for循环中的每次都将i作为参数传给立即执行函数，这样立即每个立即执行函数的形参i就不会随着for循环改变，而是每个立即执行函数都有自己不变的i，由此延时函数也有自己不变的i；
3、通过闭包计算打车价格：
/需求分析
打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费/
var car = (function() {
var start = 13; // 起步价 局部变量
var total = 0; // 总价 局部变量
return {
// 正常的总价
price: function(n) {
if (n <= 3) {
total = start;
} else {
total = start + (n - 3) * 5
}
return total;
},
// 拥堵之后的费用
yd: function(flag) {
return flag ? total + 10 : total;
}
}
})();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33
代码中立即执行函数的start和total被返回的函数price和yd调用了，所以该函数是闭包；
5.4闭包两个思考题
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
return function() {
return this.name;
};
}
};
console.log(object.getNameFunc()())
分析：object.getNameFunc()()相当于
f为object.getNameFunc执行后返回的结果，即函数
function() {
return this.name;
};
再调用f，相当于普通函数调用，此时this指向window，所以输出的是全局的name变量；
下一个案例：
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
var that = this;
return function() {
return that.name;
};
}
};
console.log(object.getNameFunc()())
而这里的that指向getNameFuncthis，因为是对象中的方法所以其this是指向对象object，所以这里输出是object对象中的name属性；
6、递归相关
6.1递归概念
递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数；
注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return，如下：
当num到达6时就不再继续递归了；
6.2递归使用案例
1、递归求1~n的阶乘
//利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
function fn(n) {
if (n == 1) { //结束条件
return 1;
}
return n * fn(n - 1);
}
console.log(fn(3));
2、递归求求斐波那契数列
注意下面代码中的n表示第n项，输出表示该项的值
// 利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21...
// 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
// 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
function fb(n) {
//由上面序列，当n为1和和2时，该项值都是1
if (n === 1 || n === 2) {
return 1;
}
return fb(n - 1) + fb(n - 2);
}
console.log(fb(3));
3、递归遍历对象深层数据
// 我们想要做输入id号,就可以返回的数据对象
var data = [{
id: 1,
name: '家电',
goods: [{
id: 11,
gname: '冰箱',
goods: [{
id: 111,
gname: '海尔'
}, {
id: 112,
gname: '美的'
},
]
}, {
id: 12,
gname: '洗衣机'
}]
}, {
id: 2,
name: '服饰'
}];
//1.利用 forEach 去遍历里面的每一个对象
function getID(json, id) {
var o = {};
json.forEach(function(item) {
// console.log(item); // 2个数组元素
if (item.id == id) {
// console.log(item);
o = item;
return o;
// 2. 我们想要得里层的数据 11 12 可以利用递归函数
// 里面应该有goods这个数组并且数组的长度不为 0
} else if (item.goods && item.goods.length > 0) {
o = getID(item.goods, id);
}
});
return o;
}
其巧妙之处是不仅能遍历最外层，内层的goods也可以遍历；先判断外层数据id是否符合条件，没有就判断该item中的goods是否有符合的id；
7、浅拷贝和深拷贝
1、浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝引用；
以前手动的拷贝方式：
但上面这种方法过于麻烦，ES6给我们提供了浅拷贝方法：
这种相当于浅拷贝，这种方式如果在拷贝对象中仍有嵌套对象时，其只是拷贝了引用（没有新开地址存储复杂数据），则新旧两个对象中的复杂数据类型地址一样，造成一改全改的问题；
2、深拷贝：对于对象中的复杂数据类型（如：对象、数组等…），其会新开地址，不会有一改全改问题；可以通过递归实现深拷贝，如下所示：
注意，在使用时必须先判断是否array再判断是否object，否则来个array判断是否为object时其也会为true，无法向下继续执行；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
