JS中的bind 、call 、apply
# 一 、bind
特点:
### 1.返回原函数的拷贝,我们称这个拷贝的函数为绑定函数
### 2.将函数中的this固定为调用bind方法时的第一个参数,所以称之为绑定函数。注意是名词而非动词。
### 3.以后无论由哪个对象调用绑定函数,绑定函数中的this依然由当时调用的bind方法的一个参数决定,不会改变。
### 4.如果绑定函数作为构造函数来使用,那么已经固定了的this将不会生效,此时构造函数中的this依然为实例对象。
### 5.调用bind方法时的第二个参数做为绑定函数的第一个参数,称之为预设参数,调用绑定函数时的第一个参数则排在预设参数后面
### 6.无论使用任何对象调用bind方法时如果不传参数、第一个参数为undefined、第一个参数为null时,绑定函数中的this指向window对象
作用:
### 1.拷贝一个目标函数
### 2.改变绑定函数运行时的this指针
1-1 证明是原函数的拷贝 (需要知道:函数也是对象,并且是引用类型,比较的是内存地址)
```
function fn(){}
var bindFn = fn.bind(); //ƒ fn(){ return this } 供以后调用
fn === bindFn //false
<br>
<br>
2-1 将函数中的this固定为调用bind方法时的第一个参数
function fn(){ return this }
var bindFn = fn.bind({name:"绑定函数"}) //ƒ fn(){ return this }
<br>
<br>
3-1 以后无论由哪个对象调用绑定函数,绑定函数中的this依然是{name:"绑定函数"}
function fn(){ console.log(this) }
var bindFn = fn.bind({name:"绑定函数"})
bindFn() //等同于window对象调用 , this依然指向{name:"绑定函数"}
var obj = {name:"obj"};
obj.fn = bindFn;
obj.fn() //由普通对象调用 ,this依然指向{name:"绑定函数"}
var arr = [bindFn];
arr0 //由数组调用 , this依然指向{name:"绑定函数"}
setTimeout(bindFn , 200); //作为回调函数 , this依然指向{name:"绑定函数"}
clearTimeout(1);
<br>
<br>
4-1 如果绑定函数作为构造函数,已经捆绑的this会被忽略掉,this依然指向实例对象
function Person(name){
this.name = name;
}
var bindPerson = Person.bind({name:"绑定函数"})
new bindPerson("张三") // Person {name: "张三"}
<br>
<br>
5-1 预设参数
function fn(a,b,c,d){
console.log(a,b,c,d) // 1 ,2 ,3 ,4
}
var bindFn = fn.bind({name:"绑定函数"} , 1 ,2); // 拷贝原函数时的第2个参数开始往后称为预设参数
bindFn(3,4); //调用绑定函数时的第一参数则排在预设参数的后面
<br>
<br>
6-1 当没有参数、第一个参数为undefined、第一个参数为null时
var obj = {
fnOne:function(){ return this }.bind(),
fnTwo:function(){ return this }.bind( undefined ),
fnThree:function(){ return this }.bind( null )
}
//注意:这三种情况是使this指向window对象,而不是不去改变this指向,所以这里的this还是不会指向obj
obj.fnOne() // window
obj.fnTwo() //window
obj.fnThree() //window
<br>
<br>
<br>
# 二、call
特点:
### 1.返回值取决于目标函数的返回值
### 2.用call的第一个参数对象来代替调用目标函数的对象,以此来改变目标函数体内的this指向
### 3.调用call方法时的第二个参数做为目标函数的第一个参数,将第二个作为第三个以此类推
<br>
作用:
### 1.用于继承,例如子构造函数继承父构造函数
### 2.改变绑定函数运行时的this指针。
<br>
1-1 返回值取决于目标函数的返回值
function fn(){ return {name:"call"} }
fn.call() // {name: "call"}
<br>
<br>
2-1 改变目标函数体内的this指向 , 相当于使用第一个参数对象调用
function fn(){ return this }
fn.call( { name : "call" } ) // {name: "call"}
<br>
<br>
3-1 参数位置
function fn(a, b, c){ return arguments }
fn.call( { name : "call" } , 1 , 2 , 3 ) //Arguments [1, 2, 3]
<br>
<br>
1-2 用于继承
function parent(name, age) {
this.name = name;
this.age= age;
}
function child(name, age) {
parent.call(this, name, age);
this.class = '三年级二班';
}
var xiaoming = new child("小明" , 18)
<br>
<br>
<br>
# 三、apply
特点:
### 1.与call方法一样唯一不同的地方就是apply的第二个参数是一个数组,数组的第一个元素对应目标函数的第一个参数,以此类推
<br>
作用:
### 1.与call方法一样
<br>
1-1 参数
function fn(a, b, c){ return a+b+c }
fn.apply({name:"apply"} ,[1,2,3]) //6
<br>
<br>
<br>
## 总结
### 相同点
####1. 3个方法都是改变绑定函数运行时的上下文
### 不同点
####1.bind方法的返回值是原函数的拷贝,供以后调用 。参数既可以在拷贝时预设又可在调用时添加
####2.call与apply一样,返回值取决于目标函数的返回值 , 则是立即调用
####3.call与apply唯一的区别是call从第二个参数开始是若干个参数,而apply第二个参数是一个数组
JS中的bind 、call 、apply的更多相关文章
- js中的bind、apply、call、callee、caller的区别
1.bind.apply与call的区别与使用 相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象.作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数.通常用于 ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- js中的bind方法的实现方法
js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...
- js笔记——理解js中的call及apply
call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...
- 关于 js 中的 call 和 apply使用理解
关于 js 中的 call 和 apply使用理解 在学习新的东西时候,碰到以前看过而又不理解,或则记忆不深的地方不妨回头看看书里知识点,有助于加深理解.正所谓--温故而知新. 废话不多说,直接上代码 ...
- 快速理解js中的call,apply的作用
今天被人问到js中的call,apply的区别和用途,解释了一番后,想到之前在逼乎上看到一位小伙伴生动形象的解释 本身不难理解,看下MDN就知道了,但是不常用,遇到了,还要脑回路回转下.或者时间长了, ...
- JS中的call()和apply()方法(转)
转自:http://uule.iteye.com/blog/1158829 JS中的call()和apply()方法 博客分类: JS 1.方法定义 call方法: 语法:call([thisOb ...
- 理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- js 中arguments,call,apply,bind的使用
//对于 arguments和this, 每个函数都有自己独有的arguments和this, 且不进行链式查找 //arguments是什么? //答:1:arguments是收到的实参副本 //2 ...
- js中的call、apply、bind
在js中每个函数都包含两个非继承而来的方法:call()和apply() call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义 ...
随机推荐
- 对话Roadstar投资人:一家自动驾驶公司之死(三)
...
11. Roadstar 如何收场? 雷锋网:你觉得 Roadstar 造成今天这样的局面,是什么导致的? 投资人代表 1:刚才我们也数次表达了,在每个人身上,可能每个人的诉求,不能达到同步,与公司的 ...
- 详解Linux 安装 JDK、Tomcat 和 MySQL(图文并茂)
https://www.jb51.net/article/120984.htm
- Swift-Realm数据库的使用详解
Swift-Realm数据库的使用详解 概述 Realm 是一个跨平台的移动数据库引擎,其性能要优于 Core Data 和 FMDB - 移动端数据库性能比较, 我们可以在 Android 端 re ...
- java的Timer定时器任务
在项目开发中,经常会遇到需要实现一些定时操作的任务,写过很多遍了,然而每次写的时候,总是会对一些细节有所遗忘,后来想想可能是没有总结的缘故,所以今天小编就打算总结一下可能会被遗忘的小点: 1. pub ...
- 《Docker从入门到跑路》之多阶段构建
多阶段构建就是在一个Dokcerfile中定义多个FROM,每个FROM都可以使用不同的基础镜像,并表示开始一个新的构建阶段,我们可以很方便的将一个阶段的文件复制到另外一个阶段中,在最终的阶段保存你需 ...
- .NET Core技术研究-通过Roslyn代码分析技术规范提升代码质量
随着团队越来越多,越来越大,需求更迭越来越快,每天提交的代码变更由原先的2位数,暴涨到3位数,每天几百次代码Check In,补丁提交,大量的代码审查消耗了大量的资源投入. 如何确保提交代码的质量和提 ...
- 1-MyBatisPlus教程(一)
1,简介 官网:http://mp.baomidou.com/ 参考教程:http://mp.baomidou.com/guide/ MyBatis-Plus(简称 MP)是一个 MyBatis 的增 ...
- 常用linux命令学习记录
批量替换文件中字符串: sed -i "s/ITSApi/icallApi/g" `grep ITSApi -rl icallbiz` 解释: 将icallbiz目录文件中包涵的I ...
- 解密C语言编译背后的过程
我们大部分程序员可能都是从C语言学起的,写过几万行.几十万行.甚至上百万行的代码,但是大家是否都清楚C语言编译的完整过程呢,如果不清楚的话,我今天就带着大家一起来做个解密吧. C语言相对于汇编语言是一 ...
- CTR预估模型演变及学习笔记
[说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] [再啰嗦一下]如果你对智能推荐感兴趣,欢迎先浏览我的另一篇随笔:智能推荐算法演 ...