欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript中的this,call,apply使用及区别详解

程序员文章站 2023-11-24 16:37:10
学习起因: 在之前的javascript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛。遂专门花了一天,来弄懂javascript的t...

学习起因:

在之前的javascript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛。遂专门花了一天,来弄懂javascript的this,call,apply。

中途参考的书籍也很多,以《javascript设计模式与开发实践》为主,《javascript高级程序设计》、《你不知道的javascript》为辅。这三本书对我理解this,call,apply都起了很大的帮助。

this

首先,我们先讲述this。

在《javascript设计模式与开发实践》关于this的描述中,我认为有一句话切中了this的核心要点。那就是:

javascript的this总是指向一个对象
具体到实际应用中,this的指向又可以分为以下四种:

  1. 作为对象的方法调用
  2. 作为普通函数调用
  3. 构造器调用
  4. apply和call调用

接下来我们去剖析前3点,至于第4点的apply和call调用,会在call和apply部分详细讲解。

1.作为对象的方法调用

说明:作为对象方法调用时,this指向该对象。
举例:

/**
 * 1.作为对象的方法调用
 *
 * 作为对象方法调用时,this指向该对象。
 */

var obj = {
 a: 1,
 geta: function() {
  console.log(this === obj);
  console.log(this.a);
 }
};

obj.geta(); // true , 1

2.作为普通函数调用

说明:作为普通函数调用时,this总是指向全局对象(浏览器中是window)。
举例:

/**
 * 2.作为普通函数调用
 *
 * 不作为对象属性调用时,this必须指向一个对象。那就是全局对象。
 */

window.name = 'globalname';

var getname = function() {
 console.log(this.name);
};

getname(); // 'globalname'

var myobject = {
 name: "objectname",
 getname: function() {
  console.log(this.name)
 }
};

myobject.getname(); // 'objectname'

// 这里实质上是把function() {console.log(this.name)}
// 这句话赋值给了thename。thisname在全局对象中调用,自然读取的是全局对象的name值
var thename = myobject.getname;

thename(); // 'globalname'

3.构造器调用

说明:作为构造器调用时,this指向返回的这个对象。
举例:

/**
 * 3.作为构造器调用
 * 
 * 作为构造器调用时,this指向返回的这个对象。
 */

var myclass = function() {
 this.name = "lxxyx";
};

var obj = new myclass();

console.log(obj.name); // lxxyx
console.log(obj) // myclass {name: "lxxyx"}

但是如果构造函数中手动指定了return其它对象,那么this将不起作用。
如果return的是别的数据类型,则没有问题。

var myclass = function() {
 this.name = "lxxyx";
 // 加入return时,则返回的是别的对象。this不起作用。
 return {
  name:"returnothers"
 }
};

var obj = new myclass();
console.log(obj.name); // returnothers

4.call和apply

call和apply的用途一样。都是用来指定函数体内this的指向。

call和apply的区别

call:第一个参数为this的指向,要传给函数的参数得一个一个的输入。
apply:第一个参数为this的指向,第二个参数为数组,一次性把所有参数传入。

如果第一个参数为null,则this指向调用的本身。

1.改变this指向

说明:这是call和apply最常用的用途了。用于改变函数体内this的指向。
举例:

var name = "globalname"

var func = function() {
 console.log(this.name)
};

func(); // "globalname"

var obj = {
 name: "lxxyx",
 getname: function() {
  console.log(this.name)
 }
};

obj.getname.apply(window) // "globalname" 将this指向window
func.apply(obj) // "lxxyx" 将this指向obj

2.借用其它对象的方法

这儿,我们先以一个立即执行匿名函数做开头:

(function(a, b) {
 console.log(arguments) // 1,2
 // 调用array的原型方法
 array.prototype.push.call(arguments, 3);
 console.log(arguments) // 1,2,3
})(1,2)

函数具有arguments属性,而arguments是一个类数组。
但是arguments是不能直接调用数组的方法的,所以我们要用call或者apply来调用array对象的原型方法。
原理也很容易理解,比如刚才调用的是push方法,而push方法在谷歌的v8引擎中,源代码是这样的:

function arraypush() {
 var n = to_uint32(this.length); // 被push对象的长度
 var m = % _argumentslength(); // push的参数个数
 for (var i = 0; i < m; i++) {
  this[i + n] = % _arguments(i); // 复制元素
 }
 this.length = n + m; //修正length属性
 return this.length;
}

它只与this有关,所以只要是类数组对象,都可以调用相关方法去处理。

这部分内容比较复杂,再加上自己水平也不太够。所以推荐有条件的同学去购买相关书籍,或者等我的后续博客文章。

感想

通过对这部分的学习,算是加深了对javascript的理解。最直观的表现就是,去看一些优秀框架的源代码时,不再是被this,call,apply,bind绕的晕乎乎的。还是很开心的~

下一段时间,准备深入探索一下日常学习和使用的css。毕竟javascript学了,html和css也不能落下。