复习JS:bind、apply、call

320 阅读1分钟

大部分代码及文字来自:sg的影绰

1 作用:

说人话就是:可以在一个对象里使用别的对象的方法。 专业点:用来改变函数的this对象的指向。 下面的例子中,可以让没有say方法的xh(小红),使用xw(小王)的say,让自己也有了say。

2 使用

var xw={
    name: "小王",
    gender: "男",
    age: 24,
    say: function(){
        alert(this.name+" , "+this.gender+" ,今年"+this.age);
    }
}
var xh={
    name: "小红",
    gender: "女",
    age: 18
}
xw.say(); //小王当然可以say一say

调用:

xw.say.call(xh);
xw.say.apply(xh);
// call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数
xw.say.bind(xh)();

在有参数的情况下call和apply产生区别:

var xw={
    name: "小王",
    gender: "男",
    age: 24,
    say: function(school,grade){
        alert(this.name+" , "+this.gender+" ,今年"+this.age+" ,在"+school+"上"+grade);
    }
}
var xh={
    name: "小红",
    gender: "女",
    age: 18
}

调用形式:

call以及bind后面的参数与say方法中是一一对应的 apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的

xw.say.call(xh,"实验小学","六年级");    
xw.say.apply(xh,["实验小学","六年级"]);
xw.say.bind(xh,"实验小学","六年级")();

补充:可以调用属性吗?

var xw={
    name: "小王",
    gender: "男",
    age: 24,
    goodat:"LOL" //新加的属性
}
var xh={
    name: "小红",
    gender: "女",
    age: 18,
    
}

console.log(xw.goodat.call(xh));
console.log(xw.goodat.apply(xh));
console.log(xw.goodat.bind(xh)());

不可以。 xw.goodat.bind is not a function。