apply,call和bind的使用及区别
1、用途
1)apply,call和bind都是 用来改变this的指向
2)apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用执行
2、this指向问题
this的指向有以下四种情况:
1)如果函数中的this没有调用对象,则this指向window(严格模式下,this为undefined)
2)如果函数中this被不包含子对象的对象调用,则this指向调用它的对象
3)如果函数中this被包含多级对象的对象调用,则this指向调用它的上一级对象
4)如果我们调用了对象,并将其赋值给某个变量,然后在需要的时候再去调用执行它,则此时this也是指向的window对象,如:
var a = obj.myFunc;
a();
var name="zhang";
var age=18;
var obj={
name:"liu",
myAge:this.age,
myFun:function(){
console.log(this); // this指向obj
console.log(this.name+";"+this.age)
}
} obj.myAge // 18
obj.myFun()
上图是我们很常用的一个对象属性的获取和方法的调用,在我们获取obj.myAge属性时,这里的this实际是window对象,所以我们去找window.age,找到的是全局参数age=18
在调用myFun()方法时,本着谁调用this就指向谁的基本原则,此时this指向的是obj对象,所以我们输出的this.name为liu,this.age为undefined
上面的例子如果不太好理解的话,我们看下面这个更直观的例子:
var name="zhangsan";
function showName(){
console.log(this);
console.log(this.name);
}
showName();
我们在这里直接定义了一个方法,并且调用了它,上面说了,谁调用函数,函数里面的this就指向谁,但是我们这里直接调用了showName(),并没有明确说明是谁调用了它啊,其实这里我们可以理解为window.showName(),即this实际上是指向的window。
3、apply和call
1)先来看看call是如何实现的:
Function.prototype.call=function(context){
// 这里的this指向demo函数
console.log(this);
context=context?Object(context):window;
context.fn=this;
var args=[];
// 参数从1开始循环因为第一个参数是context
for(var i=1;i<arguments.length;i++){
args.push("arguments["+i+"]");
}
// 这里执行context.fn() 即上面的demo(),所以this指向了context,但是因为我们没有传递context,所以this指向了window
var r = eval("context.fn("+args+")")
delete context.fn;
return r;
}
var name="test"
function demo(){
console.log(this)
console.lot(this.name)
}
demo.call();
1) 当我们传递了context时,context为我们传递的对象;否则为window对象。
2) 谁调用,this指向谁,我们通过demo.call 调用了call方法,所以这里的this指向的时demo函数
3)将传递的参数放进args中
4)通过eval函数执行我们的context.fn,即上面的demo函数
5)demo函数中,this指向的时call方法中的context,这里时window对象
6)this.name即window.name
2)call其实是apply的一个语法糖,他们的作用都是用于改变上下文的指向,区别在于,call接受多个参数,而apply接受的是一个数组
var db={
name:"dema"
}
var obj={
name:"obj",
myFunc:function(from,to){
console.log(this);
console.log(this.name+"来自:"+from,+"去往:"+to);
}
}
obj.myFunc.call(null,'北京','上海') // this 指向window,this.name=undefined,from=北京,to=上海
obj.myFunc.call(db,'北京','上海'); // this指向db,this.name='dema',from=北京,to=上海
obj.myFunc.apply(db,['北京','上海']); // this指向db,this.name='dema',from=北京,to=上海
上面例子中,我们分别调用了call和apply,并传入了参数null,db和地名,从上面的call的实现中,可以看到,我们接受的第一个参数是上下文context,用于改变this的指向。
所以上面第一行,传入的context为null,则this指向window,第二行和第三行,都传人了context为db,所以this此时是指向db的,即this.name=db.name
4、bind
bind也是用于改变上下文的指向,它和call一样,接受多个参数。
bind和apply,call的区别在于,bind返回一个方法,用于后面调用,apply和call会直接执行
function print(a,b,c){
console.log(a,b,c)
}
var fn = print.bind(null,'D')
fn('A','B','C') // D,A,B
apply,call和bind的使用及区别的更多相关文章
- 让你弄懂 call、apply、bind的应用和区别
call.apply.bind使用和区别 // 有只猫叫小黑,小黑会吃鱼 const cat = { name: '小黑', eatFish(...args) { console.log('this指 ...
- 使用call、apply、bind继承及三者区别
js里的继承方法有很多,比如:使用原型链的组合继承.es6的Class.寄生继承以及使用call.apply.bind继承.再说继承之前,我们先简单了解下它们的区别. 一.区别: 同:三者都是改变函数 ...
- call,apply,bind的用法及区别
<script> function test(){ console.log(this) } // new test(); //函数调用call方法的时候,就会执行. //call的参数:第 ...
- bind,call,applay的区别
方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ...
- 动态作用域与this +apply和call +bind
词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则. (函数作用域和块作用域) JavaScript 中的作用域就是词法作用域,也就是静态作用域,由定义代码决定 动态作用域似乎暗示有很好的 ...
- js call apply caller callee bind
call apply bind作用类似.即调用一个对象的一个方法,以另一个对象替换当前对象. call 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- Jquery中bind和live的区别
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- Bind和Eval的区别详解
原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...
- [jQuery]on和bind事件绑定的区别
on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...
随机推荐
- Java HashSet介绍
HashSet底层使用HashMap实现.当使用add方法将对象添加到Set当中时,实际上是将该对象作为底层所维护的Map对象的key,而value则都是同一个Object对象(该对象我们用不上). ...
- REDIS中加锁和解锁问题
使用lua+redis的方法.之所以使用lua是为了保证原子性 问题: 1. redis发现锁失败了要怎么办?中断请求还是循环请求?2. 循环请求的话,如果有一个获取了锁,其它的在去获取锁的时候,是不 ...
- java和c# md5加密
MD5加密的方式有很多,加盐的方式更多,最近项目需要java和c#加密结果一致,形成方法如下: 1.c#加密方法/// <summary> /// MD5 加密字符串 /// </s ...
- ubuntu18设置root账号的开机登录
date: 2019-08-20 17:36:49 author: headsen chen notice :个人原创 1,用普通用户登录. su - root 打开终端 vi /etc/pam.d ...
- Ionic app IOS 在Xcode 模拟运行 真机调试
1. 创建项目: sudo ionic start myApp tabs 2 cd 到刚才创建的项目 3. sudo ionic cordova platform add ios 把 ios 环境添加 ...
- 让Chrome浏览器抓包接口数据秒变 python 代码
简介 uncurl是一个库,允许您将curl请求转换为使用requests 的python代码.由于Chrome网络检查器具有的“copy as cURL”,因此该工具对于用python重新创建浏览器 ...
- 【翻译】Flink 异步I / O访问外部数据
本文来自官网翻译: Asynchronous I/O for External Data Access 需要异步I / O操作 先决条件 异步I / O API 超时处理 结果顺序 活动时间 容错保证 ...
- C#中Invoke的用法(转)
invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和beg ...
- dockerfile中设置环境变量
设置环境变量要用 ENV ENV JAVA_HOME /usr/local/jdk1.8.0_171 ENV PATH $JAVA_HOME/bin:$PATH 用 echo "JAVA_H ...
- 《MySQL必知必会》学习笔记——附录A MySQL入门
附录A MySQL入门 如果你是MySQL的初学者,本附录是一些需要的基础知识. A.1 你需要什么 为使用MySQL和学习本书中各章的内容,你需要访问MySQL服务器和客户机应用(用来访问服务器的软 ...