最近一直在看js关于面向对象编程方面的东西,那么this肯定是需要一个被吃透 理解 同时灵活运用的对象

现在总结一下自己的学习成果:

我们可以用一句很形象的话来理解什么是this关键字?

"this关键字引用的是 包含它的那个函数 作为某个对象的方法 被调用时所属的那个对象",this会根据周围的环境改变而改变

这句话我用几个空格隔开分开作为理解的标准,下面引入一个实例,具体分析这句话的含义

var sound='Roar!';
function myOrneryBeast(){
alert(this);
this.style.color='green';//this指代的是window对象
alert(sound);
}

如果我们运行这段代码会发现this在火狐下会提示指向window对象,这是为什么?

我们对照上面的话一句句分析:

this关键字引用的是 包含它的那个函数(myOrneryBeast) 作为某个对象的方法(我们默认没有注明的函数全是在window对象下的) 被调用时所属的那个对象(myOrneryBeast)。

如果不信你运行window.myOrneryBeast()和执行myOrneryBeast()是一个效果,这样子就证明了myOrneryBeast()是window对象下的一个方法。

但是这句话其实接着执行到 this.style.color='green';//this指代的是window对象时会报错,因为this指向了window对象而window对象并没有style属性,所以会报错!

但是我们知道this的环境可以随着函数被赋值给不同的对象而改变,所以看下面这段代码

var sound='Roar!';
function myOrneryBeast(){
alert(this);
this.style.color='green';//this指代的是window对象
alert(sound);
}
window.onload=function(){
document.getElementById("a").onclick=myOrneryBeast;
}

html页面结构很简单一句话:<p id="a">js</p>

那么此时我们接着运行代码会发现此时火狐下的this对象指向了html的p元素

我们继续分析之前那句话看为什么会发生这种变化:

this关键字引用的是 包含它的那个函数(onclick) 作为某个对象(p)的方法 被调用时所属的那个对象(p),

此处要注意一个问题

window.onload=function(){
document.getElementById("a").onclick=myOrneryBeast;
//这一句会正常执行,因为可以将它理解为onclick方法引用了myOrneryBeast方法,更直接的可以理解为创建了一个名为onlick的函数,而这个函数就是myOrneryBeast,那么此时的this的引用是:包含它的那个函数(onclick),作为某个对象的方法(p),被调用时所属的那个对象(p);
/*细致的分析*/
/*document.getElementById("a").onclick=function(){
myOrneryBeast();
//这样子写会报错,表面上看貌似是this应该只想当前html对象,但是实际
这句话只是执行了myOrneryBeast函数,那么他的this对象仍然指向window;
}*/
}

所以在此我相信我已经把this解释的很清楚了!

那么在this中有个高级应用,是我接下来要说的,如果去自主修改this的环境指向,可以通过call()和apply()方法

请看下面这段代码

function doubleCheck(){
this.msg='Are you sure you want to leave?';
}/*创建一个构造函数*/
doubleCheck.prototype.sayGoodbye=function(){
return confirm(this.msg);
}/*构造函数的一个公共方法*/
var clickedLink=new doubleCheck();
var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].onclick= clickedLink.sayGoodbye;
}
}

我们希望的运行结果就是每次通过点击a链接,都能触发一个名为'Are you sure you want to leave?'的弹窗事件,但是如果你照这么写肯定会事与愿违,因为通过前面的讲解,我们应该清楚此时的this应该指向的是html中的a对象,如果还不清楚,请回看上面内容!!

但是我们实际希望的是this指向doubleCheck对象,那么这时候我们就可以通过call()方法和apply()方法来实现this环境的改变

格式为clickedLink.sayGoodbye.apply(clickedLink)<==>等价于clickedLink.sayGoodbye.call(clickedLink);

二者的区别在于函数参数的设置方法,一个是依次写出(call),并跟在第二参数之后,一个是写成数组形式(apply),传入第二参数,推荐使用后者,因为可以使用arguments对象作为传参方式

深入理解this对象的更多相关文章

  1. 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)

    本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...

  2. 理解javascript 对象,原型对象、闭包

    javascript作为一个面向对象的语言,理解 对象.原型.闭包.模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感 ...

  3. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  4. 理解Selection对象

    理解Selection对象 Selection对象的属性如下: var selection = window.getSelection(); console.log(selection); 通过上面的 ...

  5. Java基础之深入理解Class对象与反射机制

    深入理解Class对象 RRIT及Class对象的概念 RRIT(Run-Time Type Identification)运行时类型识别.在<Thinking in Java>一书第十四 ...

  6. 理解JavaScript对象

    理解JavaScript对象 对象是JavaScript的基本数据类型.对象是一种复合值:将很多值(原始值或者其他对象)聚合在一起. JavaScript对象不仅可以保持自有的属性,还可以从原型对象继 ...

  7. 深入理解Java对象

    深入理解Java对象(理清关系) 1.对象的创建过程: 所有创建过程如下所示: new 类名 根据new的参数在常量池中定位一个类的符号引用. 如果没有找到这个符号引用,说明类还没有被加载,则进行类的 ...

  8. 彻底理解Java对象与引用

    本文是最近在复习Java的时候读到的来自iteye博客的一篇文章,个人觉得写的很好,但貌似楼主许久没有维护该博客,害怕将来想回顾的时候找不到此文章,故在此重写文章,并修改了一些排版,有助于以后的学习查 ...

  9. 【入门必看】不理解「对象」?很可能有致命bug:简单的Python例子告诉你

    简介:越来越多的人要在学习工作中用到『编程』这个工具了,其中很大一部分人用的是Python.大部分人只是做做简单的科研计算.绘图.办公自动化或者爬虫,但-- 这就不需要理解「指针与面向对象」了吗? 在 ...

  10. 深入理解JSON对象

    × 目录 [1]语法规则 [2]stringify [3]parse[4]eval 前面的话 json(javascript object notation)全称是javascript对象表示法,它是 ...

随机推荐

  1. javascript常用的内置对象实用操作

    1.indexOf() 方法  -----这个方法比较常用 返回某个指定的字符串值在字符串中首次出现的位置 使用格式:stringObject.indexOf(substring, startpos) ...

  2. RDLC报表系列(五) 简单的图表-柱状图

    继续接上一篇的内容,本文主要是讲图标的内容,本文就是简单的图标,复杂的柱状图和折线图在下一文章中介绍. 数据源还是上文RDLC报表系列(四) 矩阵中的相同 1.还是继续使用demo2的文件

  3. 读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit

    读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit Author: Andrew Hunt ,David Thomas with Matt ...

  4. [置顶] 学习鸟哥的Linux私房菜笔记(6)——过滤器、输入输出及管道

    一.过滤器 Linux中的应用工具分为三种: 交互工具 过滤器 编辑器 能够接受数据,过滤再输出的工具,称之为过滤器 对过滤器和进程,存在着输入源与输出对象 二.输入.输出.重定向 输入:过滤器的数据 ...

  5. 在外部存储器上写入或读取文件(Environment类、File类的使用)

    1.Environment类 简单介绍:http://www.cnblogs.com/mengdd/p/3742623.html 详细介绍:http://www.2cto.com/kf/201408/ ...

  6. java版括号匹配检测

    做一个空栈,读入字符直到结尾.如果读入一个封闭符号,空栈时报错;非空时弹出栈尾字符,如果不匹配则报错.否则读入为开放字符,压入栈中.最后如果栈空,返回true. 其中用到MyStack类,详情请见 p ...

  7. 为程序指定运行时所在的CPU核

    internal class Program { [DllImport("kernel32.dll")] private static extern uint GetTickCou ...

  8. 基于IAP和Keil MDK的远程升级设计

    写在前面:三个周之前,我突然想写一个远程升级的程序.那个时候我只是大概知道IAP的意思是在应用编程,但怎么编,我还一无所知.我给自己定下一个个阶段目标,从最基础的代码一点点写起,解决一个又一个的问题. ...

  9. Delphi中的消息截获(六种方法:Hook,SubClass,Override WndProc,Message Handler,RTTI,Form1.WindowProc:=@myfun)good

    Windows是一个基于消息驱动的系统,因此,在很多时候,我们需要截获一些消息然后自己进行处理.而VCL系统又有一些特定的消息.下面对我所了解的delphi环境中截获消息进行一些总结.      就个 ...

  10. perl 一个简单的面向对象的例子

    <pre name="code" class="python">[root@wx03 wx]# cat x1.pm package x1; use ...