在web前端开发中,javascript中的this和其他的JAVA,C#等大型语言一样,是一个重要概念。但是要注意的是,在javascript中,由于 javascript的动态性,this的指向在运行时才确定,这就需要我们掌握它的工作原理。

零度接下来来分析分析。

默认的this

Javascript 下,所有的属性都默认为window对象所有,所以说this也不例外,看下面的例子,先来个热身:

var a = “123”;
function fn(){
var a = “345”;
alert(this.a);//与window.a相同
}
fn();//

由此可见,fn()执行时,函数里的this 指向全部对象window。

指定事件的this

再看下面这个例子:

window.onload = function(){
document.getElementById(“box”).onclick = function(){
alert(this.style.width);
};
}

运行弹出的是id为box元素的宽,表明这里的this指向的是当前元素。

不指定事件元素的时候this指定的是window,指定事件元素的时候,this指定当前发生事件的元素。

js中的this详解的更多相关文章

  1. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  2. JS 中 this 关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...

  3. Bom和Dom编程以及js中prototype的详解

    一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

      前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...

  5. JS中navigator对象详解

    <code class="language-html"><!doctype html> <html> <head> <meta ...

  6. js中Date()对象详解

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  7. js中的逻辑运算符详解(||、&&、!)

    视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...

  8. js中window对象详解以及页面跳转

    1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...

  9. node.js中express-session配置项详解

    官方地址:https://www.npmjs.com/package/express-session 作用:用指定的参数创建一个session中间件,sesison数据不是保存在cookie中,仅仅s ...

  10. js中的三目运算符详解

    判断 javascript中的三目运算符用作判断时,基本语法为: expression ? sentence1 : sentence2 当expression的值为真时执行sentence1,否则执行 ...

随机推荐

  1. AngularJs轻松入门(一)创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

  2. net实现压缩功能

    public static class Compressor { public static byte[] Compress(byte[] data) { using (MemoryStream ou ...

  3. ReactiveCocoa 中 RACSignal 是如何发送信号的

    https://juejin.im/post/5829f4c3570c350063c436ac 前言 ReactiveCocoa是一个(第一个?)将函数响应式编程范例带入Objective-C的开源库 ...

  4. PyCharm 2017 Mac 免注册版破解安装说明

    PyCharm 2017 Mac 免注册版破解安装说明 下载完成安装包后,双击打开,将左侧拖拽至右侧应用程序,默认安装. 打开软件,在License server address中填入[http:// ...

  5. yii2.0缓存篇之页面缓存

    页面缓存: 如果整个页面都不会发生改变,就可以使用页面缓存缓存整个页面. public function behaviors(){            //此方法[也叫行为]会提前控制器内其他方法执 ...

  6. linux指令快速复制粘贴[龟速更新中]

    由于有经常碰到要输入linux指令,但是却忘记了的情况.在家里我把常用的命令放到Xshell的快速命令集,但是在很多情况下不在家,可能用的他人电脑,以及在非Win环境下使用ssh时没有xshell使用 ...

  7. HDU——T 2818 Building Block

    http://acm.hdu.edu.cn/showproblem.php?pid=2818 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  8. POJ 1258 Agri-Net (最小生成树+Prim)

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39820   Accepted: 16192 Descri ...

  9. android系统又一次刷ROM简记(一)

    当须要对android系统进行大刀阔斧的改造的时候,应该清晰的了解android各个image的组成才干做到庖丁解牛. 首先在android烧写过程中须要烧写的文件主要包含uboot.bin\boot ...

  10. n阶幻方问题

    转载自:http://blog.csdn.net/fengchaokobe/article/details/7437767 目录        第一节 n阶幻方问题       第二节 由n阶幻方引发 ...