js中的call()和apply()方法

最新推荐文章于 2025-09-08 17:59:21 发布

冷卡卡西

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量854

点赞数

分类专栏： JS 文章标签： function javascript books prototype object manager

JS 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了JavaScript中this关键字的使用方式及其如何通过call与apply方法改变指向。此外，还详细介绍了Function对象的prototype属性如何用于动态地为对象添加属性，并通过实例展示了如何利用prototype实现回调函数。

　　Javascript 中的function本身也是一个object,它本身就会有tostring()，call()，apply()几个附加方法。这个 function.call的意义就在于，当调用时它时，运行时会把它的第一个参数替换掉function的this指向。
　　call()和apply()是Function object 的两个方法, 它们也可以使一个function作为另一个对象的method来调用用. call()和apply()都需要参数, 而第一个参数就是调用对象, 也就是当function内部出现this时, this所指的对象. call()和apply()的区别在于call()可以传递任意长度参数, 只要第一个参数时调用对象. 而apply只接受两个参数, 需要将除调用对象外的所有参数放入一个数组中。例如：
//定义Book类
function Book(name, author, page) {
this.name = name;
this.author = author;
this.page = page;
this.getReader = Book_getReader;
}
//定义Book类获取读者的方法
function Book_getReader() {
//....
}

function getBooksWithSameAuthor(form, to) {
var name = this.author;
var books = ...
//get books written by name and from year "from" to year "to"
return books;
}

var abook = new Book("JavaScript is Cool", "tom", 514);
var books = getBooksWithSameAuthor.call(abook, 1990, 2005);
或
var books = getBooksWithSameAuthor.apply(abook, [1990, 2005]);

当一个function不作为一个对象的method时, JavaScript会认为它是属于一个Globle Object对象的method, 这个Globle Object在Browser中就是window类. 所以从这个角度来说, function和method又可以统一起来了.

Function object 还有一个非常重要的property: prototype. 它是一个predefined的prototype object. 当一个Function用作对象的constructor时, protptype property将发挥作用,中文翻译叫原型. JavaScript的新对象就是通过function的原型来建立的. 同时我们还可以利用prototype来动态的向对象中添加属性, 如:

function Book (name, author, page) {
this.name = name;
this.author = author;
this.page = page;
}
var abook = new Book("JavaScript is Cool", "tom", 514);

Book.prototype.getInfo = getInfo;
function getInfo() {
return this.name + " written by " + this.author + " with " + this.page + " pages";
}

alert(abook.getInfo());

这里有一个例子, 用prototype方法来实现callback:

Function.prototype.andThen=function(g) {
var f=this;
return function() {
f();g();
}
};

function Manager() {
this.callback=function () {}; // do nothing
this.registerCallback=function(callbackFunction) {
this.callback=(this.callback).andThen(callbackFunction);
}
}

var manager=new Manager();
manager.registerCallback(sayHi);
manager.registerCallback(sayBye);
manager.callback();