JavaScript 之 call apply bind
关键字 this 绑定的方法
this
的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this
固定下来,避免出现意想不到的情况。JavaScript提供了call
、apply
、bind
这三个方法,来切换/固定this
的指向。
1. apply(thisArg[,args])
call(thisArgs [,args...]) 后面跟的是若干个参数列表 而 apply接收的是参数数组。
thisArgs指定了函数在运行期的调用者,也就是函数中的this对象,而参数列表会被传入调用函数中。thisArgs的取值有以下4种情况:
A): 不传,或者传null,undefined, 函数中的this指向window对象
B): 传递另一个函数的函数名,函数中的this指向这个函数的引用
C): 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean
D): 传递一个对象,函数中的this指向这个对象
这是call的核心功能,它允许你在一个对象上调用该对象没有定义的方法,并且这个方法可以访问该对象中的属性。
3. apply
apply(thisArgs[,args[]])
apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递。
function b(x,y,z){
console.log(x,y,z);
}
b.apply(null,[1,2,3]); // 1,2,3
4. bind
bind(thisArgs [,args...])
bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。其实,ES5引入bind的真正目的是为了弥补call/apply的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。而bind在实现改变函数this的同时又不会自动执行目标函数,因此可以完美的解决上述问题
当点击网页时,onClick被触发执行,输出onepixel p1 p2, 说明onClick中的this被bind改变成了obj对象,为了对bind进行深入的理解,我们来看一下bind的polyfill实现。
5. 应用场景
继承:因为JavaScript 没有类继承 也不能像java c# 一样。所有 我们可以使用call apply实现继承。
6. Function.prototype.bind
我们真正需要解决的是什么?
Function.prototype.bind() 是不支持IE8 以及以下的浏览器的。可以在MDN有一个很棒的资源。
适用的模式
click handlers(点击处理函数) 点击之后响应或记录事件。
setTimeout 可以实现此功能。
JavaScript 之 call apply bind的更多相关文章
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- JavaScript中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的环境,在没有学之 ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- JavaScript中call,apply,bind方法
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- javascript中call,apply,bind的使用
不同点: 1.call():传参方式跟bind一样(都是以逗号隔开的传参方式),但是跟apply(以数组的形式传参)不一样, 2.bind(): 此方法应用后的情形跟call和apply不一样.该方法 ...
- 你不知道的JavaScript--Item9 call(),apply(),bind()与回调
1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...
- 《JavaScript总结》apply、call和bind方法
在JavaScript中,apply.call.bind这个三个方法,它们的作用都是为了改变某个函数运行时的上下文, 也就是改变函数体内的this指向. 在一个函数里,存在“定义时上下文”.“运行时上 ...
- JavaScript学习(2)call&apply&bind&eval用法
javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...
随机推荐
- (七)《Java编程思想》——多态的缺陷
1.不能“覆盖”私有方法 package chapter8; /** * 不能"覆盖"私有方法 */ public class PrivateOverride { private ...
- 常用webservice网址
http://www.gpsso.com/Main/ServiceList.aspx http://developer.51cto.com/art/200908/147125.htm 这里记录了几个常 ...
- jQuery自学笔记(三):jQuery动画效果
jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...
- jQuery1.9(辅助函数)学习之—— jQuery.param( obj ); 编辑
jQuery.param( obj ); 返回一个String 描述: 创建一个数组或对象序列化的的字符串,适用于一个URL 地址查询字符串或Ajax请求. jQuery.param( obj ); ...
- bootstrap 模版
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- linux清理僵尸进程
查看服务器时发现好3个僵尸进程,僵尸进程存在好多天了,一直不会处理,留到了今天,顺便清理下僵尸进程吧 top命令中统计了僵尸进程,是第二行最后一项3 zombie. 或者使用下面的命令得到僵尸进程数量 ...
- LinkButton中添加删除确认框
LinkButton1.Attributes.Add("onclick", "javascript:return confirml('确认删除?');");
- 关于lambda表达式树
总而言之: 就是在表达式中没有花括号. IEnumerable<Rect> rectlist3 = rectlist.Select(rect =>newRect(rect.X + 2 ...
- C语言之链表————(转载)
#include <stdio.h>#include <malloc.h>#define LEN sizeof(struct student) /*-------------- ...
- Linux的标准输出、标准错误输出、nohup
1.在bash中标准输出可以用1来表示:通常来说这个1可以省略: 如./xxx >/dev/null 和 ./xxx 1>/dev/null 是一个意思 2.在bash中标准错误输出可以用 ...