javascript中call详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript中call详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4808字，纯文字阅读大概需要7分钟。

内容图文

首先要先了解在函数本身会有一些自己的属性，比如：

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 // undefined12345678910111213
var res = Fn(); // res是undefined Fn中的this是window

角色一：普通函数，对于Fn而言，它本身是一个普通的函数，执行的时候会形成私有的作用域，然后进行形参赋值、预解析、代码执行、执行完成后内存销毁；

角色二：类，它有自己的实例，f就是Fn作为类而产生的一个实例，也有一个叫做prototype的属性是自己的原型，它的实例都可以指向自己的原型；

角色三：普通对象，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。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

spring boot的定时任务应该如何使用

javaScript使用call和apply

以上就是javascript中call详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的javascript中call详解全部内容，希望文章能够帮你解决javascript中call详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端