bind、apply、call改变this指向的调用

2021-03-30 17:38发布

bind、apply、call改变this指向的调用

一:this指向

this的指向,是当我们调用函数时确定的,调用方式的不同 决定了this指向的不同,一般是指向函数的调用者

调用方式this指向
普通函数 调用window
构造函数调用实例对象 原型对象里面的方法也是指向实例对象
对象方法调用该方法所属对象
事件绑定方法绑定事件对象
定时器函数window
立即执行函数window

二:改变this指向

call和apply都可以改变this指向,不过apply()的第二个参数是散列分布,call()则可以是一个数组

apply() 方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是 Array 的实例,也可以是arguments 对象。

call() 方法与 apply() 方法的作用相同,它们的区别仅在于接收参数的方式不同。对于 call()方法而言,第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用call() 方法时,传递给函数的参数必须逐个列举出来.

call方法:

语法:call(thisObj,Object)

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

说明:

call 方法可以用来代替另一个对象调用一个方法。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();


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()函数。objectSayColor()函数的this值等于o,因此即使是在全局作用域中调用这个函数,也会看到blue。


以上所述JS中改变this指向的方法(call和apply、bind),希望对大家的学习有帮助!