JavaScript中改变this指向的三种方法详解:call、apply与bind

作者:木棉

时间:2026-10-29

浏览:211

本文详细解析JavaScript中改变this指向的三种核心方法:call、apply和bind。通过对比参数传递方式(逐个列举与数组形式)及返回值特性(直接执行与返回新函数),阐明它们在函数复用、继承模拟及上下文绑定中的具体应用,帮助开发者根据场景选择合适方案。

文章目录

JavaScript中this指向的基本概念

this是JavaScript的关键字,其值随函数使用场合不同而变化。核心原则是:this始终指向调用该函数的对象。

默认情况下,this指向当前被调用者。但可通过特定方式改变其指向,主要包含三种方法。

改变this指向的三种方法

第一种方法是使用call进行继承操作。


function Parent(age){
this.name=['mike','jack','smith'];
this.age=age;
}
function Child(age){
Parent.call(this,age);//把this指向Parent,同时还可以传递参数
}
var test=new Child(21);
console.log(test.age);//21
console.log(test.name);
test.name.push('bill');
console.log(test.name);//mike,jack,smith,bill

第二种方法涉及call和apply,二者均可改变this指向。区别在于:apply的第二个参数为散列分布(数组或arguments对象),而call的参数需逐个列举。


console.log(Math.max.apply(null,[1,2,3,4]));//4

apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是arguments 对象。call() 方法与 apply() 方法的作用相同,它们的区别仅在于接收参数的方式不同。对于 call() 方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用call() 方法时,传递给函数的参数必须逐个列举出来。

第三种方法是ES5定义的bind(),它返回一个函数实例,其this值被绑定到传入bind()的参数。例如:


window.color='red';
var o={color:'blue'};

function sayColor(){
console.log(this.color);
}
var objectSaycolor=sayColor.bind(o);
//var objectSaycolor=sayColor.bind();
objectSaycolor();//blue

此处sayColor()调用bind()并传入对象o,生成objectSayColor()函数。该函数this值恒等于o,即使在全局作用域调用,输出仍为blue。

以上介绍了JS中改变this指向的call、apply和bind方法,希望对读者有所帮助。

call与apply的详细定义与区别

补充基础知识:call()与apply()的区别。

一、方法定义

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的方法,以另一个对象替换当前对象。

说明:

call可用于代替另一对象调用方法,将函数上下文从初始状态切换至thisObj指定的新对象。

若未提供thisObj参数,则使用Global对象作为thisObj。

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的方法,用另一对象替换当前对象。

说明:

若argArray非有效数组或arguments对象,将导致TypeError。若未提供argArray和thisObj任一参数,则Global对象作为thisObj,且无法传递任何参数。

代码示例:


function Animal(name) {
   this.name = name;
   this.showName = function() {
     console.log(this.name);
   };
 }
 function Cat(name) {
   Animal.call(this, name);
 }
 Cat.prototype = new Animal();
 function Dog(name) {
   Animal.apply(this, name);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat"); //call必须是object
 var dog = new Dog(["Black Dog"]); //apply必须是array
 cat.showName();
 dog.showName();
 console.log(cat instanceof Animal);
 console.log(dog instanceof Animal);

模拟call和apply的this替换逻辑。


 function Animal(name) {
   this.name = name;
   this.showName = function() {
     alert(this.name);
   };
 };
 function Cat(name) {
   this.superClass = Animal;
   this.superClass(name);
   delete superClass;
 }
 var cat = new Cat("Black Cat");
 cat.showName();

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章