call,apply,bind均是用于改变this指向。

三者相似之处:

1:都是用于改变函数的this指向。

2:第一个参数都是this要指向的对象。

3:都可以通过后面的参数进行对方法的传参。

let obj = {
address: '北京',
age: 18
}
let address = '上海'
var age = 20
let fn = function(name,sex){
console.log('address',this.address)
console.log('age',this.age)
console.log('name',name)
console.log('sex',sex)
}
fn()

在图中可以看到只有age是有值的,直接调用fn方法,this默认指向为window。

address因为是let声明出来的变量,会产生一个做个作用域,所以fn同样是取不到address,只可以取到age。

使用call:

apply:

bind:

call跟apply的相同点:改变this指向后会对函数进行调用。

call跟apply的区别:后续参数call是一个一个传入,apply是将所有参数放到一个数组中进行传递。

bind跟apply跟call的不同:改变this指向后,并不会主动度函数进行调用,需要再手动调用函数。

              传参方式有两种:1、跟call相同,将后续参数依次传入。

                    2、在调用时进行参数的传递

注意点:在严格模式下,即“use strict”

function fn() {
console.log(this);
}
fn()// 普通模式下this是window,在严格模式下this是undefined
fn.call(); // 普通模式下this是window,在严格模式下this是undefined
fn.call(null); // 普通模式下this是window,在严格模式下this是null
fn.call(undefined); // 普通模式下this是window,在严格模式下this是undefined

call的实现原理,实现一个自己的call方法。

明确call做了哪些事情。

1.改变了this指向

2.传递了要传递的参数

3.主动调用了方法

Function.prototype.myCall = function(...arg){
let obj = [...arg][0] || window//将this要指向的对象赋值给一个新对象
obj.fn = this//给新对象添加新的属性fn为要改变this指向的方法,实现了this的改变,obj.fn的this指向的便是obj了
let result = obj.fn(...[...arg].slice(1))//实现主动调用,并将参数传递
delete obj.fn//删除fn属性,防止破坏原有对象
return result //若方法有返回值将返回值return出去
}

call的经典例子:

function fn1() {
console.log(1);
}
function fn2() {
console.log(2);
}
fn1.call(fn2); //
fn1.call.call(fn2); //
fn1.call(fn2); 因为并没有涉及到this所以打印的仍然是1
fn1.call.call(fn2)
fn1.call.call(fn2)//将fn1.call看做要被该边this指向的函数,结合自己实现的call函数
function(...arg){
let obj = [...arg][0] || window//将this要指向的对象赋值给一个新对象
obj.fn = this//给新对象添加新的属性fn为要改变this指向的方法,实现了this的改变,obj.fn的this指向的便是obj了
let result = obj.fn(...[...arg].slice(1))//实现主动调用,并将参数传递
delete obj.fn//删除fn属性,防止破坏原有对象
return result //若方法有返回值将返回值return出去
}.call(fn2)//将里面的this改为fn2,可以看到实际执行的就是fn2函数
 

call,apply,bind的理解的更多相关文章

  1. call,apply,bind的理解

    2020-03-19 call,apply,bind的理解 先说区别call, apply基本上没什么不一样,唯一不一样的地方是传参方式不同 但是bind和call,apply有区别.bind是重新绑 ...

  2. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  3. 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解

       call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向.            a ...

  4. call,apply,bind的用法

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...

  5. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  6. call(),apply(),bind()与回调

    1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...

  7. javascript-this,call,apply,bind简述2

    上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...

  8. call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  9. JavaScript中call,apply,bind方法的总结

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

随机推荐

  1. java 百度地图判断两点距离1

    package baiduApi; /** * 类名称:PointToDistance * 类描述:两个百度经纬度坐标点,计算两点距离 * 创建人:钟志铖 * 创建时间:2014-9-7 上午10:1 ...

  2. Android热修复技术原理详解

    阿里Dexposed -- native解决方案 原理: 直接在native层进行方法的结构体信息对换,从而实现完美的方法新旧替换,从而实现热修复功能   他的思想完全来源于Xposed框架,完美诠释 ...

  3. spring 过滤器- 过滤登陆请求路径(过滤静态资源跳转到登陆页面)

    public class LoginedFilter implements Filter { /** * 排除的地址 */ private Map<String, Boolean> ign ...

  4. Appium+python自动化2-环境搭建

    一.必备软件安装 小编的环境是Windows 7版本 64位系统(32位的同学自己想办法哦) 1.jdk1.6.0 (64位) 2.android-sdk_r24.3.4-windows 3.pyth ...

  5. delphi中and和or的特殊用法

    1=1 10=2 100=4 1000=8 1 or 2 = 3(11); 1 and 3 = 1; 2 and 3 = 2; 2 or 4 = 6(110); 2 and 6 = 2; 4 and ...

  6. C基础知识(13):内存管理

    如果事先不知道数组的具体长度,则需要动态分配内存.下面是例子. #include <stdio.h> #include <stdlib.h> #include <stri ...

  7. kean的博客今天开通了,happy 一下

    希望以后可以日日勤勉,孜孜不倦的记录我的一生!

  8. 闲记Windows 取证艺术

         是不是很好奇,别人能够在你电脑上查看你运行程序历史,文档使用痕迹,浏览器浏览历史种种历史痕迹,没错,通过简单的系统了解以及配合相对应的工具,这一切就是这么的简单,看起来很高大上的操作,其实是 ...

  9. 关于session的一些问题

    最近在做项目的时候碰见了session过期的问题,然后就上网查了一些资料,我将我整理过的知识点梳理一下,顺便说一下我的使用方案. Session存储在服务器端,一般为了防止在服务器的内存中(为了高速存 ...

  10. 菜鸟系列Fabric——Fabric 1.2 多机部署(3)

    多机部署fabric kafka共识 1. 角色分配 主机1 主机 2 Org1 peer0 1 Org2 peer 0 1 Orderer 0 1 Orderer 2 kafka 0 1 kafka ...