js call跟apply

js call和apply
官方定义：调用一个对象的一个方法，以另一个对象替换当前对象。
我对js里面call和apply的理解是回调父类的方法，并将父类实例化到当前对象的prototype上。
其实对此一直都比较模糊，只能通过一些例子来加深一些理解。

var color = "red";function sayColor(p) {alert(p + this.color);};sayColor();//弹出undefinedred;var obj = new Object();obj.color = "blue";sayColor.call(obj, "color is ");//弹出color is blue//sayColor.apply(obj, ["color is "]);

/*
第一次 调用sayColor 里面的this 的上下文是window 所以this.color = red;
第二次 sayColor.call(obj, "color is ");obj是传过去的上下文，"color is "是参数(可传多个)
所以当执行sayColor的时候 this就是obj，this.color = blue;
*/

function ClassA(c) {         this.color = c;this.sayColor = function () {alert(this.color);};}function ClassB(c, n) {ClassA.apply(this, arguments);this.name = n;this.sayName = function () {alert(this.name);};}var objA = new ClassA("blue");var objB = new ClassB("red", "John");objA.sayColor();//输出 "blue"objB.sayColor();//输出 "red"objB.sayName();//输出 "John"

/*
以上的例子 我们可以知道
1.apply方法 改变 ClassA的 this 传过去的this==ClassB ; arguments == [c,n]
2.ClassB继承了 ClassA的sayColor方法
在这里就有一个疑问了 这样的继承是否就跟prototype 一样呢？
*/

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();//运行报错 不存在这个方法

/*
由此可见ClassB并没有完全继承ClassA。
有一种解释是 call/apply 是继承实例对象，而prototype是继承原型对象。
更通俗一些是 call/apply 是值类型的继承，而prototype是引用类型的继承。
*/

给一个完整的例子

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"

本文，作为抛砖引玉，只对 call和apply 的用法做个小例子，其他更深入的应用要
靠大家慢慢去领会了。

欢迎大家多多 拍砖！

查看更多 下一篇