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 需要把参数按顺序传递进去 ...
随机推荐
- layui在odoo12上的应用,用widget覆盖原字段视图
layui是一个前端框架,提供了许多前端的组件等,layui的详情自己官网地址:https://www.layui.com/doc/去查看 下面说一下最近用layui遇到的问题和解决方式: 问题:近期 ...
- 使用Flask开发简单接口(3)--引入MySQL
前言 前面的两篇文章中,我们已经学习了通过Flask开发GET和POST请求接口,但一直没有实现操作数据库,那么我们今天的目的,就是学习如何将MySQL数据库运用到当前的接口项目中. 本人环境:Pyt ...
- 华为云GaussDB(DWS)内存知识点,你知道吗?
前言 在日常数据库的使用中,难免会遇到一些内存问题.此次博文主要向大家分享一些华为云数仓GaussDB(DWS)内存的基本框架以及基本视图的使用,以便遇到内存问题后可以有一个基本的判断. 注意,本篇博 ...
- Ajax中关于xmlhttp.readyState的值及解释
xmlhttp.readyState的值及解释:0:请求未初始化(还没有调用 open()).1:请求已经建立,但是还没有发送(还没有调用 send()).2:请求已发送,正在处理中(通常现在可以从响 ...
- System.out.println()相关源码
System.out.println是一个Java语句,一般情况下是将传递的参数,打印到控制台. System:是 java.lang包中的一个final类.根据javadoc,“java.lang. ...
- html定时跳转页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C#LeetCode刷题-极小化极大
极小化极大篇 # 题名 刷题 通过率 难度 375 猜数字大小 II 23.4% 中等 464 我能赢吗 25.5% 中等 486 预测赢家 40.4% 中等 843 猜猜这个单词 2 ...
- C#算法设计排序篇之04-选择排序(附带动画演示程序)
选择排序(Selection Sort) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/681 访问. 选择排序是一种简 ...
- 微软看上的Rust 语言,安全性真的很可靠吗
摘要:近几年,Rust语言以极快的增长速度获得了大量关注.其特点是在保证高安全性的同时,获得不输C/C++的性能.在Rust被很多项目使用以后,其实际安全性表现到底如何呢? 近几年,Rust语言以极快 ...
- ExcelWeb脚本助手,自定义脚本,批量操作Excel与网页
ExcelWeb脚本助手,是一款可以自定义脚本操控Excel和浏览器的工具.提供了简单实用的Excel与Browser的API调用,通过自建脚本或自建项目,随意定制. 可以非常方便的根据Excel中的 ...