结论:

相同点:

1、都是js原生方法,改变函数中的this指向

2、都可以传递参数,第一个参数为 把this指向到哪里去,即目标元素

不同点:

1、call和apply都是主动触发,绑定后自动执行,bind为手动绑定,不自动执行。

2、call和apply在传递参数的方式上有所不同,call为直接传参,apply的参数需要放在数组中

代码:

<script type="text/javascript">
var person = {name:'小明'}
person.say = function(){
console.log(this.name+'给范冰打了一晚上电话')
} person.say(); var person2 = {name:'阿华'}
person.say.call(person2) //把this指向改为person2,且主动执行了say方法,apply方法用法一样 </script>

传参时:

<script type="text/javascript">
var person = {name:'小明'}
person.say = function(tar,time){
console.log(this.name+'给'+tar+'打了'+time+'电话')
} person.say('特朗普','1小时'); var penson2 = {name:'阿华'}
person.say.call(penson2,'奥巴马','2小时') //call传递参数时,直接传参
//person.say.apply(penson2,['奥巴马','2小时']) //apply传递参数时,用数组传参 </script>

bind用法:

<script type="text/javascript">
var person = {name:'小明'}
person.say = function(tar,time){
setTimeout(function(){
console.log(this.name)
}.bind(person), 1000) //手动在函数后面绑定this指向,1秒后打印小明
}
person.say()
</script>

如此,打完收工!

原生js中call、apply、bind的区别和相同点的更多相关文章

  1. js 中call,apply,bind的区别

    call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...

  2. JS中call,apply,bind的区别

    1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...

  3. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  4. 原生JS实现call,apply,bind函数

    1. 前言 使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数 ...

  5. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  6. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  7. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  8. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  9. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  10. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

随机推荐

  1. Python--day72--Django内置的serializers序列化介绍

    序列化 Django内置的serializers def books_json(request): book_list = models.Book.objects.all()[0:10] from d ...

  2. 2019-7-29-PowerShell-拿到显卡信息

    title author date CreateTime categories PowerShell 拿到显卡信息 lindexi 2019-7-29 10:3:35 +0800 2019-02-21 ...

  3. Laravel Form-builder使用

    添加formbuilder插件: Composer应用 composer require kris/laravel-form-builder 下载成功 修改配置文件 在config/app.php ‘ ...

  4. Java语言中使用OpenMP

    从去年年中,开始学习Java,主要是维护公司用Java编写的服务器软件.目前,该服务器软件遇到一个问题,在下载大文件时,如果同时下载的用户很多, 服务器软件工作会出现异常,有的用户无法下载.服务器硬件 ...

  5. dotnet core 输出调试信息到 DebugView 软件

    本文告诉大家如何在 dotnet core 输出调试信息到 DebugView 软件 在之前告诉小伙伴,如何在 WPF 输出调试信息到 DebugView 软件,请看文章 WPF 调试 获得追踪输出 ...

  6. asp.net core 3.0 JObject The collection type 'Newtonsoft.Json.Linq.JObject' is not supported

    在asp.net core 3.0 中,如果直接在Controller中返回 Jobject 类型,会抛出如下错误: The collection type 'Newtonsoft.Json.Linq ...

  7. HDU1166 敌兵布阵 BZOJ1012 最大数[树状数组]

    一.前置知识-树状数组 树状数组(binary indexed tree)是一种简洁的代码量很小的数据结构,能够高效的处理前缀区间上的问题.在很多情况下能写树状数组解决的就不用码半天线段树了. 树状数 ...

  8. filter 开发

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  9. POJ 2976 Dropping tests [二分]

    1.题意:同poj3111,给出一组N个有价值a,重量b的物品,问去除K个之后,剩下的物品的平均值最大能取到多少? 2.分析:二分平均值,注意是去除K个,也就是选取N-K个 3.代码: # inclu ...

  10. 第二阶段:4.产品功能需求文档PRD:7.案例总结

     Dev就是一些开发 这就是一个评价表格 每次沟通都要记得记录以及总结反思