在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. 一般处理程序cookie和session+末尾的多选框,下拉框

    登录页面<body><form action="Login.ashx" method="post"><input type=&qu ...

  2. <Sicily>Huffman coding

    一.题目描述 In computer science and information theory, a Huffman code is an optimal prefix code algorith ...

  3. iview 分页的案例

    //html部分 //js部分

  4. python中修改函数内部的变量会发生什么

    最近写python遇到个函数内部变量使用外部变量的问题,现在总结下吧 #!/usr/bin/env python a = 100def su(): a = a + 1 print(a) s = su( ...

  5. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  6. myisam和innodb的qubie

    1.Myisam 支持锁表,innoDB 支持行锁. 2.innoDB 和 BDB 支持事务. 3.Myisam 与 innoDB 索引的区别:      Myisam 无论是主键索引还是其他索引,索 ...

  7. jumpserver 安装python 报错

    环境centos7.5 pip3 insatll ./python-gssapi-0.6.4.tar.gz  报错 Command "python setup.py egg_info&quo ...

  8. docker操作大全

    docker 常用操作方法 查看docker版本docker version 搜索镜像docker serach 镜像名称 拉去镜像docker pull 镜像名称 查看本地镜像仓库信息docker ...

  9. rsync---远程数据同步工具

    rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而 ...

  10. 【习题 8-20 UVA-1620】Lazy Susan

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现,如果把连续4个数字进行一次翻转的话. 假设这连续的4个数字的逆序数为x; 那么翻转过后,逆序数就会变成6-x; (最多6个逆 ...