js中call,apply和bind
1,首先先做一个定义:每个函数都包含两个非继承的方法:apply()和call(),apply和call这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值,两者唯一的区别就是第二个参数不同,apply是传一个数组或者arguments对象,call则需要逐个列出来。(call是把它们一个一个都叫过来,apply是整个应用)
函数a.apply(b, [1,2]) == 函数a.call(b, 1, 2),其实含义就是在b里面执行a函数,作用域是b所在的执行环境,这里有个注意点,就是在使用了apply和call之后,会立即执行该函数。
传递参数的示例代码就不写了,太多了。。
事实上,传递参数并非call和apply真正的用武之地,它们真正强大的地方是扩充作用域。
window.color = "red";
var o = {
color: 'blue'
};
function fn(){
console.log(this.color)
};
fn(); // red
fn.call(this); // red
fn.call(window); // red
fn.call(o); // blue
上面换成apply也一样。call和apply如果传递的是null或者undefined,默认就是在window中。
一些类数组,比如arguments和NodeList,只能使用数组索引而不能用push,pop等数组方法,我们就可以用apply或call为其添加数组的方法。
(function(){
Array.prototype.push.call(arguments,4);
console.log(arguments);//[1, 2, 3, 4]
})(1,2,3)
还有之前提到的如何判断类型:
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]
2,而bind方法会创建一个函数的实例,其this值会被绑定到传给bind()函数的值,和call和apply方法不同的是,bind不会立即执行。
window.color = 'red';
function fn(){
alert(this.color)
};
var b = {
color: 'blue'
}
var o = fn.bind(b);
o(); // 'blue'
记住一定要给bind绑定后赋值,因为它返回的是一个函数实例,不然没办法触发。
bind是ES5定义的,所以可能部分浏览器不支持,需要模拟bind():
Function.prototype.bind = function(context){
var self = this;
return function(){
return self.apply(context, arguments)
}
}
js中call,apply和bind的更多相关文章
- JS中的apply,call,bind深入理解
在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之 ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
- js 中call,apply,bind的区别
call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...
- JS中call,apply,bind的区别
1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...
- js的call,apply,bind的使用与区别
在原生js中会有三个很常见的函数,call,apply,bind 他们的作用就是改变当前函数的this指针, 但是细微来说他们还是有不同的. 1)call,apply都是执行某一函数,发现this有变 ...
- js call、apply和bind
function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 例1 例子1中的意思就是用 ...
- js中的apply和call API
借用网上的一个例子: fun.call(this,arg1,arg2,arg3) fun.apply(this,arguments) this.fun(arg1,arg2,arg3) 三种方法等效. ...
- js中call(),apply(),以及prototype的含义
最近段时间主要学习前端去了,然而所遇到的一些问题我觉得有必要去深究一下 prototype: 1 js中有三种表达方法 类方法,属性方法,原型方法 function People(name) { th ...
- js中call apply方法的使用介绍
js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...
- Js中的apply和call
1.call和apply都是为了改变某个函数运行时的上下文而存在的 2.也就是改变函数体内this的指向. 3.二者的作用完全一样,只是接受参数的方式不太一样. 4.call 需要把参数按顺序传递进去 ...
随机推荐
- LeetCode刷题时引发的思考:Java中ArrayList存放的是值还是引用?
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 前言 今天我在刷LeetCode ...
- Semantic Monocular SLAM for Highly Dynamic Environments面向高动态环境的语义单目SLAM
一.摘要 当前单目SLAM系统能够实时稳定地在静态环境中运行,但是由于缺乏明显的动态异常处理能力,在动态场景变化与运动中往往会失败.作者为解决高度动态环境中的问题,提出一种语义单目SLAM架构,结合基 ...
- HTML学习笔记(一)——基础标签及常用编辑器技巧
HTML 初识html 什么是html? html是超文本标记语言(hyper text markup language) html5的基本结构 <!DOCTYPE html> <! ...
- three.js 着色器材质之glsl内置函数
郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措.原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着 ...
- 分析"傍富婆发财"
视频地址https://www.bilibili.com/video/BV1pZ4y1u7jf 半佛 被富婆阿姨毒打的原因: 1.地位不对等导致工具化 资源不对等的情况下,尤其是一方极度依赖另一方资源 ...
- WPF桌面程序在请求接口时如何防止被常用的抓包软件Fiddler抓包
问题:在我开发了一个WPF桌面应用程序的时候,由于涉及到登录等等操作通过Fiddler可以很直观的看到账号密码.首先问题有两点:1.数据提交的时候对于密码等重要的数据没有进行加密操作.2.没有防止抓包 ...
- 改改Python代码,运行速度还能提升6万倍
这份最新研究指出,在后摩尔定律时代,人类所获得的的算力提升将更大程度上来源于计算堆栈的「顶层」,即软件.算法和硬件架构,这将成为一个新的历史趋势. 很多人学习python,不知道从何学起.很多人学习p ...
- Springboot日志LOGO改变和设计
每次启动Springboot的时候,SpringBoot都会打印一个LOGO,那么这个LOGO是可以关闭和改变的. 1.关闭Springboot的LOGO 2.改变Springboot的日志LOGO ...
- 使用 .NET Core 3.x 构建 RESTFUL Api
准备工作:在此之前你需要了解关于.NET .Core的基础,前面几篇文章已经介绍:https://www.cnblogs.com/hcyesdo/p/12834345.html 首先需要明确一点的就是 ...
- C#LeetCode刷题之#455-分发饼干(Assign Cookies)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4034 访问.. 假设你是一位很棒的家长,想要给你的孩子们一些小饼 ...