对于call,apply,bind 的理解
JavaScript 中 call()、apply()、bind() 的用法
之前对与JavaScript中的call,apply,bind这几个方法一直理解的很模糊,今天总结一下。
例1
var name = '小王',
age = 20;
var obj = {
name: '小张',
objAge: this.name,
func: function () {
console.log(this.name + '年龄' + this.name);
}
}
obj.objAge; // 17
obj.myFun() // 小张年龄 undefined
例2
var favorite = '李青'; function shows(){
console.log(this.fav);
}
shows() //李青
比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ;
1,call()、apply()、bind() 都是用来重定义 this 这个对象的
var name ='小王',
age = 17;
var obj = {
name: '小张',
objAge: this.age,
func: function () {
console.log(this.name + '年龄' + this.age);
}
}
var db = {
name:'小李',
age:'30'
}
obj.myFun.call(db); // 小李年龄 30
obj.myFun.apply(db); // 小李年龄 30
obj.myFun.bind(db)(); // 小李年龄 30
以上出了 bind 方法后面多了个 () 外 ,结果返回都一致!
由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。
2,对比call 、bind 、 apply 传参情况下
var name ='小王',
age = 17;
var obj = {
name: '小张',
objAge: this.age,
func: function (from,place) {
console.log(this.name + '年龄' + this.age + '来自' + from + '去到' +place);
}
}
var db = {
name:'小李',
age:'30'
}
obj.myFun.call(db,'成都','上海'); // 小李 年龄 30 来自 成都去往上海
obj.myFun.apply(db,['成都','上海']); // 小李 年龄 30 来自 成都去往上海
obj.myFun.bind(db,'成都','上海')(); // 小李 年龄 30 来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])(); // 小李 年龄 30 来自 成都,上海去往 undefined
微妙的差距!
从上面四个结果不难看出:
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:
call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。
apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。
bind 除了返回是函数以外,它 的参数和 call 一样。
当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!
对于call,apply,bind 的理解的更多相关文章
- call,apply,bind的理解
2020-03-19 call,apply,bind的理解 先说区别call, apply基本上没什么不一样,唯一不一样的地方是传参方式不同 但是bind和call,apply有区别.bind是重新绑 ...
- 理解 JavaScript call()/apply()/bind()
理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...
- 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解
call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向. a ...
- call,apply,bind的理解
call,apply,bind均是用于改变this指向. 三者相似之处: 1:都是用于改变函数的this指向. 2:第一个参数都是this要指向的对象. 3:都可以通过后面的参数进行对方法的传参. l ...
- call,apply,bind的用法
关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- call(),apply(),bind()与回调
1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...
- javascript-this,call,apply,bind简述2
上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...
- call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
随机推荐
- 6389. 【NOIP2019模拟2019.10.26】小w学图论
题目描述 题解 之前做过一次 假设图建好了,设g[i]表示i->j(i<j)的个数 那么ans=∏(n-g[i]),因为连出去的必定会构成一个完全图,颜色互不相同 从n~1染色,点i的方案 ...
- CSS-动画,让图片上的图形有涨起来的效果(逐渐变高)和(逐渐变长)
效果图: html: <div class="inner3"> <div class="over"> <img src=" ...
- Oracle的优化
Oracle优化:物理优化和逻辑优化.物理优化:1):Oracle的运行环境.2):合理的使用优化器.3):合理配置Oracle实例参数4):建立合适的索引(减少IO)5):将索引数据和表数据分开在不 ...
- hdu_1231(最大连续子序列)
http://acm.hdu.edu.cn/showproblem.php?pid=1231 最长公共子序列: 方法1:暴力枚举所有区间的连续和,维护最大和 复杂度O(n^3)-->因为求区间和 ...
- Spring Cloud架构教程 (八)消息驱动的微服务(消费组)【Dalston版】
使用消费组实现消息消费的负载均衡 通常在生产环境,我们的每个服务都不会以单节点的方式运行在生产环境,当同一个服务启动多个实例的时候,这些实例都会绑定到同一个消息通道的目标主题(Topic)上. 默认情 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- BUFFER CACHE和SHARED POOL原理
http://blog.csdn.net/wanghai__/article/details/4881492 Buffer Cache LRU与Dirty List 在Buffer Cache中,Or ...
- Gradle 编译加速
参考:http://www.jianshu.com/p/200d55b4d40a http://blog.isming.me/2015/03/18/android-build-speed-up/ ht ...
- 用Vue来实现音乐播放器(十四):歌手数据接口抓取
第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 import jsonp from '../common/j ...
- 用Vue来实现音乐播放器(八):自动轮播图啊
slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...