理解Javascript的call、apply

 更新时间:2015年12月16日 17:02:45   作者:吴统威  
这篇文章主要介绍了Javascript的call、apply,其作用基本相同,但也有略微的区别,需要的朋友可以参考下

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

注意:该函数的语法与 apply() 方法的语法几乎完全相同,唯一的区别在于,apply()方法接受的是一个参数数组,而 call()方法接受的是一系列参数列表。

了解完这两个方法的概念后,我们来一步一步理解他们的应用.

改变方法内this的指向
我们先来看下面这个例子

var name = "编程的人";
var age = 1;
var person = {
name:"公众号:bianchengderen",
age:20
}
function say(){
console.log("我叫:"+this.name+",年龄:"+this.age)
}
say();// 我叫: 编程的人,年龄: 1
say.call(person);//年龄:20

这两种调用执行的方式不一样,他们的结果也不一样,不一样在于say方法里面的this指向了不同的对象,第一次执行指向的是window,而我们以call方式执行,将say方法里面的this指向了person对象.
这是不是有点冒充别人的感觉.那我们这样有什么作用了?当然自己可以多多想想,到底能做什么! 我们继续往下面走.

实现继承机制
继承,这是高级面向对象的一种特性,用call我们可以将JAVASCRIPT有这种特点.
在看下面这个例子之前,必须好好理解上面的例子.

function Person(){
this.name = "编程的人";
this.age = 20;
}
function Student(){
Person.call(this);
this.school = "地球";
}
var student = new Student();
//下面打印出来: 编程的人,20,地球
console.log(student.name,student.age,student.school);

在这个例子里,Student函数继承了Person的name和age属性,就是通过Person.call(this)来实现,理解上面的例子后,应该是不难理解的.所以Student即拥有了Person的特点,又有自己的个性,比如这个this.school.

在这里,我们没有涉及到加入参数的传递,是方便大家的理解,需要加入参数传递,大家可以敲代码试一试,看看效果怎么样!

我们就先讲这两个例子吧,之后再进行深入学习。

相关文章

  • 详解JavaScript中任意两数加减的解决方案

    详解JavaScript中任意两数加减的解决方案

    JavaScript中一些浮点数相加减会计算错误,本文将为大家具体介绍一下JavaScript中解决任意两数加减会出现错误的方案,需要的可以参考一下
    2022-02-02
  • 浅谈JS如何写出漂亮的条件表达式

    浅谈JS如何写出漂亮的条件表达式

    条件表达式,是我们在coding过程中永远躲不开的问题,也是我们骗代码行数最方便的东西,但作为一名程序员,我们也要追求自己的“信达雅”,下面就让我们看看以下几种常见的条件表达场景,如何写的漂亮!
    2021-05-05
  • javascript中闭包概念与用法深入理解

    javascript中闭包概念与用法深入理解

    这篇文章主要介绍了javascript中闭包概念与用法,结合实例形式深入分析了javascript中闭包的概念、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • IE6兼容透明背景图片及解决方案

    IE6兼容透明背景图片及解决方案

    这篇文章给大家介绍IE6兼容透明背景图片以及在IE6中的透明图片不是透明显示的解决方案,有需要的朋友可以参考下
    2015-08-08
  • 微信小程序webView嵌入H5的方法实例

    微信小程序webView嵌入H5的方法实例

    web-view是小程序提供的一个可以直连h5页面的组件,只要传递一个h5页面的地址,就可以在小程序里直接打开预览该h5页面,这篇文章主要给大家介绍了微信小程序webView嵌入H5的相关资料,需要的朋友可以参考下
    2021-07-07
  • Quasar Input:type=

    Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能

    这篇文章主要介绍了Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 详解JavaScript中Canvas的高级绘图和动画技术

    详解JavaScript中Canvas的高级绘图和动画技术

    JavaScript中的Canvas 是一个强大的 HTML5 元素,允许你通过编程方式创建图形、绘制图像和实现复杂的动画效果,在本文中,我们将深入探讨 JavaScript Canvas 的高级绘图和动画技术,并提供一个复杂的案例,以展示其潜力,需要的朋友可以参考下
    2023-10-10
  • JS实现判断数组是否包含某个元素示例

    JS实现判断数组是否包含某个元素示例

    这篇文章主要介绍了JS实现判断数组是否包含某个元素,涉及javascript属性操作与正则判断相关使用技巧,需要的朋友可以参考下
    2019-05-05
  • js单独获取一个checkbox看其是否被选中

    js单独获取一个checkbox看其是否被选中

    这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现,很简单,但很实用,需要的朋友可以参考下
    2014-09-09
  • JavaScript中六种面试常考继承方式总结

    JavaScript中六种面试常考继承方式总结

    js的几种继承方式在我们面试的时候经常会被问到,所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。本文为大家整理了JavaScript中面试常考的六种继承方式,需要的可以参考一下
    2023-02-02

最新评论