`

理解JS call apply

阅读更多
call([thisObj[,arg1[, arg2[, [,.argN]]]]])

有两种使用call的方式,
第一:obj1.method1.call(obj2,argument1,argument2) //参数1,参数2是作为obj1的参数的
这里的call的作用就是把obj1的方法method放到obj2上,然后执行这个方法,后面的argument1..这些做为参数传入。

或者理解为obj2调用了obj1的方法,并把obj2自己的同名方法覆盖掉。
比如
function Class1() 
{ 
    this.name = "class1"; 

    this.showNam = function() 
    { 
        alert(this.name); 
    } 
} 

function Class2() 
{ 
    this.name = "class2"; 
} 

var c1 = new Class1(); 
var c2 = new Class2(); 

c1.showNam.call(c2); 
弹出class2

第二种方式:
Class1.call(Class2) ,意思就是使用 Class1 对象代替Class2对象中已经定义的同名属性,
(注意这里的Class1,Class2并不是类,而是JS中的函数,当然JS中的函数我们也可以称其为对象)注意,这里是会用Class1中的属性和方法去覆盖Class2中已经出现的同名属性,如果这个属性或是方法在call方法之后出现,那么也会替代刚刚Class1中的属性和方法(可以理解为Class1中的方法和属性的优先级高于Class2中的方法和属性,这样即使Class2的方法和属性后出现,那么也不会覆盖掉Class1中的方法和属性)。比如


<script>
function Class1() 
{ 	var test = "yellow";
    this.showTxt = function(txt) 
    { 
        alert(test); 
    } 
} 

function Class2() 
{ 
	
    Class1.call(this); 
	
	 this.showTxt = function() 
    { 	
        alert("test"); 
    } 
	
} 

var c2 = new Class2(); 

c2.showTxt("cc"); 

</script>
这里就是输出test

这个第二种方式就是JS中继承的一种方式
Class1.call(Class2) Class2就继承了Class1.
但是这种继承是否就跟prototype 一样呢?
答案是否定的
来看一个http://cxy020.iteye.com/blog/1027254中的例子

<script>
function ClassA(c) {
	this.color = c;
}
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function ClassB(c, n) {
	ClassA.call(this, c);
	this.name = n;
}

var objB = new ClassB("red", "cxy");
objB.sayColor();	//运行报错 不存在这个方法
</script>

这里说明什么?就是他并没有继承A的prototype属性,B之所以没有继承A的prototype属性是由于A类并没有创建一个实例。一个类的prototype对象的属性必须需要实例化后才能拥有。

如果我们要是B继承A的prototype属性 ,只要ClassB.prototype = new ClassA();就可以了

如下:
<script>
function ClassA(c) {
	this.color = c;
}
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function ClassB(c, n) {
	ClassA.call(this, c);
	this.name = n;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
	alert(this.name);
};

var objA = new ClassA("blue");
var objB = new ClassB("red", "cxy");
objA.sayColor();	//输出 "blue"
objB.sayColor();	//输出 "red"
objB.sayName();	//输出 "cxy"

</script>
分享到:
评论

相关推荐

    理解JavaScript的caller callee call apply

    ### 理解JavaScript中的`caller`, `callee`, `call`, `apply` #### Arguments对象:JavaScript函数调用的参数管理器 在JavaScript中,每个函数都有一个隐含参数`arguments`,它允许开发者访问传递给函数的所有参数...

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

    在JavaScript中,`call`和`apply`是两个非常重要的方法,它们都用于改变函数调用时的上下文(即`this`的值),并且可以灵活地传递参数。本篇文章将深入探讨这两个方法的用法、区别以及实际应用场景。 `call`方法...

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

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

    js中call与apply的用法小结

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

    Js的call与apply1

    JavaScript中的`call`和`apply`是两种非常关键的方法,它们允许我们改变函数内部`this`的指向,同时也为实现模拟继承提供了可能。虽然JavaScript不直接支持类继承,但通过`call`和`apply`,我们可以实现类似的效果。...

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

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

    Javascript - 全面理解 caller,callee,call,apply

    在JavaScript的世界里,caller、callee、call和apply是四个非常重要的概念,它们涉及到函数的调用方式和执行上下文。这些知识点对于深入理解和优化代码至关重要,尤其在处理高阶函数和面向对象编程时。 首先,让...

    深化理解关于javascript中apply()和call()方法的区分_.docx

    在JavaScript中,`apply()`和`call()`方法都是用于改变函数调用时的上下文(即`this`关键字指向的对象)以及传递参数。这两个方法都隶属于`Function.prototype`,因此所有函数实例都拥有这两个方法。它们的主要作用...

    详解JavaScript函数callee、call、apply的区别

    JavaScript中的`callee`、`call`和`apply`都是与函数有关的重要概念,它们提供了不同的方式来处理函数调用和上下文。以下是这三个特性的详细解释: **arguments.callee** `arguments.callee`是一个在函数内部可以...

    详解js中call与apply关键字的作用.docx

    总结来说,`call`和`apply`是JavaScript中非常重要的工具,它们允许开发者灵活地控制函数的执行环境和参数传递,对于理解和编写复杂的JavaScript代码至关重要。这两个方法在处理事件处理程序、对象方法的共享和继承...

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

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

    JS中的call、apply、bind方法详解.pdf

    JS中的call、apply、bind方法详解 随着JavaScript的发展,函数调用对象的改变变得越来越重要。在JavaScript中,call、apply、bind三个方法都是函数对象的方法,它们的作用都是改变函数的调用对象。下面,我们将详细...

    js中call与apply的用法小结.docx

    在JavaScript中,`call`和`apply`是两个非常重要的函数,它们都允许开发者改变函数执行时的上下文,即`this`的指向。这两个方法主要用于实现函数的绑定和继承,以及处理数组或类数组对象。 首先,我们来看`call`的...

    javascript中call和apply方法浅谈

    在JavaScript中,`call`和`apply`是两种非常重要的函数调用方式,它们都用于改变函数内部`this`的指向,实现函数的...在实际开发中,理解和熟练掌握`call`和`apply`方法对于编写高效、灵活的JavaScript代码至关重要。

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

    在JavaScript编程中,`apply`、`call`和`bind`这三个方法被广泛用于改变函数内部`this`的指向,这对于理解和编写复杂的JavaScript代码至关重要。虽然它们的功能相似,但在具体用法上存在一定的差异。 #### 相同之处...

    开启Javascript中apply、call、bind的用法之旅模式

    以下详细解释了apply、call以及bind的用法,并通过实例加深理解。 1. apply()和call()方法 apply()和call()方法都用于指定函数体内this的值。通过这两个方法,我们可以在调用函数时,动态地改变函数内部的this指向...

    javascript技术难点(三)之this、new、apply和call详解

    JavaScript中的this、new、apply和call是理解JavaScript面向对象编程的关键知识点。首先,我们要知道,this关键字在JavaScript中表示当前上下文的对象,但它并不像Java中的this那样始终指向同一个对象。JavaScript的...

    js中apply和call的理解与使用方法

    JavaScript中的apply和call方法是函数对象上的两个重要方法,它们都用于显式设置函数体内this的值。虽然这两个方法在功能上非常相似,但它们在使用参数上存在明显的区别。本文将详细介绍apply和call的区别、用法以及...

    javascript中call apply 的应用场景

    JavaScript中的`call`和`apply`是两种非常重要的函数调用方式,它们的主要作用是改变函数执行时的上下文(即`this`的指向),从而解决特定的问题并提供灵活的编程模式。理解这两个方法对于深入JavaScript编程至关...

    从JQuery源码分析JavaScript函数的apply方法与call方法

    从JQuery源码中分析apply和call方法,有助于我们理解这些方法在实际JavaScript库中的应用,并且加深对其工作原理的理解。 首先,我们需要明确JavaScript中的函数实际上是一个对象,其拥有自己的方法,比如apply和...

Global site tag (gtag.js) - Google Analytics