JavaScript高级–函数进阶
四、函数进阶
1.函数的定义和调用
1.1函数的定义的方式
// 1. 自定义函数(命名函数)
function fn() {};
// 2. 函数表达式 (匿名函数)
var fun = function() {};
// 3. 利用 new Function('参数1','参数2', '函数体');
var f = new Function('a', 'b', 'console.log(a + b)');
所有函数都是 Function 的实例(对象)，函数也属于对象。
console.log(f instanceof Object);// true
1.2函数的调用方式
- 普通函数
function fn() {
console.log('人生的巅峰');
}
fn(); fn.call()
- 对象的方法
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sayHi();
- 构造函数
function Star() {};
new Star();
- 绑定事件函数
btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
- 定时器函数
setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次
- 立即执行函数
(function() {
console.log('人生的巅峰');
})();
// 立即执行函数是自动调用
2.this
2.1 this指向问题
函数的不同调用方式决定了this 的指向不同。
- 普通函数 this 指向window
function fn() {
console.log('普通函数的this' + this);
}
window.fn();
- 对象的方法 this指向的是对象 o
var o = {
sayHi: function() {
console.log('对象方法的this:' + this);
}
}
o.sayHi();
- 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
function Star() {};
Star.prototype.sing = function() {
}
var ldh = new Star();
- 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
var btn = document.querySelector('button');
btn.onclick = function() {
console.log('绑定时间函数的this:' + this);
};
- 定时器函数 this 指向的也是window
window.setTimeout(function() {
console.log('定时器的this:' + this);
}, 1000);
- 立即执行函数 this还是指向window
(function() {
console.log('立即执行函数的this' + this);
})();
2.2 改变函数内this指向
改变函数内this指向 js提供了三种方法 call() apply() bind()
- call()
fun.call(thisArg, arg1, arg2, ...)
thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(o, 1, 2);
call 第一个可以调用函数 第二个可以改变函数内的this 指向
call 的主要作用可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);
- apply()
apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。
fun.apply(thisArg, [argsArray])
thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值
var o = {
name: 'andy'
};
function fn(arr) {
console.log(this);
console.log(arr); // 'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数 第二个可以改变函数内部的this指向
// 2. 但是他的参数必须是数组(伪数组)
// 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值
// Math.max();
var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);
- bind()
bind() 方法不会调用函数。但是能改变函数内部this 指向
fun.bind(thisArg, arg1, arg2, ...)
thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2);
f();
- 不会调用原来的函数 可以改变原来函数内部的this 指向
- 返回的是原函数改变this之后产生的新函数
- 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
// 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
var btn1 = document.querySelector('button');
btn1.onclick = function() {
this.disabled = true; // 这个this 指向的是 btn 这个按钮
// var that = this;
setTimeout(function() {
// that.disabled = false; // 定时器函数里面的this 指向的是window
this.disabled = false; // 此时定时器函数里面的this 指向的是btn
}.bind(this), 3000); // 这个this 指向的是btn 这个对象
}
2.3 call apply bind 总结
相同点:
都可以改变函数内部的this指向。
区别点:
-
call 和 apply 会调用函数, 并且改变函数内部this指向。
-
call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]。
-
bind 不会调用函数, 可以改变函数内部this指向。
主要应用场景:
-
call 经常做继承。
-
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值。
-
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向。
3 严格模式 （ie10+支持）
严格模式对正常的 JavaScript 语义做了一些更改：
-
消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
-
消除代码运行的一些不安全之处，保证代码运行的安全。
-
提高编译器效率，增加运行速度。
-
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名
<!-- 为整个脚本(script标签)开启严格模式 -->
<script>
'use strict';
// 下面的js 代码就会按照严格模式执行代码
</script>
<script>
(function() {
'use strict';
})();
</script>
<!-- 为某个函数开启严格模式 -->
<script>
// 此时只是给fn函数开启严格模式
function fn() {
'use strict';
// 下面的代码按照严格模式执行
}
function fun() {
// 里面的还是按照普通模式执行
}
</script>
严格模式的变化
- 变量规定
-
在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用。
-
严禁删除已经声明变量。例如，delete x; 语法是错误的。
- 严格模式下 this 指向问题
- 以前在全局作用域函数中的 this 指向 window 对象。严格模式下全局作用域中函数中的 this 是 undefined。
function fn() {
console.log(this); // undefined。
}
- 以前构造函数时不加 new也可以 调用,当普通函数，this 指向全局对象，严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错。
function Star() {
this.sex = '男'; //会报错
}
Star();
- new 实例化的构造函数指向创建的对象实例。
function Star() {
this.sex = '男';
}
var ldh = new Star();
console.log(ldh.sex);
-
定时器 this 还是指向 window 。
-
事件、对象还是指向调用者。
- 函数变化
-
函数不能有重名的参数。
-
函数必须声明在顶层.新版本的 JavaScript 会引入“块级作用域”（ ES6 中已引入）。为了与新版本接轨，不允许在非函数的代码块（if里面、for里面）内声明函数。
4 高阶函数
高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。
5 闭包
5.1 变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁。
5.2 什么是闭包
闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计
简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
// 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
function fn() {
var num = 10;
function fun() {
console.log(num);
}
fun();
}
fn();
5.4 闭包的作用
延伸变量的作用范围。
function fn() {
var num = 10;
// function fun() {
// console.log(num);
// }
// return fun;
return function() {
console.log(num);
}
}
var f = fn();
f();
5.5 闭包案例
1. 利用闭包的方式得到当前小li 的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
(function(i) {
// console.log(i);
//容易造成内存泄露
lis[i].onclick = function() {
console.log(i);
}
})(i);
}
2. 3秒钟之后,打印所有li元素的内容
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
(function(i) {
setTimeout(function() {
console.log(lis[i].innerHTML);
}, 3000)
})(i);
}
2. 计算打车价格
打车起步价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
6 递归
6.1 什么是递归
-
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
-
简单理解:函数内部自己调用自己, 这个函数就是递归函数
-
递归函数的作用和循环效果一样
-
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return。
function fn() {
console.log('我要打印6句话');
if (num == 6) {
return; // 递归里面必须加退出条件
}
num++;
fn();
}
fn();
6.2 深拷贝与浅拷贝
浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
// for (var k in obj) {
// // k 是属性名 obj[k] 属性值
// o[k] = obj[k];
// }
// console.log(o);
// o.msg.age = 20;
// console.log(obj);
Object.assign(target, …sources) es6 新增方法可以浅拷贝
Object.assign(o, obj);
target：拷贝给谁
sources拷贝的对象
深拷贝拷贝多层, 每一级别的数据都会拷贝.
// 封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判断我们的属性值属于那种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k];
// 2. 判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判断这个值是否是对象
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 属于简单数据类型
newobj[k] = item;
}
}
}
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
