原生js中call、apply、bind的区别和相同点
结论:
相同点:
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的区别和相同点的更多相关文章
- js 中call,apply,bind的区别
call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...
- JS中call,apply,bind的区别
1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...
- 原生js中slice()方法和splice()区别
slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...
- 原生JS实现call,apply,bind函数
1. 前言 使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数 ...
- JS中call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- JS 中的require 和 import 区别整理
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
随机推荐
- jQuery 文档操作 - remove() 方法
移除所有 <p> 元素: 定义和用法 remove() 方法移除被选元素,包括所有文本和子节点. 该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素. ...
- 命名实体识别视频51cto
https://edu.51cto.com/center/course/lesson/index?id=402918 https://edu.51cto.com/course/18466.html
- Json介绍与Ajax技术
AJAX AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...
- [转]java常用正则表达式
只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$". 只能输入至少n位的数字:"^\d{n,}$". 只能输 ...
- jstack简介
jstack:Java进程中线程的堆栈信息跟踪工具 功能简介 jstack常用来打印Java进程/core文件/远程调试端口的Java线程堆栈跟踪信息,包含当前虚拟机中所有线程正在执行的方法堆栈信息的 ...
- (超级详细版)利用ThinkPHP3.2.3+PHPExcel实现将表格数据导入到数据库
请先阅读以下步骤再到结尾下载源码 第一步:下载 thinkphp_3.2.3 和 PHPExcel_1.8.0 并解压 对应的网站分别为: http://www.thinkphp.cn/down.ht ...
- 1626 - Brackets sequence——[动态规划]
Let us define a regular brackets sequence in the following way: Empty sequence is a regular sequence ...
- UVa 10603 Fill [暴力枚举、路径搜索]
10603 Fill There are three jugs with a volume of a, b and c liters. (a, b, and c are positive intege ...
- linux 使用 /proc 文件系统
/proc 文件系统是一个特殊的软件创建的文件系统, 内核用来输出消息到外界. /proc 下 的每个文件都绑到一个内核函数上, 当文件被读的时候即时产生文件内容. 我们已经见到 一些这样的文件起作用 ...
- 解决浏览器中点击input输入框时,placeholder的值不消失的方法
版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lianwenxiu/article/det ...