call，apply，bind的理解

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()

call，apply，bind的理解

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

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

使用call:

call，apply，bind的理解

apply:

call，apply，bind的理解

bind:

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); // 1
fn1.call.call(fn2); // 2

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的理解

相关文章