JavaScript中的call、apply、bind是怎么回事?
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。
在说区别之前还是先总结一下三者的相似之处:
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。
那么他们的区别在哪里的,先看一个例子。
- var xw = {
- name : "小王",
- gender : "男",
- age : 24,
- say : function() {
- alert(this.name + " , " + this.gender + " ,今年" + this.age);
- }
- }
- var xh = {
- name : "小红",
- gender : "女",
- age : 18
- }
- xw.say();
本身没什么好说的,显示的肯定是小王 , 男 , 今年24。
那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样:
- xw.say.call(xh);
对于apply可以这样:
- xw.say.apply(xh);
而对于bind来说需要这样:
- xw.say.bind(xh)();
如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
那么call和apply有什么区别呢?我们把例子稍微改写一下。
- var xw = {
- name : "小王",
- gender : "男",
- age : 24,
- say : function(school,grade) {
- alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
- }
- }
- var xh = {
- name : "小红",
- gender : "女",
- age : 18
- }
可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。
对于call来说是这样的
- xw.say.call(xh,"实验小学","六年级");
而对于apply来说是这样的
- xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);
看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
那么bind怎么传参呢?它可以像call那样传参。
xw.say.bind(xh,"实验小学","六年级")();
但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。
xw.say.bind(xh)("实验小学","六年级");
JavaScript中的call、apply、bind是怎么回事?的更多相关文章
- 深入浅出:了解JavaScript中的call,apply,bind的差别
在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变 ...
- javascript中的call(),apply(),bind()方法的区别
之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...
- 别真以为JavaScript中func.call/apply/bind是万能的!
自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去 ...
- Javascript中call,apply,bind的区别
一.探索call方法原理 Function.prototype.call = function(obj) { // 1.让fn中的this指向obj // eval(this.toString().r ...
- JavaScript学习(2)call&apply&bind&eval用法
javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...
- js中的call,apply,bind区别
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- JavaScript中call、apply个人理解
JavaScript中call.apply个人理解 一句话即通俗的说:call.apply 是为了改变this的状态而存在的 }; } function personInfo(name,age){ t ...
- 说说 JavaScript中 call和apply
下面有关JavaScript中 call和apply的描述,错误的是? call与apply都属于Function.prototype的一个方法,所以每个function实例都有call.apply属 ...
- Learning JavaScript with MDN (call, apply, bind)
Learning JavaScript with MDN (call, apply, bind) call, apply, bind Object.prototype.toString() 检测 js ...
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
随机推荐
- [转]DNS服务器原理详解与Centos6.x下搭建DNS服务器
转自:http://blog.it985.com/8958.html DNS 数据库的记录:正解,反解, Zone 的意义 通过DNS解析过程详解这篇文章,我们知道了要想访问www.zmit.cn,最 ...
- Winter-1-E Let the Balloon Rise 解题报告及测试数据
Time Limit:1000MS Memory Limit:32768KB Description Contest time again! How excited it is to see ...
- servlet中通过getWriter()获取out返回给浏览器出现中文乱码问题
感谢博主https://blog.csdn.net/louyongfeng3613/article/details/50160317 在Servlet编程中,经常需要通过response对象将一些信息 ...
- 【转】安装Vue.js的方法
安装vue.js的方法 一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...
- 使用svn的过程中check out的文件路径中的文件图标全都加上了“蓝色问号”的解决方案
(1)你在对同一层目录下创建一个记事本文件,然后把下面这句话复制进去 for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q &q ...
- 关于STM8S使用硬件SPI收发问题
源: 关于STM8S使用硬件SPI收发问题
- awk循环语句-【AWK学习之旅】
AWK中两种循环语句:if-else 和 while 控制流语句: 1.if-else 求总数,平均值: [root@monitor awkdir]# awk '$3>6 {n = n ...
- 20145302张薇《Java程序设计》实验五报告
20145302张薇 实验五:Java网络编程及安全 实验内容 掌握Socket程序的编写: 掌握密码技术的使用: 设计安全传输系统. 实验要求 基于Java Socket实现安全传输 基于TCP实现 ...
- 20135320赵瀚青LINUX内核分析第一周学习笔记
赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.概述 第一周的学习内容主 ...
- yarn命令使用
yarn 常用命令 修改日期 2017.12.26 最初接触 yarn 还是在 0.17.10 版本,由于各种各样的原因,使用时没 npm 顺手, 目前 yarn 的版本已经升级为 1.3.2 各种之 ...