Javascript中的call()方法介绍

 这篇文章主要介绍了Javascript中的call()方法介绍,本文讲解了Call() 语法、Call() 参数、Javascript中的call()方法、Call()方法的实例等内容,需要的朋友可以参考下

 
 

在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-12-28 19:11:28

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

JavaScript中的异常处理方法介绍

 这篇文章主要介绍了详解JavaScript中的异常处理方法,包括基本的try...catch语句和throw语句的使用,需要的朋友可以参考下     有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误: 语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: ? 1 2 3 4 5 <script type="text/javascript"> &

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

在Mozilla的官网中对于call()的介绍是: 复制代码 代码如下: call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. Call() 语法 复制代码 代码如下: fun.call(thisArg[, arg1[, arg2[, ...]]]) Call() 参数 thisArg 复制代码 代码如下: 在fun函数运行时指定的this值.需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nul

JavaScript中的every()方法介绍

  JavaScript 数组中的每个方法测试数组中的所有元素是否经过所提供的函数来实现测试. 语法 ? 1 array.every(callback[, thisObject]); 下面是参数的详细信息: callback : 函数用来测试每个元素 thisObject : 对象作为该执行回调时使用 返回值: 返回true,如果此数组中的每个元素满足所提供的测试函数. 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要

JavaScript中的fontsize()方法使用介绍

  这篇文章主要介绍了JavaScript中的fontsize()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法会导致就好像它是在一个标记的字符串显示在规定的大小 语法 ? 1 string.fontsize( size ) 下面是参数的详细信息: color: 1和7之间的整数,代表1和7之间的有符号整数的字符串 返回值: 返回字符串标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <ti

JavaScript中的italics()方法的使用介绍

  这篇文章主要介绍了JavaScript中的italics()方法使用,是JS入门学习中的基础知识,需要的朋友可以参考下 这种方法会导致一个字符串是斜体,就好像它是在标签 语法 ? 1 string.italics( ) 下面是参数的详细信息: NA 返回值: 返回字符串带有标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>JavaScript String italics() Method&

JavaScript中的sub()方法的使用介绍

  这篇文章主要介绍了JavaScript中的sub()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下 这种方法会导致字符串显示为下标,就好像它是在标记. 语法 ? 1 string.sub( ) 下面是参数的详细信息: NA 返回值: 返回字符串标记 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> <title>JavaScript String sub() Method</title> &

JavaScript中的anchor()方法使用详解

  这篇文章主要介绍了JavaScript中的anchor()方法使用,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法创建一个用作超文本目标的HTML锚. 语法 ? 1 string.anchor( anchorname ) 下面是参数的详细信息: anchorname: 定义了锚的名称 返回值: 返回其锚标记的字符串 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>JavaScript

JavaScript中Math对象方法使用概述

 JavaScript中Math对象方法如向上取整,有小数就整数部分加1,四舍五入.向下取整等等,下面为大家详细介绍下 1.丢弃小数部分,保留整数部分 parseInt(5/2)   2.向上取整,有小数就整数部分加1   Math.ceil(5/2)   3,四舍五入.   Math.round(5/2)   4,向下取整   Math.floor(5/2)   Math 对象的方法 FF: Firefox, N: Netscape, IE: Internet Explorer   方法 描述

JavaScript中的pow()方法使用

  这篇文章主要介绍了JavaScript中的pow()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 该方法返回底数的指数幂,即, baseexponent. 语法 ? 1 Math.pow(base, exponent ) ; 下面是参数的详细信息: base : 底数 exponents : 该底数的指数 返回值: 返回到底数的指数幂,即,底数指数. 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <h