关于apply、call和bind的总结
基础知识不是你看了一遍书或者两篇文章就能掌握的。
之前看书看文章时,感觉自己看懂了就掌握了。呵呵!too young!too naive!
以前的坑还是要一铲一铲的填上的。
高程上面关于apply和call的知识点:
apply和call,这两个方法的用途都是在特定作用域中调用函数,实际上等于设置函数体内this对象的值(this
指当前对象,也就是正在调用这个函数的对象。)。
apply方法
apply方法接收两个参数:一个是在其中运行函数的作用域(this),另一个是参数数组。其中,第二个参数(可选)可以是Array的实例,也可以是arguments对象。
用apply改变this:
var jack = {
name:'jack',
age:28,
sayName:function() {
console.log(this.name);
}
};
var juli = {
name:'juli',
age:25
};
jack.sayName();//jack
jack.sayName.apply(juli);//juli
用apply改变this并传入第二个参数
var ryo = {
name:'隆',
learn:function(para) {
this.shill = para;
}
};
var ken = {
name:'肯'
}
//通过ryo的learn方法让ken学会波动拳
ryo.learn.apply(ken,['波动拳']);
call方法
call方法与apply方法的作用相同,他们的区别仅在于接收参数的方式不同。
对于call方法,第一个参数与apply方法的第一个参数意义相同。不同的是,在使用call方法时,传递给函数的参数必须逐个列举出来。
把上面的两个例子用call改写,结果完全一样。注意两者传入函数的参数的方式不同。
bind方法
bind方法会创建一个调用bind方法的函数的实例(返回一个绑定函数),该函数实例(绑定函数)的this为传入bind方法的第一个参数。当使用new
操作符调用该函数实例(绑定函数)时,第一个参数无效。
通过bind方法还可以预设返回的函数实例(绑定函数)的参数,方法是给bind方法传入除第一个参数以外的参数。
用bind创建一个原函数的实例:
var name = 'window对象'; function originalFun(para1,para2) {
console.log(arguments);
console.log(para1 + para2);
console.log(this.name);
} var funOne = originalFun.bind(); funOne(3,4);
调用funOne函数的输出结果:
创建funOne函数时,没有向bind方法中传入参数,funOne的this被设为window对象。
不过在严格模式下,不传入参数,返回的函数实例的this不会被设为window,以上代码运行时会报错 'Cannot read property 'name' of undefined'。
用bind创建一个原函数的实例并绑定一个this:
var name = 'window对象';
var person = {
name:'Gilbert',
age:15
}; function originalFun(para1,para2) {
console.log(arguments);
console.log(para1 + para2);
console.log(this.name);
} var funTwo = originalFun.bind(person); funTwo(5,6);
调用funTwo函数的输出结果:
用bind创建一个原函数的实例并绑定一个this和预设第一个参数:
var name = 'window对象';
var person = {
name:'Gilbert',
age:15
}; function originalFun(para1,para2) {
console.log(arguments);
console.log(para1 + para2);
console.log(this.name);
} var funThree = originalFun.bind(person,10); funThree(40);
调用funThree函数的输出结果:
用new操作符调用绑定函数时,会忽视传入bind方法的第一个参数。
下面的例子根据MDN的例子改编而来:
var math = {
name:'jojo'
}
function Point(x, y) {
this.x = x;
this.y = y;
} Point.prototype.toString = function() {
console.log(this);
console.log(this.x + ',' + this.y);
};
var CopyPoint = Point.bind(math,0);
var aPoint = new CopyPoint(10);
aPoint.toString();//输出:{x:0, y:10} 0,10
承接上面的代码,不用new操作符调用绑定函数:
//不用new操作符调用绑定函数
CopyPoint(20);
console.log(math);//输出:{name:'jojo', x:0, y:20}
结束语
以上内容只是总结了apply、call、bind的最基础的知识,要想在项目中熟练地使用这三个方法还要有一定的经验积累。
(完)
相关文章:
1.【优雅代码】深入浅出 妙用Javascript中apply、call、bind
参考文章:
关于apply、call和bind的总结的更多相关文章
- 动态作用域与this +apply和call +bind
词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则. (函数作用域和块作用域) JavaScript 中的作用域就是词法作用域,也就是静态作用域,由定义代码决定 动态作用域似乎暗示有很好的 ...
- js call apply caller callee bind
call apply bind作用类似.即调用一个对象的一个方法,以另一个对象替换当前对象. call 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) ...
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). 即 “某个方法”当做“指定的某个对象”的“方法”被执行. Js代 ...
- 前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind
在我的职业生涯中,很早就已经开始使用JavaScript进行项目开发了.但是一直都是把重心放在了后端开发方面,前端方面鲜有涉及.所以造成的一个现象就是:目前的前端知识水平,应付一般的项目已然是足够的, ...
- JS中的call()和apply()方法和bind()
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- 浅谈JavaScript中的apply,call和bind
apply,call,bine 这三兄弟经常让初学者感到疑惑.前两天准备面试时特地做了个比较,其实理解起来也不会太难. apply MDN上的定义: The apply() method calls ...
- JavaScript 构造函数 prototype属性和_proto_和原型链 constructor属性 apply(),call()和bind() 关键字this
1.构造函数: 通常构造函数首字母需要大写,主要是为了区别ECMAScript的其它函数.(高程三 P145) 构造函数与其他函数的唯一区别,就在于调用它们的方式不同.只要通过new来调用,任何函数都 ...
- 彻底理解了call()方法,apply()方法和bind()方法
javascript中的每一个作用域中都有一个this对象,它代表的是调用函数的对象.在全局作用域中,this代表的是全局对象(在web浏览器中指的是window).如果包含this的函数是一个对象的 ...
- apply,call和bind的用法区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- this、apply/call、bind、闭包、函数、变量复制
一.实际场景中抽象出的一个问题 下面this各指向什么? var a = { b: function() { console.log(this); }, f: function() { var c = ...
随机推荐
- Flask系列(七)Flask中的wtforms使用
一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 二.简单使用wtfo ...
- Status Code状态码详解对照表
状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在 ...
- Sql Server查询同一ID 时间较大的一条数据
- hdu5107 线段树
hdu 5107 这题说的是给了一个二维的 平面, 平面内有30000个点每个点都有自己的高度,然后又30000次的查询,每次查询给的是(X,Y,K), 要求出set(x,y){x,y|x<=X ...
- springcloud13---zuul
Zuul:API GATEWAY (服务网关): http://blog.daocloud.io/microservices-2/ 一个客户端不同的功能请求不同的微服务,那么客户端要知道所有微服务的 ...
- springcloud8----feign-with-hystrix
Feign也可以使用Hystrix: package com.itmuch.cloud; import org.springframework.boot.SpringApplication; impo ...
- ABP官方文档翻译 0.0 ABP官方文档翻译目录
一直想学习ABP,但囿于工作比较忙,没有合适的契机,当然最重要的还是自己懒.不知不觉从毕业到参加工作七年了,没留下点儿什么,总感觉很遗憾,所以今天终于卯足劲鼓起勇气开始写博客.有些事能做的很好,但要跟 ...
- bzoj1297 / P4159 [SCOI2009]迷路
P4159 [SCOI2009]迷路 如果边权只有 0/1 那么不就是一个灰常简单的矩阵快速幂吗! 然鹅边权 $<=9$ 所以我们把每个点拆成9个点! 解决~ #include<iostr ...
- bzoj1615 / P2903 [USACO08MAR]麻烦的干草打包机The Loathesome Hay Baler
P2903 [USACO08MAR]麻烦的干草打包机The Loathesome Hay Baler 细节题.$O(n^{2})$的$bfs$可过. #include<iostream> ...
- Python3.x获取网页源码
Python3.x获取网页源码 1,获取网页的头部信息以确定网页的编码方式: import urllib.request res = urllib.request.urlopen('http://ww ...