JS改变this指向的三种方法

1.call()

第一个参数:this指向
如果要传参,后面依次是参数,例:

function fn(x,y){
   console.log(this);  
   console.log(this.name);
}
var obj = {
   name:"zs"
}
fn(1,2);	
fn.call(obj,1,2);

JS改变this指向的三种方法_第1张图片
这样一来把this由原来的window对象转变成obj对象了

2.apply()

与第一种方法不同的是,用数组的形式表示参数

function fn(x,y){
   console.log(this);  
}
var obj = {
   name:"zs"
}
fn(1,2);	//这里执行输出的this是window全局对象
fn.apply(obj,[1,2]);	//把函数绑定到对象后输出的this就是对象了

JS改变this指向的三种方法_第2张图片

这样一来把this由原来的window对象转变成obj对象了

3.bind()

bind 只改变this指向,不会调用函数(call和apply都会)

function fn(x,y){
   console.log(this);  
   console.log(this.name)
}
var obj = {
   name:"zs"
}
fn(1,2);
fn.bind(obj,1,2)();

JS改变this指向的三种方法_第3张图片
这样一来把this由原来的window对象转变成obj对象了

call和apply的区别

call()方法和apply()方法的作用相同,他们的区别在于接收参数的方式不同。对于call(),第一个参数是this值没有变化,变化的是其余参数都直接传递给函数。(在使用call()方法时,传递给函数的参数必须逐个列举出来。使用apply()时,传递给函数的是参数数组)如下代码做出解释:

function add(c, d){
	return this.a + this.b + c + d;
}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

你可能感兴趣的:(javascript)