Javascript中的call()方法介绍_javascript技巧

在Mozilla的官网中对于call()的介绍是:

复制代码 代码如下:

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

Call() 语法

复制代码 代码如下:

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call() 参数

thisArg

复制代码 代码如下:

在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...

复制代码 代码如下:

指定的参数列表。

Javascript中的call()方法

先不关注上面那些复杂的解释,一步步地开始这个过程。

Call()方法的实例

于是写了另外一个Hello,World:

复制代码 代码如下:

function print(p1, p2) {
    console.log( p1 + ' ' + p2);
}
print("Hello", "World");
print.call(undefined, "Hello", "World");

两种方式有同样的输出结果,然而,相比之下call方法还传进了一个undefined。

接着,我们再来看另外一个例子。

复制代码 代码如下:

var obj=function(){};
function print(p1, p2) {
    console.log( p1 + ' ' + p2);
}

print.call(obj, "Hello", "World");

只是在这里,我们传进去的还是一个undefined,因为上一个例子中的undefined是因为需要传进一个参数。这里并没有真正体现call的用法,看看一个更好的例子。

复制代码 代码如下:

function print(name) {
    console.log( this.p1 + ' ' + this.p2);
}

var h={p1:"hello", p2:"world", print:print};
h.print("fd");

var h2={p1:"hello", p2:"world"};
print.call(h2, "nothing");

call就用就是借用别人的方法、对象来调用,就像调用自己的一样。在h.print,当将函数作为方法调用时,this将指向相关的对象。只是在这个例子中我们没有看明白,到底是h2调了print,还是print调用了h2。于是引用了Mozilla的例子

复制代码 代码如下:

function Product(name, price) {
    this.name = name;
    this.price = price;

    if (price < 0)
        throw RangeError('Cannot create product "' + name + '" with a negative price');
    return this;
}

function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
}
Food.prototype = new Product();

var cheese = new Food('feta', 5);
console.log(cheese);

在这里我们可以真正地看明白,到底是哪个对象调用了哪个方法。例子中,使用Food构造函数创建的对象实例都会拥有在Product构造函数中添加的 name 属性和 price 属性,但 category 属性是在各自的构造函数中定义的。

复制代码 代码如下:

function print(name) {
    console.log( this.p1 + ' ' + this.p2);
}

var h2= function(no){
    this.p1 = "hello";
    this.p2 = "world";
    print.call(this, "nothing");
};
h2();

这里的h2作为一个接收者来调用函数print。正如在Food例子中,在一个子构造函数中,你可以通过调用父构造函数的 call 方法来实现继承。

至于Call方法优点,在《Effective JavaScript》中有介绍。

1.使用call方法自定义接收者来调用函数。
2.使用call方法可以调用在给定的对象中不存在的方法。
3.使用call方法可以定义高阶函数允许使用者给回调函数指定接收者。

时间: 2024-11-01 22:49:30

Javascript中的call()方法介绍_javascript技巧的相关文章

javascript中一些util方法汇总_javascript技巧

javascript中一些util方法汇总 /***************原生对象工类方法****************/ /** * 判断非空 * @param obj * @returns {boolean} */ function isEmpty(obj) { if (obj == undefined || obj == null || new String(obj).trim() == '') { return true; } else { return false; } } /**

JavaScript中使用数组方法汇总_javascript技巧

定义数组 复制代码 代码如下: Var arryMap = {riskId:"<%=riskid%>",riskType:"<%=risktype%>"}; 或 复制代码 代码如下: Var arry =[]; 使用: var risk = arryMap.riskId; Arry.push({id:"1",name:"1"}); Arry.push({id:"2",name:&qu

JavaScript中的ArrayBuffer详细介绍_javascript技巧

相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个节点之间的流动情况,而现在要摸清楚音频

JavaScript中的数学运算介绍_javascript技巧

JavaScript中,数学运算可藉由两种操作来实现: 1.+.-.*./.%等操作符. 2.使用Math对象的计算函数.比如,用Math.pow(2,3)来计算2的3次方. 与Java不同,JavaScript中的数学运算不会抛出任何错误.计算结果的溢出.除以0.对负数进行开方这些操作都是合法的,其结果为JavaScript中的特殊值:正负Infinity(无限).正负0.NaN(非数): 1.正负Infinity.当计算结果比JavaScript所能表示的最大数(Number.MAX_VAL

JavaScript中的对象序列化介绍_javascript技巧

与Java语言一样,JavaScript中可以对对象进行序列化和反序列化,藉此对对象进行保存.ECMAScript 5标准中,JavaScript中的对象序列化是通过JSON.stringify()来实现的,而反序列化则通过JSON.parse()来实现: 复制代码 代码如下: var o = {x:1, y:29, z:42}; var s = JSON.stringify(o); console.log(s);//{"x":1,"y":29,"z&qu

JavaScript 中的replace方法说明_javascript技巧

第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符.   而str.replace(/\-/g,"!")则可以替换掉全部匹配的字符(g为全局标志).   replace()   The replace() method returns the string that results when you replace text matching its first a

JavaScript中的数组特性介绍_javascript技巧

与Java语言不同,JavaScript中的数组拥有三个特性:   1.无类型.数组的成员可以是任何类型,同一个数组也可以由很多不同类型的成员所组成. 2.长度可变.数组的长度是可以动态变化的,因此在JavaScript中不存在数组访问的越界问题. 3.不连续性.数组中成员的位置可以是连续的(0, 1, 2, 3-),也可以是不连续的.任何数组都有一个名为length的属性,在数组成员连续的情况下,length值与数组成员数目一致:当数组成员不连续时,length值要大于数组成员的数目.与连续的

javascript中Number的方法小结_javascript技巧

一.构造函数 Number(value) new Number(value) 二.Number属性 1.Number.MAX_VALUE 返回能表示的最大数字. 2.Number.MIN_VALUE 能表示的最小数字. 3.Number.NAN 非数字值. 4.Number.NEGATIVE_INFINITY 负无穷,当溢出时返回. 5.Number.POSITIVE_INFINITY 正无穷,当溢出时返回. 三.Number方法 1.toString() 使用指定进制,将一个数字转换为字符串.

Javascript中的Callback方法浅析_javascript技巧

什么是callback 复制代码 代码如下:  回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 这个解释看上去很复杂,于是找到了知乎上一个更好的解释 复制代码 代码如下:  你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你