<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var test = {
a : 5,
b : 6,
sum : function (a,b) {
var self = this;
function getA() {
return self.a;
}
function getB(){
return self.b;
}
alert(a);
alert(b);
return getA() + getB();
}
}
var obj = {a:2,b:3};
alert(test.sum.call(obj,4,5)); // alert顺序4,5,5
alert(test.sum.apply(obj,[6,7])); // alert顺序6,7,5
var sum = test.sum.bind(obj,8); // sum（b）
alert(sum(9));

// call
// var a = {
// user:"追梦子",
// fn:function(e,ee){
// console.log(this.user); //追梦子
// console.log(e+ee); //3
// }
// }
// var b = a.fn;
// b.call(a,1,2);

// //apply
// var a = {
// user:"追梦子",
// fn:function(e,ee){
// console.log(this.user); //追梦子
// console.log(e+ee); //11
// }
// }
// var b = a.fn;
// b.apply(a,[10,1]);

// //bind

// var a = {
// user:"追梦子",
// fn:function(){
// console.log(this.user);
// }
// }
// var b = a.fn;
// b.bind(a);
//我们发现代码没有被打印,这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

// 那么我们现在执行一下函数c看看，能不能打印出对象a里面的user

// var a = {
// user:"追梦子",
// fn:function(){
// console.log(this.user); //追梦子
// }
// }
// var b = a.fn;
// var c = b.bind(a);
// c();

// // ok，同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

// var a = {
// user:"追梦子",
// fn:function(e,d,f){
// console.log(this.user); //追梦子
// console.log(e,d,f); //10 1 2
// }
// }
// var b = a.fn;
// var c = b.bind(a,10);
// c(1,2);

// 总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。

bind方法生成了一个新的函数，称为绑定函数，传入bind方法的第一个参数作为这个绑定函数的this对象，传入bind的第二个参数连同后面调用绑定函数时传入的参数按照先后顺序（传入bind的在前）构成绑定函数的参数。
现在我们把上面的例子修改一下：

render: function () {
this.getAsyncData(function () {

this.specialFunction();

}.bind(this));

}
.bind()创建了一个函数，当这个函数在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）
再看一个bind的使用例子：

var foo = {
x: 3
}
var bar = function(){
console.log(this.x);
}
bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

将bar方法和foo对象绑定后，bar中的this对象被替换为了foo，并生成了一个新的函数boundFunc，因此在全局环境中调用boundFunc时，也可以访问到foo对象的属性。
还可以了解一下Function.prototype.bind()内部是什么样的：

Function.prototype.bind = function (scope) {
var fn = this;//this是调用bind方法的对象（别的方法对象）
return function () {
return fn.apply(scope);//把fn环境中的this替换为scope
};
}

可看出，bind方法返回了一个新的函数，这个方法返回了原方法（调用bind的方法）通过apply修改作用域（传入的参数scope）后的执行结果。如果调用这个新函数则会立即执行fn.apply(scope)，并返回执行后的结果。

fn.bind()
与call、apply的区别
call、apply是修改函数的作用域，并且立即执行，而bind是返回了一个新的函数，不是立即执行，即call and apply call a function while bind creates a function。bind在回调函数中常用到
</script>
</body>
</html>

bind,apply,call区别总结的更多相关文章

  1. call bind apply的区别

    call() 和apply()的第一个参数相同,就是指定的对象.这个对象就是该函数的执行上下文. call()和apply()的区别就在于,两者之间的参数. call()在第一个参数之后的 后续所有参 ...

  2. 数组去重，call、apply、bind之间的区别，this用法总结

    一.数组去重,直接写到Array原型链上. //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 Array.prototype.redup=functi ...

  3. this指向和apply，call，bind三者的区别

    一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...

  4. call、apply、bind三者的区别

    先构造函数let xiaowang={ name1:"小王", age:", sex:"男", say:function(){ console.log ...

  5. JavaScript中的call、apply、bind方法的区别

    在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...

  6. bind、call、apply的区别与实现原理

    1.简单说一下bind.call.apply的区别 三者都是用于改变函数体内this的指向,但是bind与apply和call的最大的区别是:bind不会立即调用,而是返回一个新函数,称为绑定函数,其 ...

  7. bind call apply 的区别和使用

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

  8. bind,apply,call的区别

    在Javascript中,bind, apply, call方法都可以显式绑定上下文this,这三者有何不同呢? bind只绑定this不马上执行 var person = { firstname: ...

  9. 箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply，call方法

    箭头函数不能用做构造函数 箭头函数没有arguments参数 箭头函数没有自己的this,是从作用域链上取this,是与箭头函数定义的位置有关的,与执行时谁调用无关,所以用call,apply,bin ...

随机推荐

  1. [学习OpenCV攻略][004][播放AVI视频]

    cvCreateFileCapture(文件路径) 创建一个影音文件录像机,返回值为CvCapture类型,用于读取视频文件 cvQuerFrame(视频) 将下一帧视频文件载入内存,当CvCaptu ...

  2. [国嵌笔记][023][ARM寻址方式]

    寻找方式 1.处理器根据指令中给出的信息来找到指令所需操作数的方式 2.立即数寻址 操作数本身在指令中给出,立即数前加”#”表示立即数寻址,操作数在指令中 3.寄存器寻址 利用寄存器中的数值作为操作数 ...

  3. 如何开发由Create-React-App 引导的应用（一）

    此文章是翻译How to develop apps bootstrapped with Create React App 官方文档 系列文章 如何开发由Create-React-App 引导的应用 如 ...

  4. java中类的加载过程和对象的创建过程

    1.类加载过程 首先,jvm在执行时,遇到一个新的类,会先去内存的方法区中去寻找该类的.class文件,如果找到了就直接运行,如果没有找到,则会去硬盘中去寻找该类的.class文件,并将该类文件加载到 ...

  5. 跟我一起读postgresql源码(十三)——Executor(查询执行模块之——Join节点(上))

    Join节点 JOIN节点有以下三种: T_NestLoopState, T_MergeJoinState, T_HashJoinState, 连接类型节点对应于关系代数中的连接操作,PostgreS ...

  6. GO开发[五]：golang结构体struct

    Go结构体struct Go语言的结构体(struct)和其他语言的类(class)有同等的地位,但Go语言放弃了包括继承在内的大量面向对象特性,只保留了组合(composition)这个最基础的特性 ...

  7. dig（域信息搜索器）命令

    dig命令   dig命令是常用的域名查询工具,可以用来测试域名系统工作是否正常. 语法 dig(选项)(参数) 选项 @<服务器地址>:指定进行域名解析的域名服务器: -b<ip地 ...

  8. thinkphp5自动完成

  9. VisualSVN Server启动错误(0x8007042a)

    SVN Server启动错误(0x8007042a)   原因是SVN Server端口被占用 打开VisualSVN Server, 菜单->操作->Properties->Net ...

  10. 查看php的配置文件Php.ini的位置

    标签:php服务器 浏览器 配置文件 Linux local 近来,有不博友问php.ini存在哪个目录下?或者修改php.ini以后为何没有生效?基于以上两个问题,我觉得有必要教一下刚接触PHP的博 ...