call

改变this指向

var obj = {
    name: 'zhangsan'
}
function o() {
    console.log('我是' + this.name);
}
o.call(obj);

call可以更改this指向

传递参数

function Father(name, age) {
    this.name = name;
    this.age = age;
}

function Son(name, age) {
    Father.call(this,name,age)
}

var son = new Son('zhangsan',18);
console.log(son)
// 可以用于继承父类构造函数的属性

call可以同时传递参数

apply

apply功能与call基本相同

1.改变this指向

var obj = {
    name: 'zhangsan'
}
function o() {
    console.log('我是' + this.name);
}
o.apply(obj);

apply改变this指向

2. 传递参数

function Father(name, age) {
    this.name = name;
    this.age = age;
}

function Son(name, age) {
    Father.apply(this,[name,age])
}

var son = new Son('zhangsan',18);
console.log(son)

apply传递参数

需要注意的是apply传递的是数组和call不同!!!

3. apply可以用于调用原生的数学内置对象

var arr = [1,5,55,666,7777];
var max = Math.max.apply(Math,arr);
console.log(max);
console.log(min);

image.png

bind

改变this指向

var obj = {
    name: 'zhangsan'
}
function o () {
    console.log(this.name);
}
var f = o.bind(obj);
f();

bind改变this指向

需要注意的是，bind可以改变函数的this指向，但并不调用函数

bind返回的是原函数的拷贝

传递参数

var obj = {
    name: 'zhangsan'
}
function o (age) {
    console.log(this.name + age);
}
var f = o.bind(obj,18);
f();

bind传递参数

bind的使用实例

$('button').click(function () {
    $(this).attr('disabled', true);
    setTimeout(function () {
        $(this).attr('disabled', false);
    }.bind(this), 3000)
})