js中的this详解
在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详解的更多相关文章
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- JS 中 this 关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...
- Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
- JS中navigator对象详解
<code class="language-html"><!doctype html> <html> <head> <meta ...
- js中Date()对象详解
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js中的逻辑运算符详解(||、&&、!)
视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...
- js中window对象详解以及页面跳转
1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...
- node.js中express-session配置项详解
官方地址:https://www.npmjs.com/package/express-session 作用:用指定的参数创建一个session中间件,sesison数据不是保存在cookie中,仅仅s ...
- js中的三目运算符详解
判断 javascript中的三目运算符用作判断时,基本语法为: expression ? sentence1 : sentence2 当expression的值为真时执行sentence1,否则执行 ...
随机推荐
- java9新特性-3-JDK 和 JRE 的改变
1.JDK 与 JRE 的关系 JDK :JavaDevelopmentKit (Java开发工具包) JRE :JavaRuntimeEnvironment (Java运行环境) 说明: J ...
- benchmark测试PostgreSQL数据库OLTP性能
1,安装配置PostgreSQL数据库 2,下载地址:http://sourceforge.net/projects/benchmarksql/?source=navbar Required:JDK7 ...
- 给 “rm” 命令添加个“垃圾桶”
作者: 2daygeek 译者: LCTT amwps290 人类犯错误是因为我们不是一个可编程设备,所以,在使用 rm 命令时要额外注意,不要在任何时候使用 rm -rf *.当你使用 rm 命令时 ...
- PHP实现杨辉三角形
<?php /**** * 杨辉三角形:我的实现方式. * 下标 * 1 0 * 1 1 1 循环上一行数据1次,计算后结果追加到当前行末尾 * 1 2 1 2 * 1 3 3 1 3 * 1 ...
- VUE框架学习——脚手架的搭建
#我的VUE框架学习 题记:初识VUE,觉得VUE十分的不错,故决定去深入的了解学习它,工欲善其事,必先利其器,下面是我搭建vue环境的过程! #一.项目搭建及初始化 1.安装:node.js:去官网 ...
- 洛谷2863 [Usaco06JAN]牛的舞会
题目描述 约翰的N (2 <= N <= 10,000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别 上鲜花,她们要表演圆舞. 只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一 ...
- 【C#】C#托付和事件的实例解说
using System; namespace delegate_event { // 定义一个猫类 class Cat { // 定义一个名字字段 private string name; // 创 ...
- 浏览器Console创建canvas base64 png图片
火狐中运行:console.log var canvas = document.createElement('canvas'); canvas.width =1 canvas.height =1 ca ...
- 今天了解了些redis和memcached的知识
提取于http://www.cnblogs.com/wupeiqi/articles/5132791.html 感谢博主 使用Redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于Hash ...
- 玲珑学院 1010 - Alarm
1010 - Alarm Time Limit:1s Memory Limit:128MByte DESCRIPTION Given a number sequence [3,7,22,45,116, ...