在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. spring boot整合mail

    1.添加依赖 </dependency> <dependency> <groupId>org.springframework.boot</groupId> ...

  2. 继承—Monkey

    public class Monkey { public void Monkey(String s){ } public void speak(){ System.out.println(" ...

  3. java 通过httpclient调用https 的webapi

    java如何通过httpclient 调用采用https方式的webapi?如何验证证书.示例:https://devdata.osisoft.com/p...需要通过httpclient调用该接口, ...

  4. UI Framework-1: UI Development Practices

    UI Development Practices Guidelines Principles for developing for Chrome. These best practices cente ...

  5. ubuntu18.04安装dash-to-dock出错的问题

    之前在安装dash-to-dock出现了这种错误: TypeError: ExtensionUtils.initTranslations is not a function Stack trace:i ...

  6. 洛谷P1164 小A点菜 && caioj 1410 动态规划1:点菜(背包方案问题)

    方程很简单 f[0] = 1 f[j] += f[j-w[i]] #include<cstdio> #define REP(i, a, b) for(int i = (a); i < ...

  7. HDU 2253 Longest Common Subsequence Again

    其实这个题我还不会,学长给了一个代码交上去过了,据说用到了一种叫做位压缩的技术,先贴代码吧,以后看懂了再来写 #include <stdio.h> #include <string. ...

  8. HTML学习----------DAY2第四节

    HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...

  9. 第6章8节《MonkeyRunner源代码剖析》Monkey原理分析-事件源-事件源概览-小结

    本章我们重点环绕处理网络过来的命令的MonkeySourceNetwork这个事件源来阐述学习Monkey是怎样处理MonkeyRunner过来的命令的.以下总结下MonkeyRunner从启动Mon ...

  10. C++学习笔记11-面向对象2

     1.  仅仅能初始化直接基类 一个类仅仅能初始化自己的直接基类.直接就是在派生列表中指定的类.假设类C 从类B 派生,类B 从类A 派生,则B 是C 的直接基类.尽管每一个C 类对象包括一个A 类部 ...