首页 / JAVASCRIPT / Javascript-全面理解caller，callee，call，apply_基础知识

Javascript-全面理解caller，callee，call，apply_基础知识

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript-全面理解caller，callee，call，apply_基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3996字，纯文字阅读大概需要6分钟。

内容图文

Javascript-全面理解caller，callee，call，apply_基础知识

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> How to - Javascript Call, apply, caller - http://www.never-online.net </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT="never-online, blueDestiny"> 
<META NAME="Keywords" CONTENT="never-online, blueDestiny"> 
<META NAME="Description" CONTENT="http://www.never-online.net"> 
<STYLE> 
 
</STYLE> 
</HEAD> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
//<![CDATA[

// caller demo 
function callerDemo(b) { 
    if (callerDemo.caller) { 
        var a= callerDemo.caller.toString(); 
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 
// callee demo 
function calleeDemo() { 
    alert(arguments.callee); 
} 
function calleeLengthDemo(arg1, arg2) { 
    if (arguments.length==arguments.callee.length) { 
        window.alert("验证形参和实参长度正确！"); 
        return; 
    } else { 
        alert("实参长度：" +arguments.length); 
        alert("形参长度： " +arguments.callee.length); 
    } 
}

// simple call demo 
function simpleCallDemo(arg) { 
    window.alert(arg); 
} 
function handleSPC(arg) { 
    simpleCallDemo.call(this, arg); 
} 
// simple apply demo 
function simpleApplyDemo(arg) { 
    window.alert(arg); 
} 
function handleSPA(arg) { 
    simpleApplyDemo.apply(this, arguments); 
}

// inherit 
function base() { 
    this.member = "never-online"; 
    this.method = function() { 
        alert(this.member); 
    } 
} 
function extend() { 
    base.call(this); 
    window.alert(member); 
    window.alert(this.method); 
} 
// advanced apply demo 
function adApplyDemo(x) { 
    return ("this is never-online, BlueDestiny '" + x + "' demo"); 
} 
function handleAdApplyDemo(obj, fname, before) { 
  var oldFunc = obj[fname]; 
  obj[fname] = function() { 
    return oldFunc.apply(this, before(arguments)); 
  }; 
} 
function hellowordFunc(args) { 
  args[0] = "hello " + args[0]; 
  return args; 
} 
function applyBefore() { 
    alert(adApplyDemo("world")); 
} 
function applyAfter() { 
    handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); 
    alert(adApplyDemo("world")); // Hello world! 
} 
//]]> 
</SCRIPT> 
<BODY>

<h2> Javascript - 全面理解 caller，callee，call，apply </h2> 
<h6> Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny </h6>

<div align="center"> 
<div class="block"> 
  <h3> 1、caller </h3> 
  <h5> JScript参考中说明为：返回一个对函数的引用，该函数调用了当前函数。 
如何理解这句话, 先来举个简单的例子：<h5> 
  <pre class="code"> 
// caller demo { 
function callerDemo() { 
    if (callerDemo.caller) { 
        var a= callerDemo.caller.toString(); 
        alert(a); 
    } else { 
        alert("this is a top function"); 
    } 
} 
function handleCaller() { 
    callerDemo(); 
} 
  </script></pre> 
    <input type="button" onclick="callerDemo()" value="callerDemo"/> 
    <input type="button" onclick="handleCaller()" value="handleCaller"/> 
    <h5>上面的例子，可以看出，它就是返回一个调用数据的引用。(指向请求调用的函数) 也由此可以看出，当在这样的情况下，onclick触发事件的时候总是带着匿名函数的 </h5> 
</div> 
</div>

<div align="center"> 
    <div class="block"> 
        <h3> 2、callee </h3> 
        <h5> JScript参考中的说明为：返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。</h5> 
        需要注意的是callee拥有length属性，这个在有的时候用于验证还是比较好的。</h5> 
        <pre class="code"> 
function calleeDemo() { 
    alert(arguments.callee); 
} 
function calleeLengthDemo(arg1, arg2) { 
    if (arguments.length==arguments.callee.length) { 
        window.alert("验证形参和实参长度正确！"); 
        return; 
    } else { 
        alert("实参长度：" +arguments.length); 
        alert("形参长度： " +arguments.callee.length); 
    } 
} 
        </script></pre> 
        <input type="button" onclick="calleeDemo()" value="handleCallee"/> 
        <input type="button" onclick="calleeLengthDemo()" value="handleCalleeLength"/> 
        <h5> 从上面的例子可以看出，callee可以用来打在执行函数，也就是指向被调用的函数。上面的例子就说明calee可以打印其本身，当然还有其它的一些用途。而length属性中arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。</h5> 
    </div>

<div align="center"> 
    <div class="block"> 
        <h3> 3、call 和 apply</h3> 
        <h5> call方法JScript参考中的说明：调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[,   [,.argN]]]]])，但是没有示例 
        </h5> 
        <h5> apply方法JScript参考中的说明：应用某一对象的一个方法，用另一个对象替换当前对象。apply([thisObj[,argArray]]) </h5> 
        <h5> 实际上这两个的作用几乎是相同的，要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg参数可以是变量，而apply([thisObj[,argArray]])中的参数为数组集合。下面来看看call, apply的具体应用 </h5> 
    <pre class="code"> 
// simple call demo 
function simpleCallDemo(arg) { 
    window.alert(arg); 
} 
function handleSPC(arg) { 
    simpleCallDemo.call(this, arg); 
} 
// simple apply demo 
function simpleApplyDemo(arg) { 
    window.alert(arg); 
} 
function handleSPA(arg) { 
    simpleApplyDemo.apply(this, arguments); 
} 
    </script></pre> 
    <input type="button" onclick="handleSPC('never-online')" value="handle simple call"/> 
    <input type="button" onclick="handleSPA('BlueDestiny')" value="handle simple apply"/> 
    <h5> 从上面简单的例子可以看出，call和apply可以把当前的参数传递给另外一个函数的参数中，从而调用另一个函数的应用。有的时候这是一个很实用的方法，当然，用call或是apply（是参数或是数组），看实际情况而定了。 
    </h5> 
    <h4> 下面来看另一个应用 </h4> 
    <h5> call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为"继承"。看下面示例。 
    </h5> 
    <pre class="code"> 
// inherit 
function base() { 
    this.member = "never-online"; 
    this.method = function() { 
        window.alert(this.member); 
    } 
} 
function extend() { 
    base.call(this); 
    window.alert(member); 
    window.alert(this.method); 
} 
    </script></pre> 
    <input type="button" onclick="extend()" value="inherited"/> 
    <h5> 上面的例子可以看出，通过call之后，extend可以继承到base的方法和属性。 </h5>

<h4> 再看一个apply的应用 </h4> 
    <pre class="code"> 
// advanced apply demo 
function adApplyDemo(x) { 
    return ("this is never-online, BlueDestiny '" + x + "' demo"); 
} 
function handleAdApplyDemo(obj, fname, before) { 
  var oldFunc = obj[fname]; 
  obj[fname] = function() { 
    return oldFunc.apply(this, before(arguments)); 
  }; 
} 
function hellowordFunc(args) { 
  args[0] = "hello " + args[0]; 
  return args; 
} 
function applyBefore() { 
    alert(adApplyDemo("world")); 
} 
function applyAfter() { 
    handleAdApplyDemo(this, "adApplyDemo", hellowordFunc); 
    alert(adApplyDemo("world")); // Hello world! 
} 
    </script></pre> 
    <h5> 需要注意的是，要先点"原始的adApplyDemo('world')"按钮，如果先点"应用后的adApplyDemo('world')"按扭，会先应用了apply方法，这样原始的值将会被改变。或许有的朋友没有发现有什么特别的，我在这里指明一下，当点击左边的按扭时，只有"this is never-online, BlueDestiny 'world' demo"， 当点击右边的按扭后，会现结果是"this is never-online, BlueDestiny 'hello world' demo"，再点点左边的按扭，看看结果又会是什么呢？自己试试看:D，已经改写了函数adApplyDemo。这个例子则说明了call和apply的"真正"作用了。 
    </h5> 
    <input type="button" onclick="applyBefore()" value="原始的adApplyDemo('world')"/> 
    <input type="button" onclick='applyAfter()' value="应用后的adApplyDemo('world')"/> 
    </div> 
</div> 
  <h4 class="copyright"> 
    Power By BlueDestiny, never-online,  
    http://www.never-online.net  
  </h4> 
</div> 
</div> 
</BODY> 
</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

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

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/306075.html

来源：【匿名】

【上一篇】如何让动态插入的javascript脚本代码跑起来。_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript-全面理解caller，callee，call，apply_基础知识】教程文章相关的互联网学习教程文章

Leetcode刷题预备基础知识（JavaScript版）【图】

参考：https://www.bilibili.com/video/BV14f4y1C7hg 宝藏up主！1.时间复杂度O(1)O(n)复杂度看最高的O(n2) 如果只是两个并列的for循环，时间复杂度还是O（n），100个并列的for循环，也是O(n)这里有继承，两个循环分摊一个任务O(logn)二分搜索O(nlogn)排序优化的方法:从低-级的复杂度寻找灵感O(n)->O(logn)使用二分搜索O(nlogn) -> O(n)遇到需要排序的题，想想能否通过数组,set, map,heap解O(n2)-> O(nlogn)遇到嵌套循环，想想能不能...

JavascriptDom的基础知识回顾【代码】

1. 节点及其类型: 1). 元素节点2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert(‘hello world‘);">Click Me!</button> 　　缺点: ①. js 和 html 强耦合, 不利用代码的维护 ②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然...

11-23网页基础--JavaScript基础知识【图】

第一课 JavaScript简介一、定义：JavaScript是脚本语言，需要宿主文件，它的宿主文件是html文件。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。二、用法：在html中的位置有三块：1）head里面；2）body里面；3）</html>之后，为了保险起见一般写在</html>之后。<script language="javascript">代...

JS基础知识总结

js基础知识点总结如何在一个网站或者一个页面，去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs)常用内部类:Data Array Math StringHTML属性，CSS属性HTML：属性.HTML属性="值"；CSS：对象.style.CSS属性="值";class和float1.class:className2.float:cssFloat获取对象id:document.getElementById("id 名")事件...

JavaScript基础知识----六道有趣的Js基础题以及解答【代码】

题目：1.找出数字数组中最大的元素（使用Math.max函数）2.转化一个数字数组为function数组（每个function都弹出相应的数字）3.给object数组进行排序（排序条件是每个元素对象的属性个数）4.利用JavaScript打印出Fibonacci数（不使用全局变量）5.实现如下语法的功能：var a = (5).plus(3).minus(6); //26.实现如下语法的功能：var a = add(2)(3)(4); //9解答：1.var a = [10,1,2,3,4,8,9]; function max(a){var len = a.length-1;va...

JavaScript基础知识

一、JavaScript脚本语言的特性 JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性:1、在客户端执行。完全在用户的计算机上运行，无须经过服务器。2、面向对象。具有内置对象，也可以直接操作浏览器对象。3、动态变化。可以对用户的输入作出反应，也可以直接对用户输出。4、简单易用。JavaScript脚本语言虽然简单，但初学者也能快速掌握。5、只能与HTML语言一起使用。要通过浏览器解释执行。二、如何在...

JavaScript基础知识梳理----数据类型

JavaScript数据类型JavaScript的数据类型有六大类：Undefined、null、string、number、object、boolean1.Undefined ---使用var声明变量但未初始化，对未初始化的变量或尚未定义的变量使用typeof运算符均会返回undefined问题：区分空对象指针和尚未定义的变量使用typeof检测，尚未定义的变量返回的是undefined，而空对象指针返回的是object2.Null逻辑上null表示一个空对象指针使用typeof检测时会返回object Null和undefined的关系...

JavaScript基础知识——作用域和闭包【代码】

作用域和闭包Q: 1.说一下对变量提升的理解　　　　2.说明this几种不同的使用场景　　3.创建10个<a>标签，点击时弹出对应序号var i; for(i = 0; i < 10; i++){(function(i){var a = document.createElement(‘a‘);a.innerHTML = i + ‘<br>‘;a.addEventListener(‘click‘, function(e){e.preventDefault();alert(i);});document.body.appendChild(a)})(i) } 　　4.如何理解作用域　　5.实际开发中闭包的应用// 闭包实际...

JavaScript基础知识整理（1）【图】

粗略理解，努力入门中1、在html中引入外部脚本： <script src="filename.js"></script>2、注释：多于一行的长注释使用 /*注释内容 */ ，只有一行的注释用 //注释内容。3、创建函数的格式:function name（）{　　函数的内容}在函数内部创建的变量为局部变量，只有在函数的内部有效，在所有函数之外创建的变量为全局变量，整个代码中的任何地方都能使用。 4、getElementById() 通过id获得和操作元素； getElementByValue...

Javascript基础知识盲点总结——数据类型和数组

一、javascript总的基本类型1.javascript中的基本类型共有五种：数字、字符串、布尔值、undefined、null其中null和undefined最大的区别在于，被赋予null的变量通常被认为是已经定义了的。2.除了以上五种基本类型外，其他的数据类型都属于对象。二、利用typeof方法查看数据类型在javascript中可以通过typeof方法来查看某个变量或值得数据类型。该方法会返回一个代表数据类型的字符串，可能返回的值包括：number,string, boolean, un...

JavaScript 之基础知识【代码】

JavaScript 基础知识JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。JavaScript 很容易使用！你一定会喜欢它的！ JavaScript 简介在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，...

JavaScript基础知识(javaSctipt深入浅出学习)【代码】【图】

1、javascript的数据类型　　1.1 javaScript是弱类型的语言，也就是说它没有显示的指定类型，通常说有6中基本类型　　　　分别是5种原始类型（number, String, boolean, null, undefined）和一种对象类型（包括数组，函数等...）　　1.2 javaScript的隐式转换，加号和减号　　1.3 严格等于（‘===‘）：　　　　类型不同会返回false， null === null, undefined === undefined　　　　NaN != NaN(不严格相等), new Object != new ...

Javascript基础知识盲点总结——函数

一、函数中的arguments对象每个函数内部都有一个arguments，它能返回函数所接受的所有参数注意：argumens接收的是实参如下是利一个利用arguments特性编写的求和函数：function sumOnSteroids(){ var I, res = 0; var number_of_params = arguments.length; for(I = 0; I < number_of_params; i++){res += arguments[i]; } return res; } 二、关于变量的作用域在javascript中，不能为变量定义特定的块级作用域，但是可以定义其所属的...

JavaScript基础知识（变量/引用/转换/函数）【代码】【图】

———————————————————————————————————————————— 变量全局变量：在函数体外声明，全局可以使用局部变量：通过关键字var来声明变量类型 1 <script type="text/javascript">2var a;3// 十进制 4 a = 1;5 a = 1.2;6 a = -23;7 a = .23e4;8 a = 3e-2;9// 十六进制10 a = 0xABCDE; 11 a = 0Xff; 12// 八进制13 a = 0123; 14 a = 01234567; 15// ...

javascript基础知识(7) 条件判断【代码】

JavaScript使用if () { ... } else { ... }来进行条件判断。例如，根据年龄显示不同内容，可以用if语句实现如下：var age = 20; if (age >= 18) { // 如果age >= 18为true，则执行if语句块alert(‘adult‘); } else { // 否则执行else语句块alert(‘teenager‘); }其中else语句是可选的。如果语句块只包含一条语句，那么可以省略{}：var age = 20; if (age >= 18)alert(‘adult‘); elsealert(‘teenager‘);省略{}的危险之处在于，...

首页 / JAVASCRIPT / Javascript-全面理解caller，callee，call，apply_基础知识

Javascript-全面理解caller，callee，call，apply_基础知识

内容导读

内容图文

内容总结

内容备注

内容手机端

【Javascript-全面理解caller，callee，call，apply_基础知识】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程