欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript中的apply()、call()、bind()

程序员文章站 2022-03-26 13:24:59
JavaScript 中 apply、call、bind方法的异同: 相同点 都是用来动态指定函数 this 对象的指向 第一个参数都是 this 要指向的对象,也就是要指定的上下文 都可以利用后续参数传参 不同点 传参形式不同:apply 方法接受的是一个参数数组,call 和 bind 方法接受 ......

javascript 中 apply、call、bind方法的异同:

相同点

  • 都是用来动态指定函数 this 对象的指向
  • 第一个参数都是 this 要指向的对象,也就是要指定的上下文
  • 都可以利用后续参数传参

不同点

  • 传参形式不同:apply 方法接受的是一个参数数组,call 和 bind 方法接受的是参数列表
  • 执行方式不同:apply、call 会立即执行,而 bind 方法会创建一个新函数,需要单独调用执行

apply() 的使用

语法:func.apply(thisarg, [argsarray])

thisarg: 必选的。在 func 函数运行时使用的 this 值

argsarray: 可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数

var name = 'globalname';
var age = 'globalage';

var person = {
  name: '姓名',
  age: '年龄',
  foo: function() {
    console.log('姓名:' + this.name + ' ' + '年龄:' + this.age);
  }
}
var xiaoming = {
  name: '小明',
  age: 25
};

person.foo();                   // 姓名:姓名 年龄:年龄
person.foo.apply(xiaoming);     // 姓名:小明 年龄:25
person.foo.apply(null);         // 姓名:globalname 年龄:globalage (非严格模式)
person.foo.apply(undefined);    // 姓名:globalname 年龄:globalage (非严格模式)
person.foo.apply({});           // 姓名:undefined 年龄:undefined

var foo = person.foo;
foo();                          // 姓名:globalname 年龄:globalage (非严格模式)
foo.apply(person);              // 姓名:姓名 年龄:年龄
foo.apply(xiaoming);            // 姓名:小明 年龄:25
/* 传参: 一个数组 */
var person = {
  name: '姓名',
  age: '年龄',
  foo: function(a, b, c) {
    console.log(a, b, c);
  }
}
var xiaoming = {
  name: '小明',
  age: 25
};

person.foo();                              // undefined undefined undefined
person.foo.apply(xiaoming, [1, 2, 3]);     // 1 2 3

var foo = person.foo;
foo.apply(xiaoming, [1, 2, 3]);            // 1 2 3

call() 的使用

语法:function.call(thisarg, arg1, arg2, ...)

thisarg: 可选的。在 function 函数运行时使用的 this 值

arg1, arg2, ...: 可选的。指定的参数列表

var name = 'globalname';
var age = 'globalage';

var person = {
  name: '姓名',
  age: '年龄',
  foo: function() {
    console.log(this.name + ' ' + this.age);
  }
}
var xiaoming = {
  name: '小明',
  age: 25
};

person.foo();                  // 姓名 年龄
person.foo.call(xiaoming);     // 小明 25
person.foo.call(null);         // globalname globalage (非严格模式)
person.foo.call(undefined);    // globalname globalage (非严格模式)
person.foo.call({});           // undefined undefined

var foo = person.foo;
foo();                         // globalname globalage (非严格模式)
foo.call(person);              // 姓名 年龄
foo.call(xiaoming);            // 小明 25

说明:不传参,用法类似 apply()

/* 传参: 列表 */
var person = {
  name: '姓名',
  age: '年龄',
  foo: function(a, b, c) {
    console.log(a, b, c);
  }
}
var xiaoming = {
  name: '小明',
  age: 25
};

person.foo();                            // undefined undefined undefined
person.foo.call(xiaoming, 1, 2, 3);     // 1 2 3

var foo = person.foo;
foo.call(xiaoming, 1, 2, 3);            // 1 2 3

bind() 的使用

语法: function.bind(thisarg[, arg1[, arg2[, ...]]])

参数
thisarg: 调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。

arg1, arg2, ...: 当目标函数被调用时,被预置入绑定函数的参数列表中的参数

返回值
返回一个原函数的拷贝,并拥有指定的 this 值和初始参数

var name = 'globalname';
var age = 'globalage';

var person = {
  name: '姓名',
  age: '年龄',
  foo: function() {
    console.log(this.name + ' ' + this.age);
  }
}
var xiaoming = {
  name: '小明',
  age: 25
};

person.foo();                    // 姓名 年龄
person.foo.bind(xiaoming)();     // 小明 25
person.foo.bind(null)();         // globalname globalage (非严格模式)
person.foo.bind(undefined)();    // globalname globalage (非严格模式)
person.foo.bind({})();           // undefined undefined

var foo = person.foo;
foo();                           // globalname globalage (非严格模式)
foo.bind(person)();              // 姓名 年龄

var bar = foo.bind(xiaoming);            
bar();                           // 小明 25 (需要单独调用执行)

说明:相比 apply()、call()会立即执行,bind 需要单独调用执行 bind()()

/* 传参: 列表 */
var person = {
  name: '姓名',
  age: '年龄',
  foo: function(a, b, c) {
    console.log(a, b, c);
  }
}
var xiaoming = {
  name: '小明',
  age: 25
};

person.foo();                             // undefined undefined undefined
person.foo.bind(xiaoming, 1, 2, 3)();     // 1 2 3

var foo = person.foo;
var bar = foo.bind(xiaoming, 1);          // 返回原函数的拷贝         
bar(2, 3);                                // 1 2 3                        


以上只是 apply()、call()、bind() 方法主要的一个用法,更多用法详细请阅读mdn相关文档