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


Posted in Javascript onJanuary 29, 2016

学习起因:

在之前的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也不能落下。

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
javascript实现tab响应式切换特效
Jan 29 #Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 #Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 #Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 #Javascript
Angular实现form自动布局
Jan 28 #Javascript
理解javascript中的MVC模式
Jan 28 #Javascript
jQuery获取checkbox选中的值
Jan 28 #Javascript
You might like
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
python自动化测试实例解析
2014/09/28 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python 处理数据的实例详解
2017/08/10 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
上班离岗检讨书
2014/01/27 职场文书
走进敬老院活动总结
2014/07/10 职场文书
网络技术专业求职信
2014/07/13 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书