定义
call和apply：函数调动call()办法在执行的时候，函数的外面的this会指向第一个参数值，除第一个参数值前面的若干支都是传进该函数，简而言之就是扭转函数运行时的this指向。
应用示例： fn.call(obj, args1, args2...), fn.apply(obj, [arg1, arg2 ...]), call与apply调用除了第二个传参形式不一样，其余一样。举个例子1：
var obj = { name: '程序员米粉'};function fn() { console.log(this.name)}fn() // this.name => undefinedfn.call(obj) // this.name => '程序员米粉'总结：
1、fn函数调动call办法执行时候，函数的this指向了obj2、call办法和fn函数都执行了。如果还看不明确，fn.call(obj)执行的时候，能够看作在obj对象外面有个fn函数执行。那么fn函数外面的this指向就是obj
再举个例子2：
var obj = { name: '程序员米粉', fn: function() { console.log(this.name) }};obj.fn(); // this.name => '程序员米粉'总结：
1、例子1中的 fn.call(obj)执行的时候，相当于例子2 obj.fn(); call办法被调用的时候，会扭转以后调用函数的执行上下文（就是扭转this指向）。模仿步骤1
例子1：
var obj = { name: '程序员米粉'};function fn() { console.log(this.name)}fn.call(obj) // this.name => '程序员米粉'例子2：
var obj = { name: '程序员米粉', fn: function() { console.log(this.name) }};obj.fn(); // this.name => '程序员米粉'要实现本人的myCall办法，首先察看例子1和例子2中测 obj对象，有什么不一样。
不一样：
1、例子2中obj增加了fn函数办法。2、例子2执行办法是obj.fn()执行，而例子1中执行办法是 fn.call(obj)。这就好办了，咱们如何把例子1革新成例子2呢？
咱们总结一下步骤：
1、把fn函数设置为对象的一个属性2、调用fn函数执行。3、调用结束之后，从对象中删除fn属性（函数）。 （给对象减少了属性，咱们调用完就能够删掉）思路有了，那代码咱们能够写成这样：
obj.fn = fn;obj.fn();delete obj.fn; // 删除属性根据上述思路，那依照这个思路，写一个咱们本人的myCall办法：
Function.prototype.myCall = function(context) { context.fn = this; context.fn(); delete context.fn;};var obj = { name: '程序员米粉'};function fn() { console.log(this.name);}fn.myCall(obj) // this.name => '程序员米粉' ````执行一下myCall办法，能够得进去，this指向obj对象，并打印了冀望的值，所以这个办法第一步实现了！ # 模仿步骤2持续欠缺一下myCall办法，把fn办法改一下，减少2个参数, 再执行一下办法。function fn(index, value) {
console.log(this.name);console.log(index, value);}
fn.myCall(obj, 111, '我是一个值');
// this.name => '程序员米粉'
// undefined, undefined
执行一个fn函数，只打印一个值进去，传进入的参数，没有打印进去。那须要革新一下办法，使参数也能打印进去。咱们能够从arguments对象中取值，arguments对像代表函数传进来的对象，打印看看就晓得了。Function.prototype.myCall = function(context) {
console.log(arguments);context.fn = this;context.fn();delete context.fn;};
打印进去的 arguments对象：咱们能够看到 arguments 对象构造是：{
'0': { name: '程序员米粉' }, '1': 111, '2': '我是一个值' }
0代表传进来的第1个参数，1代表第2个参数，以此类推。咱们看到arguments是一个类数组，那就能够用数组办法，存储起来， 因为咱们只是获取参数，所以从1开始取值。var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push('arguments[' + i + ']');}
// args为 ["arguments[1]", "arguments[2]", "arguments[3]"]
取值的参数的问题解决了，咱们下一步解决一下，如何把这些参数传给函数执行。// 思考一下，怎样才能这样传参给fn函数执行
context.fn(arguments[1], arguments[2]);
可能有人想到如下办法：// 把数组里的元素通过join办法，传进函数的形参里
context.fn(args.join(','))
// 这样的话，其实 context.fn(args.join(','))执行变成：context.fn("arguments[1]", "arguments[2]");
// 变成了一个字符串，变成了一个死值了，无论传什么，都变成字符串 "arguments[1]", "arguments[2]" 。。。。
能够有人又想到用ES6办法来解决。这个call是ES3的办法，所以还是不必ES6办法解决。其实咱们能够用 eval办法来解决。查文档得悉 eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。这到底是什么意思？ eval() 的参数是一个字符串。如果字符串示意的是表达式，eval() 会对表达式进行求值。如果参数示意一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。举个例子： console.log(eval('2 + 2')); // 2 + 2 => 4, 最初输入是2 console.log(eval('context.fn(' + args +')')) // 相当于运行 context.fn(arguments[1], arguments[2], ...)，应用eval执行一串 JavaScript 语句。+ [eval更具体链接；](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) args 会主动调用 Array.toString() 这个办法。通过eval主动执行变成context.fn(arguments[1], arguments[2])这样执行。代码如下：var obj = {
name: '程序员米粉'};
function fn(index, value) {
console.log(this.name); // 程序员米粉console.log(index, value); // 111 我是一个值}
Function.prototype.myCall = function(context) {
context.fn = this;var args = [];for (var i = 1; i < arguments.length; i++) { args.push('arguments[' + i + ']');}eval('context.fn(' + args + ')');delete context.fn;};
fn.myCall(obj, 111, '我是一个值'); // this.name => '程序员米粉'
执行一下办法，输出完全符合咱们的预期，咱们终于搞定了！# 模仿步骤3## 第一个参数传null或undefined，this指向为window举个例子：var name = '程序员米粉'
function fn() {
console.log(this.name); // 程序员米粉}
fn.call(null); // this.name => '程序员米粉'
fn执行的时候，还是输入 this.name = '程序员米粉'，阐明了什么，只有第一个参数传 null或者undefined，那函数调用call办法，this指向window## 函数执行call办法，有返回值，那就返回。举个例子：var name = '程序员米粉'
function fn() {
console.log(this.name); // 程序员米粉return { name: this.name}}
fn.call(null); // this.name => '程序员米粉'
// 执行fn函数间接返回对象
// {
// name: '程序员米粉'
// }
## 最终版实现call代码var obj = {
name: '程序员米粉'};
function fn(index, value) {
console.log(this.name); // 程序员米粉console.log(index, value); // 111 我是一个值return { name: this.name, index: index, value: value};}
Function.prototype.myCall = function(context) {
var context = context || window;context.fn = this;var args = [];for (var i = 1; i < arguments.length; i++) { args.push('arguments[' + i + ']');}var result = eval('context.fn(' + args + ')');delete context.fn;return result;};
fn.myCall(obj, 111, '我是一个值'); // this.name => '程序员米粉'
// 最终输入
// {
// name: "程序员米粉"
// index: 111
// value: "我是一个值"
// }
# 实现apply代码因为apply与call实现原理根本一样，那就不具体叙述了，间接上代码：Function.prototype.myApply = function(context, arr) {
var context = context || window;context.fn = this;var result;if (!arr) { result = context.fn();} else { var args = []; for (var i = 0; i < arr.length; i++) { args.push('arr[' + i + ']'); } result = eval('context.fn(' + args + ')');}delete context.fn;return result;};
# 结语心愿看完这篇文章对你有帮忙：+ 了解call和apply原理+ 实际本人写一个call和apply办法文中如有谬误，欢送在评论区斧正，如果这篇文章帮忙到了你，欢送点赞和关注，后续会输入更好的分享。欢送关注公众号：【程序员米粉】