在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. Where to Store your JWTs – Cookies vs HTML5 Web Storage--转

    原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...

  2. nginx 配置若干问题

    配置nginx,遇到的几个小问题: 1. 报错信息: # nginx -t nginx: [warn] conflicting server name , ignored 分析解决: 配置文件中,重复 ...

  3. 高手过愚人节 Manancher模板题_双倍经验

    Code: #include <cstdio> #include <algorithm> #include <cstring> #define setIO(s) f ...

  4. JavaScript笔记(1)

    JS前导: ECMA欧洲计算机制造者协会 ECMA-262 (ES5规范) ECMA-404(Json规范) wsc定义HTML.CSS.DOM规范 计算机程序分为: cpu密集(用于计算) I/O密 ...

  5. MPI对道路车辆情况的Nagel-Schreckenberg 模型进行蒙特卡洛模拟

    平台Ubuntu 16.04,Linux下MPI环境的安装见链接:https://blog.csdn.net/lusongno1/article/details/61709460 据 Nagel-Sc ...

  6. Android ImageView设置图片原理(下)

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 写完上一篇后,总认为介绍的知识点不多,仅仅是一种在UI线程解析载入图片.两种在子线程解析,在UI线程 ...

  7. 【LeetCode-面试算法经典-Java实现】【032-Longest Valid Parentheses(最长有效括号)】

    [032-Longest Valid Parentheses(最长有效括号)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string contai ...

  8. Java基础算法

    i++;++i; i--;--i; int a=5;int b=a++;++放在后面,表示先使用a的值,a再加1b=5,a=a+1,a=6 int c=5;int d=++c;++放在前面,表示先将c ...

  9. c#时间差高精度检查

    两个时间差的高精度检查 static void Main(string[] args) { Console.WriteLine("开始时间:" + DateTime.Now.ToS ...

  10. selenium无法定位元素问题

    在用自动化测试工具selenium完成下载任务时,经常会遇到定位不到元素的情况,总结如下: 1.frame/iframe原因定位不到元素: 这个是最常见的原因,首先要理解下frame的实质,frame ...