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 的用法做个小例子,其他更深入的应用要
靠大家慢慢去领会了。
欢迎大家多多 拍砖!