`
ufoqhmdt
  • 浏览: 37008 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于Javascript中call与apply的进一步探讨

阅读更多

我一直认为代码是最能说明问题的.必要的地方我写有注释.参考一些相关的文章.下面的代码做了进一步的探讨.或许能让理解call和apply更进一步!

 

			function log(a) {
				//我习惯使用firebug和chrome自己的调试器.您也可以手动修改为alert
				console.log(a);
			}

			function ObjB() {
				this.message = "messageB";
				this.setMessage = function(arg) {
					this.message = arg;
				};
			}

			function ObjA() {
				this.message = "messageA";
				this.getMessage = function() {
					return this.message;
				};
			}

			var b = new ObjB();
			var a = new ObjA();
			//可以直接访问属性.输出为messageA
			log(a.message);

			//给对象ObjA动态指派ObjB的setMessage方法,注意,ObjA本身是没有这方法的!
			b.setMessage.call(a, "A的消息");
			//输出"A的消息"
			log(a.getMessage());
			//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!可以理解为得到A里面的getMessage方法体.然后用call注入到B里面执行.因为上下文变成了B,所以B多了getMessage方法体.
			var result = a.getMessage.call(b);
			//输出"messageB"
			log(result);
			//Uncaught TypeError: Object #<ObjB> has no method 'getMessage' 出错了.因为call并没有把getMessage永久注入进ObjB
			//log(b.getMessage());

			function print(a, b, c, d) {
				log("调用者是:" + arguments.callee.caller.name + " 上下文是:" + this + "  参数是:" + a + b + c + d);
			}

			//通过example里面 的三次调用,可以看出:call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.
			function example1(a, b, c, d) {
				//用call方式借用print,参数次序传递.
				print.call(this, a, b, c, d);
				//用apply方式借用print, 参数作为一个数组传递,
				//这里直接用JavaScript方法内本身有的arguments数组
				print.apply(this, arguments);
				//或者封装成数组
				print.apply(this, [a, b, c, d]);
			}

			//此方法和example1一样.但是突出分析this代表什么东西.
			function example2(a, b, c, d) {
				print.call(window, a, b, c, d);
				print.apply(window, arguments);
				print.apply(window, [a, b, c, d]);
			}

			example1("参数1", "参数2", "参数3", "参数4");
			example2("参数1", "参数2", "参数3", "参数4");

			/* -----------------------------------------------------------------*/
			function SimulateFun() {
				this.print = function(a, b, c, d) {
					log("调用者是:" + arguments.callee.caller.name + " 上下文是:" + this + "  参数是:" + a + b + c + d);
				}
			}

			var simulateFun = new SimulateFun();
			function example3(a, b, c, d) {
				simulateFun.print.call(this, a, b, c, d);
				simulateFun.print.apply(this, arguments);
				simulateFun.print.apply(this, [a, b, c, d]);
			}

			example3("参数1", "参数2", "参数3", "参数4");

			/* -----------------------------------------------------------------*/
			function ContentSimulate() {
				this.example4 = function example4(a, b, c, d) {
					simulateFun.print.call(this, a, b, c, d);
					simulateFun.print.apply(this, arguments);
					simulateFun.print.apply(this, [a, b, c, d]);
				}
				this.example5 = function example5(a, b, c, d) {
					print.call(this, a, b, c, d);
					print.apply(this, arguments);
					print.apply(this, [a, b, c, d]);
				}
			}

			var contentSimulate = new ContentSimulate();
			//这里的上下文变成了ContentSimulate对象
			contentSimulate.example4("参数1", "参数2", "参数3", "参数4");
			//这里的上下文变成了ContentSimulate对象
			contentSimulate.example5("参数1", "参数2", "参数3", "参数4");
 
分享到:
评论

相关推荐

    js中call与apply的用法小结

    在JavaScript中,`call` 和 `apply` 是两种非常重要的函数调用方式,它们都用于改变函数执行时的上下文,即`this`的指向。本文将深入探讨这两种方法的用法及其在实际编程中的应用。 ### 1. `call` 的基本用法 `...

    Javascript中call,apply,bind方法的详解与总结

    本文针对JavaScript中三个重要的函数方法——call、apply和bind,进行详尽的分析,并在文章的结尾部分对这三个方法之间的联系和区别进行了概括,以便于读者更深入地理解它们的用途和应用场景。 首先,我们来探讨...

    跟我学习javascript的call(),apply(),bind()与回调

    本文将详细解释JavaScript中call(), apply(), 和 bind() 方法的作用、语法以及使用场景,并且会探讨回调函数的使用,帮助理解这些概念在实际编程中的应用。 首先,我们来探讨call() 和 apply() 方法。这两个方法都...

    Javascript - 全面理解 caller,callee,call,apply (转载)

    这篇文章将深入探讨四个关键概念:caller、callee、call和apply,它们都是JavaScript函数操作的核心部分,对于理解和使用高级JavaScript编程至关重要。 首先,我们来了解`caller`和`callee`。在JavaScript的函数...

    Javascript中call与apply的学习笔记

    JavaScript中的`call`和`apply`是两种非常重要的函数调用方式,它们允许开发者改变函数内部`this`的指向,并且能以不同的形式传递参数。本文主要探讨这两个方法的使用和区别。 首先,`call()`方法的基本用法是`fun....

    javascript中apply、call和bind的用法区分_.docx

    ### JavaScript中apply、call和bind的用法区分 在JavaScript编程中,`apply`、`call`和`bind`这三个方法被广泛用于改变函数内部`this`的指向,这对于理解和编写复杂的JavaScript代码至关重要。虽然它们的功能相似,...

    js代码-JavaScript的call/apply/bind函数实现

    在JavaScript中,`call()`, `apply()`, 和 `bind()` 是三个非常重要的函数,它们都与函数调用有关,但各自有不同的应用场景。本文将深入探讨这三个函数的实现原理及其使用方式。 首先,`call()` 函数允许我们调用一...

    javascript call和apply方法

    在JavaScript中,`call`和`apply`是两种非常重要的函数调用方式,它们都用于改变函数执行时的上下文,即`this`的指向。`this`在JavaScript中是一个非常关键的概念,它通常指代函数执行时所在的对象。下面我们将深入...

    javascript中call()、apply()的区别

    在JavaScript中,call() 和 apply() 是两个非常重要的方法,它们都属于 Function 对象的方法,用于改变函数体内this的指向,并且可以间接调用函数。虽然它们的基本作用类似,但是它们在参数传递方式上存在明显的区别...

    JavaScript中的this,call,apply使用及区别详解

    在深入探讨JavaScript中this关键字、call和apply方法之前,先来简单回顾一下JavaScript的基本特性。JavaScript是一种基于原型的脚本语言,它运行在浏览器和服务器环境中,常用于开发网页和Web应用程序。其中,this...

    javascript中apply、call和bind的使用区别

    在JavaScript中,`apply()`, `call()`, 和 `bind()` 都是用来操作函数的上下文,即改变函数内部 `this` 指向的方法。它们有三个共同点:第一,它们都能改变函数执行时的 `this` 值;第二,第一个参数都是指定的新 `...

    深入理解关于javascript中apply()和call()方法的区别

    JavaScript中的`apply()`和`call()`方法是函数调用的重要组成部分,它们允许我们改变函数执行时的上下文(即`this`的指向)以及灵活地传递参数。在这篇文章中,我们将深入探讨这两个方法的区别以及它们如何工作。 ...

    JavaScript学习点滴 call、apply的区别

    在JavaScript编程中,call和apply是两个非常重要的方法,它们都用于函数调用上下文的改变。这两个方法的主要用途是可以在特定的作用域中调用函数,允许传递给函数的参数,同时也可以通过它们实现继承和多态等面向...

    JavaScript中apply与call的用法意义及区别说明

    在JavaScript编程中,apply和call是两个非常重要的方法,它们被广泛用于改变函数的上下文环境,也就是改变函数的this指向。这在JavaScript面向对象编程中尤为常见,因为可以利用apply和call来借用其他对象的方法。接...

    apply应用小结

    在JavaScript中,每个函数都有`call()`和`apply()`这两个方法,它们都可以改变函数执行时的上下文,并传入参数。`apply()`的独特之处在于,它可以接受一个数组或类数组对象作为参数,将数组中的元素作为单独的参数...

    【JavaScript语言精粹系列】apply的用法

    本文将深入探讨`apply`的用法及其在实际编程中的应用。 `apply`方法允许我们调用一个函数,并指定一个特定的对象作为其`this`值,同时可以传递一个数组或类数组对象作为参数。它的基本语法如下: ```javascript ...

    JS中call和apply函数用法实例分析

    在JavaScript中,`call` 和 `apply` 是两种非常重要的函数调用方式,它们都用于改变函数执行时的上下文(即 `this` 指向),并允许你在不同的对象上使用同一个函数,实现了对象间的继承。下面我们将深入探讨这两个...

    浅谈JavaScript中的apply/call/bind和this的使用

    apply/call/bind三者的联系就在于,都可以用来改变函数中 this 指向的值,且第一个参数为要指向的 this 的值,apply的第二个参数(或 bind 与 call 的不定参数)为要传入的参数。这就不得不提及 javascript 中函数的...

Global site tag (gtag.js) - Google Analytics