一、函数的三种角色
首先要先了解在函数本身会有一些自己的属性,比如:
-
length
:形参的个数; -
name
:函数名; -
prototype
:类的原型,在原型上定义的方法都是当前这个类的实例的公有方法; -
__proto__
:把函数当做一个普通对象,指向Function这个类的原型
函数在整个JavaScript中是最复杂也是最重要的知识,对于一个函数来说,会存在多种角色:
function Fn() {
var num = 500;
this.x = 100;
}
Fn.prototype.getX = function () {
console.log(this.x);
}
Fn.aaa = 1000;
var f = new Fn;
f.num // undefined
f.aaa // undefined
var res = Fn(); // res是undefined Fn中的this是window
角色一:普通函数,对于
Fn
而言,它本身是一个普通的函数,执行的时候会形成私有的作用域,然后进行形参赋值、预解析、代码执行、执行完成后内存销毁;角色二:类,它有自己的实例,
f
就是Fn
作为类而产生的一个实例,也有一个叫做prototype
的属性是自己的原型,它的实例都可以指向自己的原型;角色三:普通对象,
Fn
和var obj = {}
中的obj
一样,就是一个普通的对象(所有的函数都是Function的实例),它作为对象可以有一些自己的私有属性,也可以通过__proto__
找到Function.prototype
;
函数的以上三种角色,可能大多数同学对于角色一和角色二都是没有任何疑问的,不过对于角色三可能会稍有疑惑,那么画张图来理解下吧:
![](http://upload-images.jianshu.io/upload_images/2555024-95309047f0e9f13d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
二、call深入
2.1、call的基本使用
var ary = [12, 23, 34];
ary.slice();
以上两行简单的代码的执行过程为:ary
这个实例通过原型链的查找机制找到Array.prototype
上的slice
方法,让找到的slice
方法执行,在执行slice
方法的过程中才把ary
数组进行了截取。
注意:slice
方法执行之前有一个在原型上查找的过程(当前实例中没有找到,再根据原型链查找)。
当知道了一个对象调用方法会有一个查找过程之后,我们再看:
var obj = {name:'iceman'};
function fn() {
console.log(this);
console.log(this.name);
}
fn(); // this --> window
// obj.fn(); // Uncaught TypeError: obj.fn is not a function
fn.call(obj);
call方法的作用:首先寻找call
方法,最后通过原型链在Function
的原型中找到call
方法,然后让call
方法执行,在执行call
方法的时候,让fn
方法中的this
变为第一个参数值obj
,最后再把fn
这个函数执行。
2.2、call方法原理
模拟Function中内置的call方法,写一个myCall方法,探讨call方法的执行原理
function sum(){
console.log(this);
}
function fn(){
console.log(this);
}
var obj = {name:'iceman'};
Function.prototype.myCall = function (context) {
// myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名
// 1、让fn中的this关键字变为context的值->obj
// 让this这个函数中的"this关键字"变为context
// eval(this.toString().replace("this","obj"));
// 2、让fn方法在执行
// this();
};
fn.myCall(obj);// myCall方法中原来的this是fn
sum.myCall(obj);// myCall方法中原来的this是sum
当 fn.myCall(obj);
这行代码执行的时候,根据this
的寻找规律,在myCall
方法前面有”.“,那么myCall
中的this
就是fn
。执行myCall
的方法,在第一步会将方法体中this
换为传入的对象,并且执行原来的this
, 注意:是执行原来的this
(我在学这一块的时候这里理解了好久),在本例中就是执行fn
。
看完以上那段话是不是有些懵逼了呢?哈哈,没事,接下来看下面例子,理解一下。
2.3、call方法经典例子
function fn1() {
console.log(1);
}
function fn2() {
console.log(2);
}
2.3.1、输出一
fn1.call(fn2); // 1
首先fn1
通过原型链查找机制找到Function.prototype
上的call
方法,并且让call
方法执行,此时call
这个方法中的this就是要操作的fn1
。在call
方法代码执行的过程过程中,首先让fn1中的“this
关键字”变为fn2
,然后再让fn1
这个方法执行。
注意:在执行call
方法的时候,fn1
中的this
的确会变为fn2
,但是在fn1
的方法体中输出的内容中并没有涉及到任何和this
相关的内容,所以还是输出1.
2.3.2、输出二
fn1.call.call(fn2); // 2
首先fn1
通过原型链找到Function.prototype
上的call
方法,然后再让call
方法通过原型再找到Function
原型上的call
(因为call
本身的值也是一个函数,所以同样可以让Function.prototype
),在第二次找到call
的时候再让方法执行,方法中的this
是fn1.call
,首先让这个方法中的this
变为fn2
,然后再让fn1.call
执行。
这个例子有点绕了,不过一步一步来理解。在最开始的时候,fn1.call.call(fn2)
这行代码的最后一个call中的this是fn1.call
,根据前面的理解可以知道 fn1.call
的原理大致为:
Function.prototype.call = function (context) {
// 改变fn中的this关键字
// eval(....);
// 让fn方法执行
this(); // 此时的this就是fn1
};
将上面的代码写为另一种形式:
Function.prototype.call = test1;
function test1 (context) {
// 改变fn中的this关键字
// eval(....);
// 让fn方法执行
this(); // 此时的this就是fn1
};
我们知道,这两种形式的写法的作用是一样的。那么此时可以将 fn1.call.call(fn2)
写成 test1.call(fn2)
,call
中的的this
就是test1
:
Function.prototype.call = function (context) {
// 改变fn中的this关键字
// eval(....);
// 让fn方法执行
this(); // 此时的this就是test1
};
注意:此时call
中的的this
就是test1
。
然后再将call中this替换为fn2,那么test1方法变为:
Function.prototype.call = function (context) {
// 省略其他代码
fn2();
};
所以最后是fn2执行,所以最后输出2。
三、call、apply、bind的区别
首先补充严格模式这个概念,这是ES5中提出的,只要写上:
"use strict"
就是告诉当前浏览器,接下来的JavaScript代码将按照严格模式进行编写。
function fn() {
console.log(this);
}
fn.call(); // 普通模式下this是window,在严格模式下this是undefined
fn.call(null); // 普通模式下this是window,在严格模式下this是null
fn.call(undefined); // 普通模式下this是window,在严格模式下this是undefined
apply方法和call方法的作用是一模一样的,都是用来改变方法的this关键字,并且把方法执行,而且在严格模式下和非严格模式下,对于第一个参数是null/undefined这种情况规律也是一样的,只是传递函数的的参数的时候有区别。
function fn(num1, num2) {
console.log(num1 + num2);
console.log(this);
}
fn.call(obj , 100 , 200);
fn.apply(obj , [100, 200]);
call在给fn传递参数的时候,是一个个的传递值的,而apply不是一个个传的,而是把要给fn传递的参数值同一个的放在一个数组中进行操作,也相当于一个个的给fn的形参赋值。
bind方法和apply、call稍有不同,bind方法是事先把fn的this改变为我们要想要的结果,并且把对应的参数值准备好,以后要用到了,直接的执行即可,也就是说bind同样可以改变this的指向,但和apply、call不同就是不会马上的执行。
var tempFn = fn.bind(obj, 1, 2);
tempFn();
第一行代码只是改变了fn中的this为obj,并且给fn传递了两个参数值1、2,但是此时并没有把fn这个函数给执行,执行bind会有一个返回值,这个返回值tempFn就是把fn的this改变后的那个结果。
注意:bind这个方法在IE6~8下不兼容。
四、call、apply的应用
4.1、求数组的最大值和最小值
定义一个数组:
var ary = [23, 34, 24, 12, 35, 36, 14, 25];
4.1.1、排序再取值法
首先先给数组进行排序(小—>大),第一个和最后一个就是我们想要的最小值和最大值。
var ary = [23, 34, 24, 12, 35, 36, 14, 25];
ary.sort(function (a, b) {
return a - b;
});
var min = ary[0];
var max = ary[ary.length - 1];
console.log(min, max);
4.1.2、假设法
假设当前数组中的第一个值是最大值,然后拿这个值和后面的项逐一进行比较,如果后面某一个值比假设的还要打,说明假设错了,我们把假设的值进行替换…..
var max = ary[0], min = ary[0];
for (var i = 1; i < ary.length; i++) {
var cur = ary[i];
cur > max ? max = cur : null;
cur < min ? min = cur : null;
}
console.log(min, max);
4.1.3、Math中的max/min方法实现(通过apply)
直接使用Math.min
var min = Math.min(ary);
console.log(min); // NaN
console.log(Math.min(23, 34, 24, 12, 35, 36, 14, 25));
直接使用Math.min的时候,需要把待比较的那堆数一个个的传递进去,这样才可以得到最后的记过,一下放一个ary数组进去是不可以的。
尝试:使用eval
var max = eval("Math.max(" + ary.toString() + ")");
console.log(max);
var min = eval("Math.min(" + ary.toString() + ")");
console.log(min);
"Math.max(" + ary.toString() + ")"
–> "Math.max(23,34,24,12,35,36,14,25)"
首先不要管其他的,先把我们最后要执行的代码都变为字符串,然后把数组中的每一项的值分别的拼接到这个字符串中。
eval:把一个字符串变为JavaScript表达式执行
例如:eval("12+23+34+45") // 114
通过apply调用Math中的max/min
var max = Math.max.apply(null, ary);
var min = Math.min.apply(null, ary);
console.log(min, max);
在非严格模式下,给apply的第一个参数为null的时候,会让max/min中的this指向window,然后将ary的参数一个个传给max/min。
4.2、求平均数
现在模拟一个场景,进行某项比赛,评委打分后,要求去掉一个最高分和最低分,剩下分数求得的平均数即为最后分数。
可能很多同学会想到用,写一个方法,让后接收所有的分数,然后用函数的内置属性arguments,把arguments调用sort方法排序,然后……,但是要注意,arguments并不是真正的数组对象,它只是伪数组集合而已,所以直接调用用arguments调用sort方法是会报错的:
arguments.sort(); // Uncaught TypeError: arguments.sort is not a function
那么这时候可不可以先将arguments转换为一个真正的数组呢,然后再进行操作呢,按照这个思想,我们自己实现一个实现题目要求的业务方法:
function avgFn() {
// 1、将类数组转换为数组:把arguments克隆一份一模一样的数组出来
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary[ary.length] = arguments[i];
}
// 2、给数组排序,去掉开头和结尾,剩下的求平均数
ary.sort(function (a, b) {
return a - b;
});
ary.shift();
ary.pop();
return (eval(ary.join('+')) / ary.length).toFixed(2);
}
var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);
我们发现在自己实现的avgFn方法中有一个步骤为将arguments克隆出来生成是一个数组。如果对数组的slice方法比较熟悉的话,可以知道当slice方法什么参数都不传的时候就是克隆当前的数组,可以模拟为:
function mySlice () {
// this->当前要操作的这个数组ary
var ary = [];
for (var i = 0; i < this.length; i++) {
ary[ary.length] = this[i];
}
return ary;
};
var ary = [12, 23, 34];
var newAry = mySlice(ary);
console.log(newAry);
所以在avgFn方法中的将arguments转换为数组的操作可以通过call方法来借用Array中的slice方法。
function avgFn() {
// 1、将类数组转换为数组:把arguments克隆一份一模一样的数组出来
// var ary = Array.prototype.slice.call(arguments);
var ary = [].slice.call(arguments);
// 2、给数组排序,去掉开头和结尾,剩下的求平均数
....
}
我们现在的做法是先将arguments转换为数组,然后再操作转换之后的数组,那么可以不可以直接就用arguments而不要先转换为数组呢? 当然是可以的,通过call来借用数组的方法来实现。
function avgFn() {
Array.prototype.sort.call(arguments , function (a, b) {
return a - b;
});
[].shift.call(arguments);
[].pop.call(arguments);
return (eval([].join.call(arguments, '+')) / arguments.length).toFixed(2);
}
var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);
4.3、将类数组转换数组
在4.2中提到了借用数组的slice方法将类数组对象转换为数组,那么通过getElementsByTagName等方法获取的类数组对象是不是也可以借用slice方法来转换为数组对象呢?
var oLis = document.getElementsByTagName('div');
var ary = Array.prototype.slice.call(oLis);
console.log(ary);
在标准浏览器下,的确可以这么用,但是在IE6~8下就悲剧了,会报错:
SCRIPT5014: Array.prototype.slice: 'this' 不是 JavaScript 对象 (报错)
那么在IE6~8下就只能通过循环一个个加到数组中了:
for (var i = 0; i < oLis.length; i++) {
ary[ary.length] = oLis[i];
}
注意:对于arguments借用数组的方法是不存在任何兼容性问题的。
基于IE6~8和标准浏览器中的区别,抽取出类数组对象转换为数组的工具类:
function listToArray(likeAry) {
var ary = [];
try {
ary = Array.prototype.slice.call(likeAry);
} catch (e) {
for (var i = 0; i < likeAry.length; i++) {
ary[ary.length] = likeAry[i];
}
}
return ary;
}
这个工具方法中用到了浏览器的异常信息捕获,那么在这里也介绍一下吧。
console.log(num);
当我们输出一个没有定义的变量的时候会报错:Uncaught ReferenceError: num is not defined
,在JavaScript中,本行报错,下面的代码都不再执行了。
但是如果使用了try..catch捕获异常信息的话,则不会影响下面的代码进行执行,如果try中的代码执行出错了,会默认的去执行catch中的代码。
try {
console.log(num);
} catch (e) { // 形参必须要写,我们一般起名为e
console.log(e.message); // --> num is not defined 可以收集当前代码报错的原因
}
console.log('ok');
所以try…catch的使用格式为(和Java中很像):
try {
// <js code>
} catch (e) {
// 如果代码报错执行catch中的代码
} finally {
// 一般不用:不管try中的代码是否报错,都要执行finally中的代码
}
如果有时候既想捕获到信息,又不想让下面的diamante执行,那么应该怎么做呢?
try {
console.log(num);
} catch (e) {
// console.log(e.message); // --> 可以得到错误信息,把其进行统计
// 手动抛出一条错误信息,终止代码执行
throw new Error('当前网络繁忙,请稍后再试');
// new ReferenceError --> 引用错误
// new TypeError --> 类型错误
// new RangeError --> 范围错误
}
console.log('ok');