js中apply与call使用详解(附代码)

这次给大家带来js中apply与call使用详解(附代码),js中apply与call使用的注意事项有哪些,下面就是实战案例,一起来看一下。

你可以直接看例子,也可以先读一下介绍:

call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.
从上面可以得出 call, apply 是给方法使用的,为了改变调用该方法的 this指针

简单例子:

call

function A() {  this.getName = function (xx) {    return xx;  }}function B() {}var a = new A();console.log( a.getName('i am A') ); //i am Avar b = new B() ;console.log( a.getName.call(b,'i am B') ); // i am B

登录后复制

B 函数中没有 任何方法 , A 函数有个 getName() 方法 ,a.getName() 自然成立 ,但 B 也要使用 getName() 的方法怎么办呢 ? 那就用 call(this,’参数’) !!

可以 再理解一下这句话 — 我们可以借助call或apply调用其它对象的方法来操作,call和apply是为了动态改变this而出现的 ,本来 a.getName() 的 this 指向 a, call 动态的 把 this 指向了 b ,变成了 b.getName()

apply

apply 与 call 只是参数的使用不同而已

function A() {  this.sun = function (a ,b) {    return a+b;  }}function B() {}var a = new A();console.log( a.sun(1,2) ); //3var b = new B() ;console.log( a.sun.call(b,2,2) ); // 4console.log( a.sun.apply(b,[3, 3]) ); //6

登录后复制

call和apply一般使用情况

用的比较多的,通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

登录后复制

这样domNodes就可以应用Array下的所有方法了。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Angular 4中显示CSS样式

vue组件怎么实现猜数字功能

以上就是js中apply与call使用详解(附代码)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772065.html

(0)
上一篇 2025年3月8日 13:09:18
下一篇 2025年3月8日 13:09:27

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js实现数字变化

    这次给大家带来js实现数字变化,js实现数字变化的注意事项有哪些,下面就是实战案例,一起来看一下。 $.fn.countTo = function (options) { options = options || {};//当options…

    编程技术 2025年3月8日
    200
  • js封装操作class步奏详解

    这次给大家带来js封装操作class步奏详解,js封装操作class的注意事项有哪些,下面就是实战案例,一起来看一下。 一、添加class function addClass(ele,cName) { var arr = ele.class…

    编程技术 2025年3月8日
    200
  • 怎么操作Node.js发送邮件

    这次给大家带来怎么操作Node.js发送邮件,操作Node.js发送邮件的注意事项有哪些,下面就是实战案例,一起来看一下。 var nodemailer = require(“nodemailer”);var mailTitle=’http…

    编程技术 2025年3月8日
    200
  • Two.js做出物体环绕动画

    这次给大家带来Two.js做出物体环绕动画,Two.js做出物体环绕动画的注意事项有哪些,下面就是实战案例,一起来看一下。 Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas…

    编程技术 2025年3月8日
    200
  • two.js怎样实现动画功能

    这次给大家带来two.js怎样实现动画功能,two.js实现动画功能的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:S…

    编程技术 2025年3月8日
    200
  • JS实现图片放大镜效果使用案例

    这次给大家带来JS实现图片放大镜效果使用案例,JS实现图片放大镜效果的注意事项有哪些,下面就是实战案例,一起来看一下。 前  言   我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜…

    编程技术 2025年3月8日
    200
  • js如何使用定时器实现倒计时功能

    这次给大家带来js如何使用定时器实现倒计时功能,js使用定时器实现倒计时功能的注意事项有哪些,下面就是实战案例,一起来看一下。 日期函数 倒计时 =  用 将来的时间  –   现在的时间  问题:将来时间 距离 1970 毫秒…

    编程技术 2025年3月8日
    200
  • Vuejs怎样实现购物车功能

    这次给大家带来Vuejs怎样实现购物车功能,Vuejs实现购物车功能的注意事项有哪些,下面就是实战案例,一起来看一下。 开始更新前端框架Vue.JS的相关博客。 功能概述 学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识…

    编程技术 2025年3月8日
    200
  • JS实现音乐切换播放以及轮流播放

    这次给大家带来JS实现音乐切换播放以及轮流播放,JS实现音乐切换播放以及轮流播放的注意事项有哪些,下面就是实战案例,一起来看一下。 welcome .content { width: 600px; margin:0 auto; border…

    编程技术 2025年3月8日
    200
  • JS实现三级级联

    这次给大家带来JS实现三级级联,JS实现三级级联的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了js实现三级级联特效的具体代码,供大家参考,具体内容如下     //二维数组存放市的信息 var shi =[[“丽水…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论