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();//  123

由此可见，fn()执行时，函数里的this 指向全部对象window。

指定事件的this

再看下面这个例子：

window.onload = function(){
document.getElementById(“box”).onclick = function(){
alert(this.style.width);
};
}

运行弹出的是id为box元素的宽，表明这里的this指向的是当前元素。

不指定事件元素的时候this指定的是window，指定事件元素的时候，this指定当前发生事件的元素。

转载于:https://www.cnblogs.com/lingdublog/p/6475317.html

js中的this详解相关推荐

computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...
Js中apply方法详解说明
Js apply 方法详解我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了, ...
JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习首先,必须搞清楚在JS里面,函数 ...
JS中函数式编程详解版(FunctionalProgramming,FP)
函数式编程详解函数式编程的认识函数式编程前置知识函数是一等公民(First-class Function) 高阶函数闭包函数式编程基础纯函数 lodash 模块柯里化函数组合函子函 ...
JS中的showModelDialog详解和实例
1.<a href="#" οnclick="SeePic('${list.PATH}')"><font color="blue&q ...
JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前言学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于汇编语言这样的面 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
【JS中scrollHeight/Width详解（不加定位的情况下）】
scrollHeight和scrollWidth的详解一. 内容块Y轴上没有超出的情况下二.内容块Y轴上有超出的情况下 2.1 当 overflow-y: visible的情况 2.2 设置ove ...
JS中Location使用详解
javascript中 location用于获取或设置窗体的URL,并且可以用于解析URL,是BOM中最重要的对象之一,下面我们就来详细探讨下Location对象的使用. javascript中loc ...
前端基础知识点：JS中的参数传递详解
JS语法中的传递参数,对于初学者是一个非常重要的概念.很多小伙伴在学习"值传递"和"引用传递"时,会有不少烦恼.今天我们就来通过各种姿势全方位剖析JS中的值传递 ...

js中的this详解

默认的this

指定事件的this

js中的this详解相关推荐

最新文章

热门文章