JavaScript中改变this指向的三种方法详解:call、apply与bind
本文详细解析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();
JS合并多个数组的三种方法:concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
