Javascript中call的两种用法实例

用法一（常见用法）：

表现形式为：一个对象.方法.call(另一个对象)，意义是用另一个对象代替当前对象，执行当前对象的方法。先看示例：

代码如下:

function Class1(){
    this.name = "class1";
    this.showName = function(){
        alert(this.name);
    }
}
function Class2(){
    this.name = "class2";
}
var c1 = new Class1();
var c2 = new Class2();

c1.showName.call(c2);
c2.showName();        //不能执行

我们先分别定义了两个function，分别是Class1和Class2，它们的主要区别是Class2比Class1多了一个showName()方法。接着定义了与Class1、Class2对应的对象c1和c2，这时候我们清醒的知道，c1有showName()方法而c2没有。但是奇迹出现了，当我们执行 c1.shoName.call(c2) 时，会弹出c2的name值，即"class2"。其实，我们执行的任然是c1的方法，只不过临时起意地把对象c2偷换成对象c1，执行完毕后，它们任然是定义时的样子，c2并没有因此多了些什么方法。为了检测c2有没有多了方法，示例加了行 c2.showNmae(); 它是不能被执行的，浏览器会报出 Object #<Class2> has no method 'showName' 的错误。

为什么要这么做？前面说了，这是一种临时起意的使用方法，我们就是利用其高效的编程而已。但这并不是没有限制的，假设用c1和c2表示被替换的对象和替换对象，用fun1表示c1固有的方法。1、当fun1不需要参数，且不用到父函数中的任意局部变量时，其实c1.fun1.call(c2) 和 c1.fun1() 没什么区别；2、当fun1不需要参数但是用到父函数中的变量，那么就要求生成c1和c2的function有相同名称的那些个被fun1使用的变量；3、当fun1需要参数时，形式要改写成c1.fun1.call(c2, 参数1, 参数2, ...参数n)，这个时候生成c1的function中的变量名就不必和生成c2的function的变量名同名了，只需对应即可。其实，我们在用到call的这种用法时，c2和c1往往在结构和功能上已经有很大的相似性了，所以上述三点很容易避免。

用法二：

在function的定义过程中使用，表现形式：另一个已存在函数.call(this)，它可以将另一个已存在函数的变量、方法统统克隆到自己的函数中，实现一种类似于继承的功能。看个例子：

代码如下:

function Animal(name){
    this.name = name;
    this.showName = function(){
        alert(this.name);
    }
};

var animal = new Animal("small_animal");
animal.showName();    //alert("small_animal")

function Cat(name){
    Animal.call(this, name);
};

//var Animal = null;    //取消注释试一试

var cat = new Cat("black_cat");
cat.showName();     //alert("black_cat")

赞 (0)

相关推荐

  • Javascript中call的两种用法实例

    用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: 复制代码 代码如下: function Class1(){    this.name = "class1";    this.showName = function(){        alert(this.name);    }}function Class2(){    this.name = "class2";}var c1

  • vue3.0中setup的两种用法实例

    目录 前言 一.setup函数的特性以及作用 二.setup函数的注意点: 用法1:结合ref使用 用法2:代码分割 总结 前言 这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 什么是setup setup是vue3新增的生命周期函数,setup的加入就是为了让vue3使用组合式API(Composition API).使用组合式API更符合大型项目的开发,通过setup可以将该部分抽离成函数,

  • jQuery中after的两种用法实例

    法一:在每个p元素后插入内容: 复制代码 代码如下: $("button").click(function(){      $("p").after("<p>Hello world!</p>");}); 法二: 复制代码 代码如下: $("button").click(function(){    $("p").after(function(n){            return

  • javascript中createElement的两种创建方式

    本文实例讲述了javascript中createElement的两种创建方式.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CreateElement

  • JavaScript中boolean类型之三种情景实例代码

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • VUE中filters过滤器的两种用法实例

    VUE中filters过滤器的两种用法实例

    目录 前言 一.全局过滤器 全局过滤器之单一挂载 全局过滤器之批量挂载 二.组件过滤器 附:过滤器中传入多个参数 总结 前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示. <!-- 在双花括号中 --> <div>{{ message | capitaliz

  • javascript中innerText和innerHTML属性用法实例分析

    本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • JavaScript中字符串分割函数split用法实例

    本文实例讲述了JavaScript中字符串分割函数split用法.分享给大家供大家参考.具体如下: 先来看下面这段代码: <script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("&q

  • javascript中2个感叹号的用法实例详解

    在javascript代码中经常会见到!!的情况,本文即以实例形式较为深入的分析javascript中2个感叹号的用法.分享给大家供大家参考之用.具体分析如下: javascript中的!!是逻辑"非非",即是在逻辑"非"的基础上再"非"一次.通过!或!!可以将很多类型转换成bool类型,再做其它判断. 一.应用场景:判断一个对象是否存在 假设有这样一个json对象: { color: "#E3E3E3", "fon

  • javascript中call,apply,callee,caller用法实例分析

    本文实例讲述了javascript中call,apply,callee,caller用法.分享给大家供大家参考,具体如下: 实践一:call,apply 用来让一个对象去调用本不属于自己的方法,两者都可以传递参数,call的参数是列表形式,apply的参数是数组形式 var person = { "name":"Tom", "say":function(){ console.log("person say"); }, &quo

随机推荐