博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Java程序猿的JavaScript学习笔记(3——this/call/apply)
阅读量:6274 次
发布时间:2019-06-22

本文共 2942 字,大约阅读时间需要 9 分钟。

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

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

作者博客:

作者微博:

转载请取得作者允许

this

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

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

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

下面几种情况:

调用全局函数

看以下的代码:

代码段1:function UiObject(){    console.log(this.name || this.toString()); // 输出:[object Window]    console.log(this===window); // 输出:true}UiObject()
默觉得window调用,this为window。

通过对象调用

代码段2:function UiObject(){	this.render = function(str){		console.log('render this ',str,' by ' + this.toString());		console.log(this === UiObject);  // false		console.log(this === ui);	 // true	}}var ui = new UiObject();ui.render();

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

代码段3:function UiObject(){}UiObject.prototype = {	render : function(str){		console.log('render this ',str,' by ' + this.toString());		console.log(this === UiObject);  // false		console.log(this === ui);	   // true ,结果一样。谁调用。this指向谁	}};var ui = new UiObject();ui.render();
结果一样,在哪儿定义不重要,被谁调用才重要。有奶的就是娘,谁生的不重要,好现实...
再写段代码让这个特性更明显,例如以下:

代码段4:        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 οnclick='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将被指定为函数的调用者。看以下的样例。

代码段5:
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的值。

你可能感兴趣的文章
英国脱欧:3/4的技术初创公司将面临严峻时期
查看>>
JavaScript API 设计原则
查看>>
WiFi信号可进行隔墙观测 透过衣服观察人体轮廓
查看>>
蓝点数据携手北京大数据产业人才实训基地培养大数据人才
查看>>
数据价值无上限!Windows如何保护重要文件
查看>>
黑客大赛GeekPwn攻破主流厂商众多产品
查看>>
中国通信业抱团 加快布局5G时代
查看>>
创业公司做数据分析(四)ELK日志系统
查看>>
如何在Linux中压缩及解压缩.bz2文件
查看>>
数据为王的时代 大数据对消费金融的影响
查看>>
万事达启动“用你自己替代密码”计划
查看>>
阿里巴巴“NASA计划”新进展:一个世界纪录!
查看>>
Linux下使用USB网络
查看>>
5G标准化进程提速 射频器件市场空间将打开
查看>>
《分布式系统:概念与设计》一3.3.6 拥塞控制
查看>>
“烧烤模式”下 安防设备如何经得住考验?
查看>>
人工智能时代,语音技术怎么赚钱?
查看>>
美大选被攻击 未来选举要回归纸质选票?
查看>>
SCRM火了,SaaS服务再现新风口
查看>>
黑客站在ATM机面前就直接吐出钞票 如何做到的?
查看>>