JavaScript中的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相关文档

原文地址:https://www.cnblogs.com/uakora/p/12684529.html

时间: 2024-10-31 21:36:28

JavaScript中的apply()、call()、bind()的相关文章

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用

JavaScript中的apply()方法和call()方法使用介绍

javascript中apply和call方法的作用及区别说明 call和apply的说明 call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 语法:foo.call(this, arg1,arg

JS中的apply,call,bind深入理解

在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一

了解javascript中的apply和call

apply和call是javascript中很重要的方法,虽然平时编程很少接触到,但是JS框架中到处在使用这2个方法. 这2个方法是在Function.prototype中,也就是说每个JS函数都有这2个方法. alert(Function.prototype.hasOwnProperty("apply"));//true alert(Object.prototype.hasOwnProperty("apply"));//false 这2个函数完成的功能是等价的,唯

JavaScript中的apply和call函数详解

第一次翻译技术文章,见笑了! 翻译原文:Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下这篇文章,复习一下(refresher)JavaScript特性.你可能还想知道JavaScript中函

javascript 中 call apply 方法的区别

function foo(arg1, arg2, arg3){ alert(art1 + arg2 + arg3); } foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3) call , apply 都属于 Function.prototype的一个方法, 它是JavaScript引擎内在实现的, 因为属于 Function.prototype  所以每个Functi

JavaScript中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

JavaScript中call,apply,bind方法

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

javascript中call,apply,bind的区别

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对象.3.都可以利用后续参数传参.那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , &qu