`

理解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>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics