Java程序猿的JavaScript学习笔记(3——this/call/apply)

Java程序猿的JavaScript学习笔记(3——this/call/apply)

大家好,又见面了,我是全栈君。

计划按例如以下顺序完毕这篇笔记:

  1. Java程序猿的JavaScript学习笔记(1——理念)
  2. Java程序猿的JavaScript学习笔记(2——属性复制和继承)
  3. Java程序猿的JavaScript学习笔记(3——this/call/apply)
  4. Java程序猿的JavaScript学习笔记(4——this/闭包/getter/setter)
  5. Java程序猿的JavaScript学习笔记(5——prototype)
  6. Java程序猿的JavaScript学习笔记(6——面向对象模拟)
  7. Java程序猿的JavaScript学习笔记(7——jQuery基本机制)
  8. Java程序猿的JavaScript学习笔记(8——jQuery选择器)
  9. Java程序猿的JavaScript学习笔记(9——jQuery工具方法)
  10. Java程序猿的JavaScript学习笔记(10——jQuery-在“类”层面扩展)
  11. Java程序猿的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
  12. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
  13. Java程序猿的JavaScript学习笔记(13——jQuery UI)
  14. Java程序猿的JavaScript学习笔记(14——扩展jQuery UI)

这是笔记的第3篇,聊聊JavaScript中的this。还有两种调用函数的特殊方式:call 和 apply。


作者博客:http://blog.csdn.net/stationxp

作者微博:http://weibo.com/liuhailong2008

转载请取得作者允许


this

JavaScript中的this和Java中的this差别较大。

学过Java的童鞋请忘掉你知道的关于this的一切。

JavaScript中的this是依赖于函数的。表示函数的调用者。有两个意思:第一,this不是函数本身;第二。函数被调用的时候才决定this指向谁。

下面几种情况:

调用全局函数

看以下的代码:

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段1:</strong></span></span>function UiObject(){    console.log(this.name || this.toString()); // 输出:[object Window]    console.log(this===window); // 输出:true}UiObject()

默觉得window调用,this为window。

通过对象调用

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段2:</strong></span></span>function UiObject(){	this.render = function(str){		console.log('render this ',str,' by ' + this.toString());		console.log(this === UiObject);  // false		<strong>console.log(this === ui);	 // true</strong>	}}var ui = new UiObject();ui.render();

假设函数在原型中定义呢?

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段3:</strong></span></span>function UiObject(){}UiObject.prototype = {	render : function(str){		console.log('render this ',str,' by ' + this.toString());		console.log(this === UiObject);  // false		<strong>console.log(this === ui);	   // true</strong> ,结果一样。谁调用。this指向谁	}};var ui = new UiObject();ui.render();

结果一样,在哪儿定义不重要,被谁调用才重要。有奶的就是娘,谁生的不重要,好现实…

再写段代码让这个特性更明显,例如以下:

<span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段4:</strong></span></span>        function hunt(){		console.log('To ',this.name + ', my dear lord! I will hunt ',this.target,' as your wish.');		console.log(this === hailong);		console.log(this === haichao);	}		var hailong = {		name : 'Lord Hailong',		target : 'deer'	};		var haichao = {		name : 'Lord Haichao',		target : ' Little-Japs '	};		hailong.hunt = hunt;	// 输出:To Lord Hailong, my dear lord! I will hunt deer as your wish.	// 输出:true   --  console.log(this === hailong);	// 输出:false  --  console.log(this === haichao);	hailong.hunt();		haichao.kill = hunt;	// 输出:To Lord Haichao, my dear lord! I will hunt Little-Japs as your wish.	// 输出:false  --  console.log(this === hailong);	// 输出:true   --  console.log(this === haichao);	haichao.kill();

有奶就是娘,谁调用。this就指向谁。

被事件调用

被事件调用分几种情况:

1、<div onclick=’theFunc()’>

2、oDiv.onclick = theFunc ;

第1中情况,this指向window,第2中情况,this指向oDiv。

arguments

和this类似,函数被调用时。argmuments将被赋值为传入的传入的參数数组。

能够通过 arguments.length获得传入參数的个数。能够通过arguments[idx]获得传入參数的值。


基于this的特性,我们须要特殊的方法灵活控制this的指向。

JavaScript为我们提供了call和apply两个方法。

call

在函数调用的时候。通过call方法,能够指定调用者。从而实现了对this的灵活绑定。语法例如以下:

func.call(invokerObject);

func是函数。invokerObject将被指定为函数的调用者。看以下的样例。

<pre name="code" class="javascript"><span style="background-color: rgb(255, 255, 153);"><span style="color:#FF0000;"><strong>代码段5:</strong></span></span>

function hunt(){}var hailong = {name : ‘Lord Hailong’,target : ‘deer’};var haichao = {name : ‘Lord Haichao’,target : ‘ Little-Japs ‘};function printName(){console.log(‘Name:’,this.name);}printName.call(hunt);printName.call(hailong);printName.call(haichao);


定义好printName方法后。希望能应用到hunt、hailong、haichao几个对象上。通过call函数就可以实现。printName函数中的this成功指向了
通过call參数传入的对象。

printName.call(hailong)

等同于以下的语句:

hailong.printName = printName;

hailong.printName();

delete haiong.printName;

apply

通过call方法调用函数。假设有參数,从call方法的第二个參数開始传入。语法例如以下:

function func(p1,p2,p3){}

func.call(targetObject,p1,p2,p3)

apply方法与call方法实现同样的功能,不同的是。当传入參数时,全部的參数组成一个数组,作为apply的第二个參数传入,语法例如以下:

func.apply(targetObject,[p1,p2,p3])

同arguments结合使用时,apply方法更方便。


小结

  1. 搞清楚this的含义。是基础中的基础。
  2. 通过call、apply能够灵活绑定this的值。


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/116400.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java堆和栈的区别和联系_数据结构堆和栈的区别

    java堆和栈的区别和联系_数据结构堆和栈的区别1、概述在Java中,内存分为两种,一种是栈内存,另一种就是堆内存。2、堆内存1.什么是堆内存?堆内存是是Java内存中的一种,它的作用是用于存储Java中的对象和数组,当我们new一个对象或者创建一个数组的时候,就会在堆内存中开辟一段空间给它,用于存放。2.堆内存的特点是什么?第一点:堆其实可以类似的看做是管道,或者说是平时去排队买票的的情况差不多,所以堆内存的特点就是:先进先出,后进后出,也

    2022年9月4日
    4
  • Shell:export命令

    Shell:export命令https://www.cnblogs.com/tinywan/p/7224011.html一、Windows环境变量  1、在Windows系统下,很多软件安装都需要配置环境变量,比如安装jdk,如果不配置环境变量,在非软件安装的目录下运行javac命令,将会报告找不到文件,类似的错误。  2、那么什么是环境变量?简单说,就是指定一个目录,运行软件的时候,相关的程序将会按照该目录寻找相关文件。设置变量对于一般人最实用的功能就是:不用拷贝某些dll文件到系统目录中了,而path

    2022年9月7日
    0
  • 【Python基础】PyCharm配置Python虚拟环境详解[通俗易懂]

    【Python基础】PyCharm配置Python虚拟环境详解[通俗易懂]目录一、基础介绍1.1基础介绍1.2配置现状二、步骤详解2.1新建项目2.2查看虚拟环境2.3安装需要的包2.4验证安装三、一、基础介绍1.1基础介绍Python的版本众多,而且其内部的库Package也五花八门,这就导致在同时进行几个项目时,对库的依赖存在很大的问题。这个时候就牵涉到对Python以及依赖库的版本管理,方便进行开发,就需要进行虚拟环境的配置。一方面:我们初学python的时候,下载第三方库的时候其实是在全局或者是整个系统中都可以使用,但对于一些项目来说,需要的库可能是

    2022年8月29日
    1
  • [Ubuntu] How to install memcache in Ubuntu 10.10 with xampp

    [Ubuntu] How to install memcache in Ubuntu 10.10 with xamppWhatineedtodownload:zlib-1.2.5.tar.gzhttp://zlib.net/zlib-1.2.5.tar.gzlibxml2-2.7.2.tar.gzftp://xmlsoft.org/libxml2/libxml2-2.7.2.tar.gzphp-5.3.4.tar.bz2http://ar.php.net/distributions/php-5.3.4.t…

    2022年5月29日
    24
  • 海量数据查询方案mysql_Mysql海量数据存储和解决方案之二—-Mysql分表查询海量数据…[通俗易懂]

    关键词:分库分表,路由机制,跨区查询,MySQL数据变更,分表数据查询管理器与线程技术的结合,Cache前面已经讲过Mysql实现海量海量数据存储查询时,主要有几个关键点,分表,分库,集群,M-S,负载均衡。其中分库分表是很重要的一点。分库是如何将海量的Mysql数据放到不同的服务器中,分表则是在分库基础上对数据现进行逻辑上的划分。数据划分可有多种方式,找到一个主键后,可以按号段分,也可以Has…

    2022年4月14日
    68
  • VirtualBox命令行VBoxManage创建与管理虚拟机教程

    VirtualBox命令行VBoxManage创建与管理虚拟机教程VBoxManageisthecommand-lineinterfacetoVirtualBox.前言本文要操作的虚拟机信息如下:名称:UbuntuRDHome镜像名称:ubuntu-16.04.3-server-amd64.iso网络连接:桥接主机环境:$uname-a命令输出:LinuxUbuntuServer

    2022年6月8日
    27

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号