call/apply/bind

Posted 2021-09-09 纸 飞机

call、 apply、bind是js函数自带的三个方 法,用来改变函数内部this的指向，三个方法的第一个参数都是是this要指向的对象。

三者区别是:

1 . bind方法返回一个绑定了this之后的新函数，新函数调用了才会执行。而apply、 call会立即执行函数。

2 .它们第二个参数均为函数接受的参数， 但apply是以数组的形式传入。call、 bind 是以参数列表的形式传入。

—、fn.call(obj, argl, arg2...)

fn使用call方法临时改变一次内部this的指向，并立即执行。

obj : this指向的对象 。当值为null和 undefined时指向window。

arg:要传递给函数fn的参数列表。

var Pet = { 
    words: 'Haha',
    speak: function (say) { i
        console.log(say + this.words) ;
    }
}

var Dog = {
    words: 'Wang'
}

//将this的指向改变成TDogo
//输出'HelloWang'

Pet.speak.call(Dog,'Hello'）

二、fn.apply(obj, [argl, arg2...])

fn使用apply方法临时改变一次内部this的 指向，并立即执行。

obj : this指向的对象。当值为null 和 undefined 时指向 window。

[arg]:要传递给函数fn的参数组成的数组或伪数组。

function Pet(words){
    this.words = words;
    this.speak = function () {
        console.log(this.words)
    }
} j
function Dog(words){
    Pet.apply(this, arguments);
    //将Pet内的this指向构造函数Dog内的this(其实例对象)
} I
var dog = new Dog('Wang');
dog.speak(); //Wang

三、fn.bind(obj, argl, arg2,...)

fn使用bind方法返回一个永久改变this指 向的新函数，fn不会立即执行。

obj : this指向的对象 。 当值为null 和 undefined 时指向 window。

arg:要传递给函数fn的参数列表。

var origin = function() {
    console.log(this.x, this.y);
);
var o = {x: 1,y: 2};
var bindFun = origin.bind(o);
bindFun();/1 2

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x: 1}, 2);
console.log(m(3)); //6