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 ...
随机推荐
- python blob操作
最近在学习使用Python,操作Oracle数据库采用的是cx_Oracle模块. 对于基本字段,都可以正常操作.但是对于Blob字段,我试试好几次,都没成功.下面贴出测试代码,与大家讨论讨论. 这是 ...
- phpstorm 断点调试总是从index.php的第一行开始
去掉勾选,重开phpstorm
- 性能分析 函数粒度 函数里的一条语句 汇编 反编译 机器指令 %rbx,%rbp
在Linux下做性能分析3:perf - 知乎 https://zhuanlan.zhihu.com/p/22194920 Linux Perf 性能分析工具及火焰图浅析 - 知乎 https://z ...
- MyBatis 示例之存储过程
存储过程在数据库中比较常见,虽然大多数存储过程比较复杂,但是使用 MyBatis 调用时,用法都一样,因此我们这一节使用一个简单的存储过程来了解 MyBatis 中存储过程的使用方法. 基本准备 存储 ...
- [译]在Pandas的Dataframe中删除行、列
导入模块 import pandas as pd 创建dataframe data = {'name': ['Jason', 'Molly', 'Tina', 'Jake', 'Amy'], 'yea ...
- [译]使用Pandas读取大型Excel文件
上周我参加了dataisbeautiful subreddit上的Dataviz Battle,我们不得不从TSA声明数据集创建可视化.我喜欢这种比赛,因为大多数时候你最终都会学习很多有用的东西. 这 ...
- PAT 甲级 1068 Find More Coins (30 分) (dp,01背包问题记录最佳选择方案)***
1068 Find More Coins (30 分) Eva loves to collect coins from all over the universe, including some ...
- spring 使用XML配置开发Spring AOP
XML方式开发AOP与注解开发原理是相同的,所以这里主要介绍一些用法即可.这里需要在XML中引入AOP的命名空间,所以先来了解一下AOP可配置的元素 代码清单:切面类 package com.ss ...
- 分类:logistic回归
import numpy as np import matplotlib.pyplot as plt x=np.linspace(-1,1,200) y=1/(1+np.exp(10*x-1)) pl ...
- kubernetes 【版本】
kubernetes本身是一个集群,我们所说的kubernetes版本实际上指的是集群各个组件的版本. 有哪些组件有版本呢? https://kubernetes.io/docs/setup/rele ...