在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. Design Doc: Session History for Out-of-Process iframes

    Design Doc: Session History for Out-of-Process iframes Charlie Reis, May 2014 This document outlines ...

  2. Linux常用命令及其英文全称

      alias:给命令起别名 awk = "Aho Weiberger and Kernighan" ,三个作者的姓的第一个字母 bash:GNU Bourne-Again She ...

  3. 共用体 union

    共用体是一种数据格式,能够存储不同的数据类型,但只能同时存储其中的一种类型. union one4all { int int_val; double double_val; long long_val ...

  4. 钓鱼WIFI的防范

    实际上,Wi-Fi接入点(AP).路由器和热点常常是高度暴露的攻击面.用户一不小心就有可能踏进攻击者设置的Wi-Fi陷阱,为企业造成信息泄露或经济损失. 如今Wi-Fi 6时代悄然到来,为高密海量无线 ...

  5. Laravel修炼:服务提供者

    前言   上一篇博客文章收集了关于Laravel服务容器的相关知识(传送门),我们知道了服务容器主要有绑定和解析两个重要功能,那么Laravel这个框架集齐了如此多功能,我们项目可能还需要另外引入一些 ...

  6. caioj 1111 树形动态规划(TreeDP)6: 皇宫看守 (状态设计)

    这道题的难点在于状态怎么设计 这道题要求全部都是安全的,所以我们做的时候自底向上每一个结点都要是安全的 结合前一题当前结点选和不选,我们可以分出四种情况出来 选 安全 选 不安全 不选 安全 不选 不 ...

  7. hbase源码系列(十二)Get、Scan在服务端是如何处理

    hbase源码系列(十二)Get.Scan在服务端是如何处理?   继上一篇讲了Put和Delete之后,这一篇我们讲Get和Scan, 因为我发现这两个操作几乎是一样的过程,就像之前的Put和Del ...

  8. spring AOP的Pointcut注解报错

    error at ::0 can't find referenced pointcut spring使用的是4.1.0,在项目中直接复制旧的aspectjweave.jar报错了 然后换成aspect ...

  9. easyui combobox 获取焦点

    easyui combobox 获取焦点 学习了:http://blog.csdn.net/foart/article/details/14446809 可以直接用: $('#spanZhudaoci ...

  10. void指针 (补充)

    void* 表示空指针.空指针不能直接使用,比如,指针的加减法操作(由于不知道类型,无法确定偏移的大小).某些情况下.不知道指针的类型,先用void*来取代,依据须要再强制转换成须要的指针类型使用. ...