标签：text 新版本 操作 doc 逻辑 多个 student 引用 关键字
函数是js中最复杂的一块内容，其中call() 和 apply()又是重灾区，初学者往往在这个坑里栽倒，这次来分析这2个函数对象的成员
在js的体系下，js有3种角色。分别是普通函数、构造器、对象。
1.普通函数
<script type="text/javascript">
function f1(){
console.log(‘这是个函数‘);
}
</script>
这里声明的f1，它的角色就是个普通函数
2.构造器
<script type="text/javascript">
function Person(name, age){
this.name = name;
this.age = age;
}
var per = new Person(‘james‘, 28);
</script>
这里声明的Person，虽然也是函数，但是在本例中它的角色就是构造器。
3.对象
<script type="text/javascript">
var f2 = function(){
console.log(‘这个匿名函数是被当对象使用的‘);
}
f2();
</script>
这里的f2是引用类型变量，它指向的是一个函数对象，我们也直接称之为函数对象。
先来看一个例子
<script type="text/javascript">
function f1(){
console.log(this)；
}
f1();
</script>
这个代码执行完之后会输出什么？
答案是：window，那么也就是说，在这个函数中，this是指向window对象的。
为什么呢？原因是，根据我们之前说过的作用域和作用域链的理论，这个f1是在全局作用域下声明的，那么，只要是在全局作用域下声明的变量，对象，函数，通通都被当成window对象的成员。换句话说，这里声明的f1函数，在调用的时候完全可以这么调用： window.f1()； 。我们一般在写程序的时候，往往为了代码简洁，就把window给省了。这一点跟我们直接使用document对象是一个道理。
下面我给上例简单做个变形：
<script type="text/javascript">
function f1(){
"use strict";//使用js严格模式
console.log(this);
}
f1();//输出undefined
</script>
这次程序运行的结果是：undefined。什么意思？意思就是，这次运行之后，f1中this是undefined，而不是上例中的window了。
我们说了，谁是函数的调用者，那么函数中的this就是指向谁，在正常模式下，直接调用f1()和通过window.f1()调用是完全等价的，所以正常模式下看到f1()执行时，它内部的this是指向window对象的。而当我们使用严格模式时，f1（）调用时，函数名前面是空的，也就被当作”无主之函数“来调用了。就是没人调用你，那this自然就是undefined。
两者的区别就是，这次在f1中多了一个“use strict"；这样一条语句，这条语句是声明，使用js严格模式来解析代码。
那么在这里就简单说下严格模式这个概念。
js有两种运行模式，分别是正常模式和严格模式。我们平时使用的都是正常模式。如果在代码前加一条“use strict"；语句，那么其后的代码将以严格模式执行。
设立"严格模式"的目的，主要有以下几个：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
我们从以上代码中，可以得出一个结论就是，在一个函数中，this这个关键字的指向是可以改变的。
函数声明了以后，可以像传统方法一样调用，比如f1（）;但也可以使用另一种途径来调用。比如：
<script type="text/javascript">
function f1(){
console.log(this);
}
f1();//输出window
f1.apply();//输出window
f1.call();//输出window
</script>
这里我们连续3次调用f1函数。第一次是普通的函数调用，第2次和第3次是把f1当对象来使用的，然后调用了f1这个对象的apply方法和call方法。并且我们看到的输出结果都是一致的。
那么问题来了，这个apply()和call()从何而来？
简单，根据原型和原型链理论，如果自己没有定义，那么就一定是从原型链上拿过来的。我们知道所有的函数其实都是内置对象Function的实例，Function的原型对象，也就是Function.prototype上定义了apply()和call()，所以我们自定义的任何函数，都可以通过函数名打点的形式访问到这2个成员。当然此时是把函数以对象的角色来使用的。
其实，apply和call还能传递参数。我们先来个试试
<script type="text/javascript">
‘use strict‘; function f1(){ console.log(this); } f1();//输出undefined f1.apply();//输出undefined f1.call();//输出undefined </script>
把上边的代码稍作改变，使用严格模式，运行结果仍然为输出undefined，这跟上一个小节说的是一回事。
从上边来看，3次调用结果完全相同，我们可以得出一个重要结论：
call和apply就是用来执行这个函数的。（简直是废话）从这两个单词的字母意思来看也是如此，call就是呼叫，调用的意思，apply也是应用，使用的意思。
那为什么要使用apply和call呢？这两个成员的存在的意义何在？
前边讨论的都是不需要传递参数的函数。下面我们来考察需要传递参数的情况。然后再指出call和apply的真实用途。看下面的例子：
<script type="text/javascript">
function add(a, b){
console.log( (a + b) + " : " + this);
}
add(2,3);
</script>
这里的add函数需要2个参数，正常调用我们都非常熟悉。如果想借助apply和call来调用，那么就必须做出改变，如果仅仅是
add.call(2,3);
add.apply(2,3);
这样调用会报错。
call和apply的函数签名是这样的：
call( thisArg [, arg1, arg2, arg3,.....]);
apply(thisArg [ [arg1, arg2, arg3, ...]]);
说明一下：
1.这两个函数的作用完全相同，就是在如果需要传递参数时，参数的形式有点区别。
2.两者第1个参数都是thisArg，顾名思义，要求你传一个对象，表示当函数调用时，要把这个对象当成函数内部的this所指对象。这一点很重要，我们后边会详细介绍
3.如果调用的函数本身需要传递参数，那么这些参数要放在call和apply实参的第2个位置开始传递。并且第一个thisArg必须传递，实在不需要传递，也可以给null。
4.如果被调用的函数就没有参数，那么通过call和apply来调用函数时，可以给thisArg传参，也可以不传，不传就是默认原始的this指向。
看了这么多都要懵了，我们看例子，然后来一一对照着说明。还是上边的函数
<script type="text/javascript">
function add(a, b){
console.log( (a + b) + " : " + this);
}
add.call(null,2,3);
add.apply(null,[2,3]);
</script>
输出结果是：
，从结果我们可以分析出的结论是：
1.我们传递thisArg是null，但是并没有改变add函数内部的this指向，这时add函数内部，this指向仍然是window对象。
2.call传递参数，需要给离散的，单个的值，如果需要传多个，那么需要把多个值用逗号隔开。
3.apply传递参数，需要给数组，这里的[2,3]，就是个数组。 这也是apply和call的唯一差别。其实功能是完全一样的。
接下里，我们再变一变。
<script type="text/javascript">
function add(a, b){
console.log( (a + b) + " : " + this);
}
var obj = {name:"james", age:18};
add.call(obj,2,3);
add.apply(obj,[2,3]);
</script>
这次我们声明了一个obj对象，然后让这个对象当做call和apply的thisArg参数传递过去。运行结果是：
我们可以看到这次add函数运行时this指向变了。变成了一个Object对象，这个Object对象就是我们传递过去的obj。现在大家应该清楚call和apply的第一个参数thisArg是干什么用了吧。
现在我们可以指出call()和apply()的定义：执行函数体，并试图改变（篡改）函数体中this关键字的指向。
如果还不明白，我们再看一个例子：
<script type="text/javascript">
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function(){
console.log("你好：" + this.name);
}
var per = new Person(‘老李‘, 28);
per.sayHi();// 输出 “你好：老李"
function Student(name, age){
this.name = name;
this.age = age;
}
var stu = new Student(‘老王‘, 18);
per.sayHi.call(stu);//输出“你好：老王”
per.sayHi.apply(stu);//输出“你好：老王”
</script>
代码的注释已经说明了程序执行结果。我们只解释下。本来per调用sayHi()，是要输出this.name。正常调用时，this就是指向由Person这个构造函数实例化出来的这个per对象它自己，所以输出的就是per自己的name属性值：老李。
当使用call和apply时，我们给他传递的thisArg是stu对象，那么这个时候，在执行sayHi方法时，当运行到语句：console.log("你好：" + this.name)时，这个this就被替换成了stu对象，那么this.name当然也就是读取出了：老李 这个值。
从这个案例，我们可以得出以下2个结论：
1.如果call和apply拿来使用，那么十有八九就是用来改变函数内部this指向的。否则你直接正常调用好了，还整什么call和apply？多此一举
2.Student本身没有声明sayHi()，那么正常情况下，老李这个stu对象，正常情况下是不能打招呼的，但这里我们确实达到了让老李这个stu对象打招呼的目的。我们把这种用法称之为js方法借用。
怎么理解这个借用呢？首先借用还是要忠实的执行原来声明时定义的代码，只不过是替换掉this这个”主体“而已。打个比方，就相当于你有一张加油卡，你拿加油卡是给你的汽车加油，我没有加油卡，我想加油怎么办呢？我可以借你卡来一用，我借过来了，加油就是给我的车加油。当然不管是改变不改变this，都不能改变函数执行的代码逻辑，你拿了卡只能加油，我借过来卡也只能执行加油的操作，不可能拿了加油卡去银行取钱。
call和apply的实际用途有2种：
1.方法借用
2.继承（其实也是借用）
继承的问题我们放在其他帖子中讨论，这里只给出2个方法借用的例子。
例1：求数组的最大值
方法1.自己写个函数，使用for循环遍历这个数组，这个方法谁都会，不赘述。
方法2.借用Math.max()。这个Math是系统内置对象，它给我们提供了很多数学运算的方法，比如Math.max()就是求一组数的最大值。但是这个max函数不支持传递数组，只支持传递单个单个的离散数据。所以，如果想传递一个数组给它，会报错的。好了，虽然不能直接调用，但是我们可以借用。
<script type="text/javascript">
var ary = [22, 334, 33, 21, 83];
var max = Math.max.apply(null, ary);
console.log(max);
</script>
这里需要解释下为什么这么调用，为什么用apply，又为什么要给他传一个null。
1.Math.max()的签名是：Math.max(arg1, arg2, arg3...);
2.我们这里不需要改变this值，只需要通过方法借用，把数组ary里的各个项，当做max函数要的离散的参数传给它，借用一下即可。
所以，我们给apply方法传递的thisArg参数为null，因为我们无意改变max函数在执行时的this指向。再多说一句，由于max函数在内部执行的时候，根本就没使用到this这个关键字，所以，这个时候你给thisArg传什么都无所谓，包括把ary自己传过去也行。如下： var max = Math.max.apply(ary, ary); 。
为什么选用apply而不用call，因为我们这ary是一个数组，apply接受的参数正好是个数组，而call只接收离散的单个单个的参数，所以本例中只能选用apply来实现借用。
例2.把伪数组转化为数组。
方法1.自己写一个函数，通过for循环遍历搞定。
方法2.借用Array对象的slice()函数
<script type="text/javascript">
var wsz = {0:‘james‘, 1:‘terry‘, 2:‘jerry‘, 3:‘tod‘, length:4};
var ary1 = Array.prototype.slice.call(wsz);
var ary2 = Array.prototype.slice.apply(wsz);
console.log(ary1);
console.log(ary2);
</script>
输出是：
这个例子中，使用apply和call是一样的效果。下面来做解释说明：
1.slice（）函数作用是从目标函数中截取连续的一部分元素形成一个新的数组，并返回这个新数组。其签名是：Array.prototype.slice(start， end)。如果只传1个参数，将以这个参数为起始点，开始截取目标数组中的元素直到末尾；如果不传参数，返回的新数组将与老数组完全相同
2.我们现在的例子，就是想让伪数组wsz中每一个键值对（length除外）都转化成数组的一个项，而不是某一部分，所以我们不需要给slice传递start参数和end参数。所以我们只需要传递给call或者apply那个thisArg参数。我们这里必须把待转化的对象wsz作为thisArg，因为在slice方法内部，是通过this这个关键字来遍历数组成员的。所以这时候要借用slice，就必须让slice函数的代码在执行时，this必须指向当前待转化的对象wsz。所以这里，我们传递给call和apply的参数wsz，是传递给thisArg的。
3.如果你真的是要把伪数组wsz中的某几个连续的成员转化成数组，那么就必须传start和end参数了。形如：
var ary1 = Array.prototype.slice.call(wsz, 1, 3); var ary2 = Array.prototype.slice.apply(wsz, [1, 3]);
这里我们应该看到，call传递的是单个的离散的值，apply就要传递一个数组。
4.其实还可以这么写 var ary1 = [].slice.call(wsz, 1, 3); 其中[]就是一个空数组对象。由于slice方法是定义在Array的原型对象中的，所以，所有的数组实例对象都能通过原型链访问到slice方法，而且这种写法更简单。我们在开发中往往使用这种更简化的写法。大家要看得懂。
好了，到这里我就把call和apply的来龙去脉说清楚了。
浅析JavaScript中Function对象（二） 之 详解call&apply
标签：text 新版本 操作 doc 逻辑 多个 student 引用 关键字
原文地址：https://www.cnblogs.com/ldq678/p/9711494.html
