# 一 、bind
特点:
### 1.返回原函数的拷贝,我们称这个拷贝的函数为绑定函数
### 2.将函数中的this固定为调用bind方法时的第一个参数,所以称之为绑定函数。注意是名词而非动词。
### 3.以后无论由哪个对象调用绑定函数,绑定函数中的this依然由当时调用的bind方法的一个参数决定,不会改变。
### 4.如果绑定函数作为构造函数来使用,那么已经固定了的this将不会生效,此时构造函数中的this依然为实例对象。
### 5.调用bind方法时的第二个参数做为绑定函数的第一个参数,称之为预设参数,调用绑定函数时的第一个参数则排在预设参数后面
### 6.无论使用任何对象调用bind方法时如果不传参数、第一个参数为undefined、第一个参数为null时,绑定函数中的this指向window对象


作用:
### 1.拷贝一个目标函数
### 2.改变绑定函数运行时的this指针


1-1 证明是原函数的拷贝 (需要知道:函数也是对象,并且是引用类型,比较的是内存地址)
```
function fn(){}

var bindFn = fn.bind(); //ƒ fn(){ return this } 供以后调用

fn === bindFn //false

  1. <br>
  2. <br>
  3. 2-1 将函数中的this固定为调用bind方法时的第一个参数

function fn(){ return this }

var bindFn = fn.bind({name:"绑定函数"}) //ƒ fn(){ return this }

  1. <br>
  2. <br>
  3. 3-1 以后无论由哪个对象调用绑定函数,绑定函数中的this依然是{name:"绑定函数"}

function fn(){ console.log(this) }

var bindFn = fn.bind({name:"绑定函数"})

bindFn() //等同于window对象调用 , this依然指向{name:"绑定函数"}

var obj = {name:"obj"};

obj.fn = bindFn;

obj.fn() //由普通对象调用 ,this依然指向{name:"绑定函数"}

var arr = [bindFn];

arr0 //由数组调用 , this依然指向{name:"绑定函数"}

setTimeout(bindFn , 200); //作为回调函数 , this依然指向{name:"绑定函数"}

clearTimeout(1);

  1. <br>
  2. <br>
  3. 4-1 如果绑定函数作为构造函数,已经捆绑的this会被忽略掉,this依然指向实例对象

function Person(name){

this.name = name;

}

var bindPerson = Person.bind({name:"绑定函数"})

new bindPerson("张三") // Person {name: "张三"}

  1. <br>
  2. <br>
  3. 5-1 预设参数

function fn(a,b,c,d){

console.log(a,b,c,d) // 1 ,2 ,3 ,4

}

var bindFn = fn.bind({name:"绑定函数"} , 1 ,2); // 拷贝原函数时的第2个参数开始往后称为预设参数

bindFn(3,4); //调用绑定函数时的第一参数则排在预设参数的后面

  1. <br>
  2. <br>
  3. 6-1 当没有参数、第一个参数为undefined、第一个参数为null时

var obj = {

fnOne:function(){ return this }.bind(),

fnTwo:function(){ return this }.bind( undefined ),

fnThree:function(){ return this }.bind( null )

}

//注意:这三种情况是使this指向window对象,而不是不去改变this指向,所以这里的this还是不会指向obj

obj.fnOne() // window

obj.fnTwo() //window

obj.fnThree() //window

  1. <br>
  2. <br>
  3. <br>
  4. # 二、call
  5. 特点:
  6. ### 1.返回值取决于目标函数的返回值
  7. ### 2.用call的第一个参数对象来代替调用目标函数的对象,以此来改变目标函数体内的this指向
  8. ### 3.调用call方法时的第二个参数做为目标函数的第一个参数,将第二个作为第三个以此类推
  9. <br>
  10. 作用:
  11. ### 1.用于继承,例如子构造函数继承父构造函数
  12. ### 2.改变绑定函数运行时的this指针。
  13. <br>
  14. 1-1 返回值取决于目标函数的返回值

function fn(){ return {name:"call"} }

fn.call() // {name: "call"}

  1. <br>
  2. <br>
  3. 2-1 改变目标函数体内的this指向 , 相当于使用第一个参数对象调用

function fn(){ return this }

fn.call( { name : "call" } ) // {name: "call"}

  1. <br>
  2. <br>
  3. 3-1 参数位置

function fn(a, b, c){ return arguments }

fn.call( { name : "call" } , 1 , 2 , 3 ) //Arguments [1, 2, 3]

  1. <br>
  2. <br>
  3. 1-2 用于继承

function parent(name, age) {

this.name = name;

this.age= age;

}

function child(name, age) {

parent.call(this, name, age);

this.class = '三年级二班';

}

var xiaoming = new child("小明" , 18)

  1. <br>
  2. <br>
  3. <br>
  4. # 三、apply
  5. 特点:
  6. ### 1.与call方法一样唯一不同的地方就是apply的第二个参数是一个数组,数组的第一个元素对应目标函数的第一个参数,以此类推
  7. <br>
  8. 作用:
  9. ### 1.与call方法一样
  10. <br>
  11. 1-1 参数

function fn(a, b, c){ return a+b+c }

fn.apply({name:"apply"} ,[1,2,3]) //6

  1. <br>
  2. <br>
  3. <br>
  4. ## 总结
  5. ### 相同点
  6. ####1. 3个方法都是改变绑定函数运行时的上下文
  7. ### 不同点
  8. ####1.bind方法的返回值是原函数的拷贝,供以后调用 。参数既可以在拷贝时预设又可在调用时添加
  9. ####2.call与apply一样,返回值取决于目标函数的返回值 , 则是立即调用
  10. ####3.call与apply唯一的区别是call从第二个参数开始是若干个参数,而apply第二个参数是一个数组

JS中的bind 、call 、apply的更多相关文章

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

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

  2. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  3. js中的bind方法的实现方法

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...

  4. js笔记——理解js中的call及apply

    call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...

  5. 关于 js 中的 call 和 apply使用理解

    关于 js 中的 call 和 apply使用理解 在学习新的东西时候,碰到以前看过而又不理解,或则记忆不深的地方不妨回头看看书里知识点,有助于加深理解.正所谓--温故而知新. 废话不多说,直接上代码 ...

  6. 快速理解js中的call,apply的作用

    今天被人问到js中的call,apply的区别和用途,解释了一番后,想到之前在逼乎上看到一位小伙伴生动形象的解释 本身不难理解,看下MDN就知道了,但是不常用,遇到了,还要脑回路回转下.或者时间长了, ...

  7. JS中的call()和apply()方法(转)

    转自:http://uule.iteye.com/blog/1158829 JS中的call()和apply()方法 博客分类: JS   1.方法定义 call方法: 语法:call([thisOb ...

  8. 理解JS中的call、apply、bind方法(*****************************************************************)

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  9. js 中arguments,call,apply,bind的使用

    //对于 arguments和this, 每个函数都有自己独有的arguments和this, 且不进行链式查找 //arguments是什么? //答:1:arguments是收到的实参副本 //2 ...

  10. js中的call、apply、bind

    在js中每个函数都包含两个非继承而来的方法:call()和apply() call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义 ...

随机推荐

  1. Python-四则运算-蔡晓晴,杜婷萱

    github链接:https://github.com/Amy-CC/Arithmetic-Operation 一.需求 1.使用-n 参数控制生成题目的个数 2.使用-r 参数控制题目中数值(自然数 ...

  2. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  3. H3C配置Web登陆

    为什么80%的码农都做不了架构师?>>>   1.开启http服务. [H3C]ip http enable 2.创建web登陆的用户. [H3C]local-user king / ...

  4. DB2 Zos 浅谈 - DB2 LUW VS DB2 Zos

    DB2 Zos 浅谈 - DB2 LUW VS DB2 Zos 概述: 各位可能对DB2 LUW了解得比较多,但对DB2 Zos(大机操作系统)知之甚少,因为IBM的内部资料一向是比较封闭的,特别是我 ...

  5. Codeforce 1255 Round #601 (Div. 2) A. Changing Volume (贪心)

    Bob watches TV every day. He always sets the volume of his TV to bb. However, today he is angry to f ...

  6. Jmeter 性能测试(需求/指标分析与定义)

    1.一般而言,被测对象的性能需求,会在用户需求规格说明书中给出,如单位时间内的访问量需达到多少?业务响应时间不超过多少?业务成功率不低于多少?硬件资源耗用要在一个合理的范围中. 如下性能指标非常明确 ...

  7. [译]ANDROID 11: BETA 计划

    当我们开始计划 Android 11 的时候,我们没有预料到这些变化会发生在我们所有人身上,几乎遍及世界上的每一个地区. 这些挑战要求我们保持灵活性,寻找新的合作方式,特别是与我们的开发者社区合作. ...

  8. CGI (通用网关接口)

    CGI cgi即 Common Gateway Interface 译作 通用网关接口 是应用程序与应用程序之间的输入输出协议.比如我们写信,规定了开头一句写称呼,中间写内容,最后署名和日期.看到这种 ...

  9. 软件工程复习 WHUT

    软件过程模型: 瀑布模型:界限分明的独立阶段,计划驱动的软件过程.规范软件开发活动 (例如:可分为分析.开发.维护三个阶段) 也称生命周期模型.线性模型,采用结构化分析.设计.编程技术 不足的地方:知 ...

  10. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...