这次给大家带来javascript中call详解，使用javascript中call的注意事项有哪些，下面就是实战案例，一起来看一下。
首先要先了解在函数本身会有一些自己的属性，比如：
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 // undefinedf.aaa // undefined12345678910111213var res = Fn(); // res是undefined Fn中的this是window
登录后复制
角色一：普通函数，对于Fn而言，它本身是一个普通的函数，执行的时候会形成私有的作用域，然后进行形参赋值、预解析、代码执行、执行完成后内存销毁；
角色二：类，它有自己的实例，f就是Fn作为类而产生的一个实例，也有一个叫做prototype的属性是自己的原型，它的实例都可以指向自己的原型；
立即学习“Java免费学习笔记（深入）”；
角色三：普通对象，Fn和 var obj = {} 中的obj一样，就是一个普通的对象（所有的函数都是Function的实例），它作为对象可以有一些自己的私有属性，也可以通过proto找到Function.prototype；
函数的以上三种角色，可能大多数同学对于角色一和角色二都是没有任何疑问的，不过对于角色三可能会稍有疑惑，那么画张图来理解下吧：
函数作为普通对象.png
call深入
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();};1234567891011121314151617
登录后复制
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。
看完以上那段话是不是有些懵逼了呢？哈哈，没事，接下来看下面例子，理解一下。
call方法经典例子
function fn1() { console.log(1);}function fn2() { console.log(2);}123456
登录后复制
输出一
fn1.call(fn2); // 1
登录后复制
首先fn1通过原型链查找机制找到Function.prototype上的call方法，并且让call方法执行，此时call这个方法中的this就是要操作的fn1。在call方法代码执行的过程过程中，首先让fn1中的“this关键字”变为fn2，然后再让fn1这个方法执行。
注意：在执行call方法的时候，fn1中的this的确会变为fn2，但是在fn1的方法体中输出的内容中并没有涉及到任何和this相关的内容，所以还是输出1.
输出二
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};1234567
登录后复制
将上面的代码写为另一种形式：
Function.prototype.call = test1;function test1 (context) { // 改变fn中的this关键字 // eval(....); // 让fn方法执行 this(); // 此时的this就是fn1};12345678
登录后复制
我们知道，这两种形式的写法的作用是一样的。那么此时可以将 fn1.call.call(fn2) 写成 test1.call(fn2) ，call中的的this就是test1：
Function.prototype.call = function (context) { // 改变fn中的this关键字 // eval(....); // 让fn方法执行 this(); // 此时的this就是test1};1234567
登录后复制
注意：此时call中的的this就是test1。
然后再将call中this替换为fn2，那么test1方法变为：
Function.prototype.call = function (context) { // 省略其他代码 fn2(); };12345
登录后复制
所以最后是fn2执行，所以最后输出2。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
spring boot的定时任务应该如何使用
javaScript使用call和apply
以上就是javascript中call详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783022.html
