call and apply
   改变函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。

function test() {}
test() == test.call() var obj ={};
Object.prototype.toString.call(obj) //"[object Object]"
//因为call 和 apply 会将函数中的this指向第一个参数
上面代码相当于 obj.toString() 

1. call 和apply 区别在于传参:

  • call 第二个参数开始单个单个参数传
  • apply 第二个参数为数组或类数组
var a = [1, 2, 4, 1, 15];
Math.max.apply(null, a) // Math.max.call(null, 1, 2, 4, 16, 15) // //将数组的空元素变为undefined Array.apply(null [1,,3,,4) //[1,undefined,3,undefined,4];

第一个参数为空、null和undefined,则默认传入全局对象。

2. 空元素与undefined的区别

  • 数组的 forEach方法会跳过空元素,但是不会跳过undefined。因此,遍历内部元素的时候,会得到不同的结果。

3. 转换类似数组的对象

  • 被处理的对象必须有length属性,以及相对应的数字键。
let obj = { 0: 1, length: 2 };
let obj1={ 0: 1,1: 2, length: 2 }; Array.protetype.slice.apply(obj);//[1,undefined] Array.protetype.slice.apply(obj1);//[1,2]

bind方法

用于将函数体内的this绑定到某个对象,然后返回一个新函数。

var counter = {
count: 0,
a: function () {
this.count++;
}
}; var func = counter.a.bind(counter);
func();
counter.count // var add = function (x, y) {
return x * this.m + y * this.n;
} var obj = {
m: 2,
n: 2
}; var newAdd = add.bind(obj, 5); //将x 绑定为 5
newAdd(5) //
newAdd(1,5)//

第一个参数是null或undefined,等于将this绑定到全局对象

bind方法使用注意点

  • bind方法每运行一次,就返回一个新函数, 需要一个变量接收
  • 结合回调函数使用
var counter = {
count: 0,
inc: function () {
'use strict';
this.count++;
}
}; function callIt(callback) {
callback();
} callIt(counter.inc.bind(counter));
counter.count //

结合call方法使用

1. 正常使用slice

 [1, 2, 3].slice(0, 2) // [1,2]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 2) // [1,2]

2. 将Array.prototype.slice变成Function.prototype.call方法所在的对象,调用时就变成了Array.prototype.slice.call。

var slice = Function.prototype.call.bind(Array.prototype.slice);
Function.prototype.slice.call([1, 2, 3], 0, 1) // [1]
//slice([1, 2, 3], 0, 1)

3. 类似的写法还可以用于其他数组方法。

var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop); var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4] pop(a)
a // [1, 2, 3]

4. 将Function.prototype.bind方法变成Function.prototype.call的方法,就意味着bind的调用形式也可以被改写

function f() {
console.log(this.v);
} var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() //

JavaScript 中 call,apply 和 bind的更多相关文章

  1. javascript中的apply,call,bind详解

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  2. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  3. JavaScript中的apply()和call()

    可以将call()和apply()看做是某个对象的方法,通过调用方法的形式来间接调用函数. call()和apply()的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对 ...

  4. Javascript中的apply、call、bind

    apply . call .bind 三者都是用来改变函数的this对象的指向的: apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文: apply . ...

  5. JavaScript中的new,bind,call,apply的简易实现

    Function原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕 ...

  6. 浅谈JavaScript中的apply,call和bind

    apply,call,bine 这三兄弟经常让初学者感到疑惑.前两天准备面试时特地做了个比较,其实理解起来也不会太难. apply MDN上的定义: The apply() method calls ...

  7. JS中的apply,call,bind深入理解

    在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之 ...

  8. JavaScript中的apply和call函数详解(转)

    每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...

  9. JavaScript中call,apply和prototype

    [TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...

  10. JavaScript中的apply和call函数详解

    本文是翻译Function.apply and Function.call in JavaScript,希望对大家有所帮助 转自“http://www.jb51.net/article/52416.h ...

随机推荐

  1. Javascript之入门篇(一)

    上一篇学习了什么是JavaScript语言及其作用和特有的特点等,本篇将详细介绍JavaScript一些入门使用方式. 对于初学者来讲,由于JavaScript是嵌入到HTML页面里面的,首先创建一张 ...

  2. 【转】.net算术运算导致溢出

    源地址:http://blog.csdn.net/hawksoft/article/details/70470136

  3. SQLException: Incorrect string value: '\xE4\xB8\xAD\xE5\x9B\xBD' for column at row 1

    这个是由于新建数据库没有选择默认字符集导致的,只要选择utf8即可. 如果以上还无法解决,那可能是表里的varchar字符集也不对

  4. Burp Suite初探

    Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程. 一.安装部署 需要配置java环境,首先安装java,然后配置 ...

  5. P3879 [TJOI2010]阅读理解

    \(\color{#0066ff}{ 题目描述 }\) 英语老师留了N篇阅读理解作业,但是每篇英文短文都有很多生词需要查字典,为了节约时间,现在要做个统计,算一算某些生词都在哪几篇短文中出现过. \( ...

  6. (转)接口自动化测试之http请求实践总结

    一.接口测试的基本思路 1.确定要测试接口的请求类型.接口是get请求还是post请求. 2.确定接口的参数.需要传输的参数有哪些,类型分别是什么,都有哪些要求等. 3.按照参数要求构造请求需要的参数 ...

  7. 21. sessionStorage和localStorage的使用

    sessionStorage和localStorage的使用   前言 这是学习笔记,把从别人博客里转载的https://www.cnblogs.com/wangyue99599/p/9088904. ...

  8. git学习--clone和pull

    clone:从远程服务器克隆一个一模一样的版本库到本地,复制的是整个版本库.(clone是将一个库复制到你的本地,是一个本地从无到有的过程) pull:从远程服务器获取到一个branch分支的更新到本 ...

  9. php返回数据格式

    PHP返回HTML代码:     header('Content-type:text/html; charset=utf-8'); PHP返回xml代码:header('content-type: t ...

  10. C++文件读写函数之——fopen、fread和fwrite、fgetc和fputc、fgets和fputs、ftellf和fseek、rewind

    由于最近经常使用到c语言中的读写文件,所以在此总结以下,方便以后查找. 在c中,文件操作都是由库函数来实现的,主要是分为读和写两种操作,以下详细讲解以下所有有关文件操作的邯郸乎的用法: //C++写入 ...