专栏首页小狼的世界This关键字的一些更新的理解

This关键字的一些更新的理解

this是Javascript中一个非常重要的关键字,正确的使用this能够使我们的程序效率得到提升。之前,对于this的认识还存在一些误区,今天看了一篇文章之后又有了一些深入的了解。

this的所有者。

 一般情况下,this是指向正在执行的函数本身,或者是,指向函数所属的对象。如

function dosomething(){
   this.style.color = 'red';
}

 函数执行时,this指向的就是window对象。而:

var dosomething = function(){
   this.style.color = 'red';
}

this是指向dosomething这个对象的;

很不幸,window对象没有style属性,所以这个dosomething这个函数直接执行就会导致错误,我们如果想正确应用this,我们就需要将函数复制到对象的属性上去。

例如:element.onclick = dosomething;

总结一下,通过复制正确使用this的例子有:

element.onclick = dosomething;
element.addEventListener('click',dosomething,false);
 
element.onclick = function(){ this.style.color = 'red'; };
<element onclick='javascript:this.style.color = red;' />

通过直接引用使用this的例子:

element.onclick = function(){ dosomething(); };
 
element.attachEvent('onclick',dosomething);
<element onclick = "dosomething();" />

这样的引用,this都会被指向window对象而导致,执行失败,所以在平时的应用中是要引起注意的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用PUT方式上传文件的方法研究

    虽然没有POST方法使用广泛,但是PUT方法却是向服务器上传文件最有效率的方法。POST上传文件时,我们通常需要将所有的信息组合成 multipart 传送过去...

    大江小浪
  • Python获取数字的二进制值

    Convert an integer number to a binary string prefixed with “0b”. The result is a...

    大江小浪
  • Ruby学习笔记

    Ruby语言中,以对象为基本单位,可以说所有的元素都是对象。按照之前对于面向对象程序的理解,对象是指包含了特定属性和方法集合的一组程序。对象由类来定义,具体的表...

    大江小浪
  • Flutter基础widgets教程-PopupMenuButton篇

    青年码农
  • React人机验证控件

    在使用React做前端,用户注册页面因为要短信验证,短信服务商要求加人机验证,于是我找到了 react-captcha-generator。

    fanzhh
  • Vue图片验证码-自定义组件高级版

    需要注意的是如果需要在一个页面上引用两个验证码组件,那么需要自己新建两个验证码模块组件,

    kirin
  • 关于蚂蚁庄园登山赛你可以还不知道的秘密!我也写一个康康!Cocos Creator 3D!

    监听TOUCH_MOVE事件控制小鸡左右移动,并要判断边界。注意手指移动的变化和实际屏幕看到的大小是不一样的,这是因为摄像机投影的原因。我是乘了一个系数,可能有...

    白玉无冰
  • canvas 弹球

    mySoul
  • Mybatis深入源码分析之Mapper与接口绑定原理源码分析

    紧接上篇文章:Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析,这里再来分析下,Mapper与接口绑定原理。

    须臾之余
  • 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/d...

    牧云云

扫码关注云+社区

领取腾讯云代金券