通俗易懂------this指向
因为JavaScript 中this 是在运行期进行绑定的,因此JavaScript 中this 关键字具备多重含义。
具体在实际应用中,this的指向大致可以分为下面4种。
- 作为对象的方法调用 obj.a()
- 作为普通函数调用 a()
- 构造函数调用 var b = new a();
- function.prototype.call或function.prototype.apply调用
作为对象的方法调用 和 作为普通函数调用
window.a = 2;
var obj = {
a:1,
getA:function(){
console.log(this.a);
}
}
obj.getA(); //输出1,作为对象的方法调用,this指向当前对象
var x = obj.getA;
x(); //输出2,作为普通函数调用,this全部指向window对象。
注意,不管x之前是obj.getA,还是其他某个对象的属性,只要最后是以x(),fun()这种方式调用的,均视为普通函数调用,此时this指向window对象
但是,在ECMAScript5的strict模式下,作为函数调用的 this被规定不会指向全局对象
window.a = 2;
var obj = {
a:1,
getA:function(){
"use strict"
console.log(this.a);
}
}
var x = obj.getA;
x(); //underfined
作为构造函数调用
var Myclass = function(){
this.name = 'beidan';
}
var obj = new Myclass();
console.log(obj.name);//beidan var Myclass = function(){
this.name = 'beidan';
return{ //显示的返回一个对象,注意!既要是显示,即有return,也要是对象{}
name:'test'
}
}
var obj = new Myclass();
console.log(obj.name);//test
作为function.prototype.call或function.prototype.apply调用
- 理解call,apply
call,apply都是为了改变函数体内部 this 的指向。例如,fun1.call()或者fun1.apply() 都是为了改变fun1函数内部的this指向。
二者的作用完全一样,只是接受参数的方式不太一样。
- call,apply的用途
document.getElementById('div1').onclick = function(){
console.log(this.id); //div1
var func = function(){
console.log(this.id);
}
func(); //通过普通函数调用,this指向window,输出undefined
}
document.getElementById('div1').onclick = function(){
console.log(this.id); //div1
var func = function(){
console.log(this.id);
}
func.call(this); //使用call,使func函数内部的this指向当前的函数对象,输出div1
}
2.模拟继承(借用其他对象的方法)
- 例子一:其他对象(banana)借用apple中的say方法
function fruits() {}
fruits.prototype = {
color: "red",
say: function() {
console.log("My color is "+ this.color);
}
}
var apple = new fruits;
apple.say(); //My color is red
但是,如果我们还有其它 2个对象 banana= {color : "yellow"} ,orange = {color:‘orange’},想使用say方法,但是又不想对它们重新定义say方法。
banana = {
color: "yellow"
};
orange = {color:‘orange’};
apple.say.call(banana); //My color is yellow
apple.say.apply(orange ); //My color is orange
也就是说,当一个 object 没有某个方法(本例子中banana没有say方法),但是其他的有(本例子中apple有say方法),我们可以借助call或apply用其它对象的方法来操作。
- 例子二:获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //
maxNumbers = Math.max.call(Math,5, 458 , 120 , -215, 666); //
number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。
以上就是this在JavaScript中不同情况下的指向。
如果这篇文章对你有帮助,就给我一点赞赏吧~~~
通俗易懂------this指向的更多相关文章
- 通俗易懂浅谈理解ES6类this不同指向问题
1. class Btn{ //定义的一个类 constructor(id){ // constructor是一个构造函数,是一个默认方法,通过 new 命令创建对象实例时,自动调用该方法.一个类必须 ...
- 关于一个通俗易懂的FFT的C语言实现教程
找到一个通俗易懂并且神奇并且有趣的FFT算法C语言实现教程:http://www.katjaas.nl/FFTimplement/FFTimplement.html 只要对矩阵比较熟悉就能在教程的辅助 ...
- JS中OOP之模拟封装和继承和this指向详解
大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...
- 常用DOS命令之通俗易懂篇
目录 常用DOS命令之通俗易懂篇 Arp 命令 Assoc 关联 At 计划服务 Attrib 属性 Cd=chdir 目录 Cipher Cls 清屏 Color 颜色 Comp 比较 Compac ...
- 1. 通俗易懂解释知识图谱(Knowledge Graph)
1. 通俗易懂解释知识图谱(Knowledge Graph) 2. 知识图谱-命名实体识别(NER)详解 3. 哈工大LTP解析 1. 前言 从一开始的Google搜索,到现在的聊天机器人.大数据风控 ...
- 通俗易懂,C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中,通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件
通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二). 前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...
- 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? .Net Web开发技术栈
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念 ...
- 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?(转)
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?(转) 一.总结 一句话总结:.NET是一个平台,包含多种语言,比如(C#.Visual Basic.C++/C ...
- 3万字长文概述:通俗易懂告诉你什么是.NET?什么是.NET Framework?什么是.NET Core?
[转载]通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的 ...
随机推荐
- TCP 连接的 TIME_WAIT 过多 导致 Tomcat 假死
最近系统二次开发之后,发现使用的 Tomcat 7 会经常假死.前端点击页面无任何反应,打开firebug,很多链接一直在等待服务器的反应.查看服务器的状态,CPU占用很少,最多不超过10%,一般只有 ...
- APP原型设计工具,哪家强?转自知乎
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:李志超 链接:http://www.zhihu.com/question/20403141/answer/25329730 ...
- 微信公众平台应用开发:方法、技巧与案例--柳峰,Java语言版本
他本人的博客:http://blog.csdn.net/lyq8479 作者简介: 刘运强,网名“柳峰”,资深微信公众平台应用开发工程师,国内微信公众平台应用开发的先驱之一,项目经验丰富.他还是一位资 ...
- Aptana studio 3前端开发编辑器推荐
直接进入主题,先上图 这就是我Apatana studio 3的默认界面,推荐此工具的原因主要有以下几点: 1.可以集成Emmet,快速编写HTML+CSS,做到效率倍增. 2.Jquery 自动完成 ...
- 计算几何--判断两条线段相交--poj 2653
Pick-up sticks Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 8862 Accepted: 3262 De ...
- listview中OnItemClick方法各个参数的作用
OnItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) 1.arg0,arg2 m_listview.setOnI ...
- 使用reportNG替换testNG的默认报告
关于reportng的官网介绍:http://reportng.uncommons.org/ 1.下载reportNG的jar包:http://pan.baidu.com/s/1hq5znLU 2.r ...
- 深度优先搜索 codevs 1065 01字符串
codevs 1065 01字符串 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 输出仅有0和1组成的长度为n的字符串,并且 ...
- 两道相似KMP题
1.POJ 3450 Coporate Identity 这两题的解法都是枚举子串,然后匹配,像这种题目以后可以不用KMP来做,直接字符串自带的strstr函数搞定,如果字符串未出现,该函数返回NUL ...
- 云盘WEB资料下载链接
入门三板斧:http://www.cnblogs.com/jikey/p/3613082.html 入门看这个:http://pan.baidu.com/s/1pJqJvAV 入门JS视频:http: ...