1、简单说一下bind、call、apply的区别

  三者都是用于改变函数体内this的指向,但是bind与apply和call的最大的区别是:bind不会立即调用,而是返回一个新函数,称为绑定函数,其内的this指向为创建它时传入bind的第一个参数,而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。


var obj = {}; function test() {
console.log(this === obj);
} test(); //false var testObj = test.bind(obj);
testObj(); //true

  apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向);apply和call的调用返回函数执行结果;

  如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是一个参数数组,call的第二个及其以后的参数都是数组里面的元素,就是说要全部列举出来;

以下是MDN文档:


bind语法: func.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg 当绑定函数被调用时,该参数会作为原函数运行时的this指向。当使用new 操作符调用绑定函数时,该参数无效。
arg1, arg2, ... 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。

call语法: fun.call(thisArg, arg1, arg2, ...)
thisArg::在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, ... 指定的参数列表。

apply语法: fun.apply(thisArg, [argsArray])
thisArg: 在 fun 函数运行时指定的 this 值。需要注意的是,指定的 this 值并不一定是该函数执行时真正的 this 值,如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的 this 会指向该原始值的自动包装对象。
argsArray: 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

区别总结:

当我们使用一个函数需要改变this指向的时候才会用到call,apply,bind
如果你要传递的参数不多,则可以使用fn.call(thisObj, arg1, arg2 ...)
如果你要传递的参数很多,则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...])
如果你想生成一个新的函数长期绑定某个函数给某个对象使用,则可以使用


const newFn = fn.bind(thisObj);
newFn(arg1, arg2...)

2、bind、call、apply的实现

myBind:


Function.prototype.myBind = function() {
var _this = this;
var context = [].shift.call(arguments);// 保存需要绑定的this上下文
var args = [].slice.call(arguments); //剩下参数转为数组
console.log(_this, context, args);
return function() {
return _this.apply(context, [].concat.call(args, [].slice.call(arguments)));
}
};

myCall:


/**
* 每个函数都可以调用call方法,来改变当前这个函数执行的this关键字,并且支持传入参数
*/
Function.prototype.myCall = function(context) {
//第一个参数为调用call方法的函数中的this指向
var context = context || global;
//将this赋给context的fn属性
context.fn = this;//此处this是指调用myCall的function var arr = [];
for (var i=0,len=arguments.length;i<len;i++) {
arr.push("arguments[" + i + "]");
}
//执行这个函数,并返回结果
var result = eval("context.fn(" + arr.toString() + ")");
//将this指向销毁
delete context.fn;
return result;
}

myApply:


/**
* apply函数传入的是this指向和参数数组
*/
Function.prototype.myApply = function(context, arr) {
var context = context || global;
context.fn = this;
var result;
if (!arr) {
result = context.fn(); //直接执行
} else {
var args = [];
for (var i=0,len=arr.length;i<len;i++) {
args.push("arr[" + i + "]");
}
result = eval("context.fn([" + args.toString() + "])");
}
//将this指向销毁
delete context.fn;
return result;
}

  以上是bind、apply、和call的模拟实现

注意:绑定函数(bind函数返回的新函数)不可以再通过apply和call改变其this指向,即当绑定函数调用apply和call改变其this指向时,并不能达到预期效果。


var obj = {}; function test() {
console.log(this === obj);
} var testObj = test.bind(obj);
testObj(); //true var objTest = {
"作者": "chengbo"
};
/**
* 预期返回false, 但是testObj是个绑定函数,所以不能改变其this指向
*/
testObj.apply(objTest); //true
testObj.call(objTest); //true

欢迎留言。

原文链接:《bind、call、apply的区别与实现原理

bind、call、apply的区别与实现原理的更多相关文章

  1. bind call apply 的区别和使用

    bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...

  2. js call与bind和apply的区别

    介绍 在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是thi ...

  3. bind,call,apply的区别

    function cat(){}cat.prototype={ food:"fish", say: function(){ alert("I love "+th ...

  4. js修改函数内部的this指向(bind,call,apply)

    js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...

  5. bind,apply,call区别总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Bind、Apply、Call三者的区别

    1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...

  7. js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?

     壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...

  8. apply,call和bind的使用及区别

    1.用途 1)apply,call和bind都是 用来改变this的指向 2)apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用执行 2.this指向问题 thi ...

  9. js中的bind、apply、call、callee、caller的区别

    1.bind.apply与call的区别与使用 相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象.作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数.通常用于 ...

随机推荐

  1. python测试网络可达性的方法

    1.ping连通性测试 #!/usr/bin/env python #-*- coding: utf-8 -*- import os,sys,re import subprocess def NetC ...

  2. GLSL 基础量定义 【转】

    转载:http://blog.csdn.net/misol/article/details/7658949   GLSL语法跟C语言非常相似: 1.数据类型: GLSL包含下面几种简单的数据类型 fl ...

  3. TP框架模板中ifelse

    {if $_username}<ul class="afterLogin">    <li class="username"><a ...

  4. 如何修改mindmanager默认字体为微软雅黑

    mindmanager默认的字体是Verdana的,如何改为大家喜欢的其他字体呢?比如微软雅黑. 其实很简单,以我使用的是汉化版Mindmanager2012为例,只需要下面几个步骤   第1步:找到 ...

  5. java 开发环境安装

    一.在mac上安装jdk 1. 下载Mac版本的JDK并安装      http://www.oracle.com/technetwork/java/javase/downloads/index.ht ...

  6. C​P​U​_​C​S​t​a​t​e​_​P​S​t​a​t​e and then ACPI on Wiki

    http://wenku.baidu.com/link?url=eHbdT4EjdJx3dsQETGUIL8q1K3_EyuzGLWT0G103AEca0vs0gHR_v_3c0oaUL2gbkrr8 ...

  7. C语言日期计算器

    记录下码子 # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <stdlib.h> int days ...

  8. ExtJs4学习(二):Dom操作

    如今主流的JS框架要数ExtJs和JQuery应用的比較广泛.JQuery属于轻量级的,一般做站点应用比較常见.可见块头小的优势. ExtJs比較庞大,它除了对主要的JS语法和HTML DOM操作方式 ...

  9. JAVA进阶-多线程(2)

    堵塞队列: 1)BlockingQueue该接口提供了: add()/remove() 假设当队列没有数据,从队列中取数据;或者队列中数据已满, 向队列中加入数据;则会抛出异常. put()/take ...

  10. MySQL 5.7.18的安装及主从复制(主从同步)

    MySQL 5.7.18的安装与主从复制 IP 计算机名 角色 192.168.1.222 001 master 192.168.1.233 002 slave CentOS 6.9安装mysql5. ...