深入理解JavaScript中的this关键字

在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。

对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂。而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象。

示例一、

 

var obj = {};
obj.x
= 100;
obj.y
= function(){ alert( this.x ); };
obj.y();
//弹出 100

这段代码非常容易理解,当执行 obj.y() 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会弹出100。

示例二、

 

代码
var checkThis = function(){
alert(
this.x);
};
var x = 'this is a property of window';

var obj = {};
obj.x
= 100;
obj.y
= function(){ alert( this.x ); };

obj.y();
//弹出 100
checkThis(); //弹出 'this is a property of window'

 

这里为什么会弹出 'this is a property of window',可能有些让人迷惑。在JavaScript的变量作用域里有一条规则全局变量都是window对象的属性。当执行 checkThis() 时相当于 window.checkThis(),因此,此时checkThis函数体内的this关键字的指向变成了window对象,而又因为window对象又一个x属性( 'this is a property of window'),所以会弹出 'this is a property of window'。

上面的两个示例都是比较容易理解的,因为只要判断出当前函数是作为哪个对象的方法调用(被哪个对象调用)的,就可以很容易的判断出当前this变量的指向。

 

this.x 与 apply()、call()

通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。

示例三:call()

代码
function changeStyle( type , value ){
this.style[ type ] = value;
}

var one = document.getElementById( 'one' );

changeStyle.call( one ,
'fontSize' , '100px' );

changeStyle(
'fontSize' , '300px'); //出现错误,因为此时changeStyle中this引用的是window对象,而window并无style属性。

注意changeStyle.call() 中有三个参数,第一个参数用于指定该函数将被哪个对象所调用。这里指定了one,也就意味着,changeStyle函数将被one调用,因此函数体内 this指向是one对象。而第二个和第三个参数对应的是changeStyle函数里的type和value两个形参。最总我们看到的效果是Dom元素 one的字体变成了20px。

示例四:apply()

代码
function changeStyle( type , value ){

this.style[ type ] = value;

}

var one = document.getElementById( 'one' );

changeStyle.apply( one , [
'fontSize' , '100px' ]);

changeStyle(
'fontSize' , '300px'); //出现错误,原因同示例三

apply的用法和call大致相同,只有一点区别,apply只接受两个参数,第一个参数和call相同,第二个参数必须是一个数组,数组中的元素对应的就是函数的形参。

 

无意义(诡异)的this用处

示例五:

代码
var obj = {
x :
100,
y :
function(){
setTimeout(
function(){ alert(this.x); } //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined
, 2000);
}
};

obj.y();

如何达到预期的效果

var obj = {
x :
100,
y :
function(){
var that = this;
setTimeout(
function(){ alert(that.x); }
,
2000);
}
};

obj.y();
//弹出100

事件监听函数中的this

var one = document.getElementById( 'one' );
one.onclick
= function(){
alert(
this.innerHTML ); //this指向的是one元素,这点十分简单..
};

 

转载于:https://www.cnblogs.com/jenry/archive/2010/12/08/1900572.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/549081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NET中使用Identity+CodeFirst+Jwt实现登录、鉴权

目录 前言 一、创建上下文类 1.自定义MyContext上下文类继承IdentityDbContext 2.在Program中添加AddDbContext服务 二、使用Migration数据迁移 1.在控制台中 依次使用add-migration 、updatebase 命令 2.如何修改表名 3.如何自定义字段 三、使用Identity实现登录、修改密码 …

LYNC解决方案巡展

今天有幸参加了微软的LYNC解决方案巡展,也捕捉到一些镜头。和大家分享一下。 酒店入口的易拉宝。这个酒店的海鲜自助不错,可惜不是旋转餐厅。 微软中国及大中华区信息工作者业务群峰鹰巩的演讲。不过是纯英文的,没有翻译。我觉得微软在这些方…

巨额流量费其实可以避免

巨额流量费其实可以避免<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />“史上最贵微博”一度被人们热议。说是运营商的错&#xff0c;而运营商也很无奈&#xff0c;本来这种事情就非运营商所能掌控的。其实天价流量看似可怕其实…

渗透测试岗位面试题(重点:渗透测试思路)

转载自公众号&#xff1a;alisrc 本文主要是讲解遇到问题的各思路解决方法&#xff0c;不仅可做为面试题查看&#xff0c;在实操中收到思绪的阻碍也可作为参考. 1、拿到一个待检测的站&#xff0c;你觉得应该先做什么&#xff1f;1)信息收集1&#xff0c;获取域名的whois信息,获…

使用Symantec Altiris 来监控 Dell 服务器 的 硬件

最近一直在折腾DMC 监控 Dell 服务器&#xff0c; Altiris 6 对Dell的监控策略会丰富很多 &#xff0c;到了 7 严重缩水&#xff0c;6的策略又不能转化成7 ~~比较郁闷~~ 唯有自己去写不过最算给我写完了大部分常用的~~ 主要是 电源、电压、风扇、温度、处理器、内存、电池 等等…

AD+DNS安装步骤详解

一.安装ADDNS准备工作&#xff08;虚拟机使用VPC&#xff09; 1.准备一台纯净版的Windows Server2003&#xff0c;并且设置只有一块网卡其属性为Local only。 2.配置网卡IP地址&#xff0c;一定要设置DNS服务器地址。若是第一台域控制器&#xff08;AD&#xff09;&#xff0c;…

第一个Android工程HelloAndroid

2019独角兽企业重金招聘Python工程师标准>>> 从这一节我们将正式进入Android编程世界,希望大家多多给我留言以及提些建议.首先我们打开Eclipse选择左上方的菜单[File->New->Project->Android Project]双击后会出现新建Android工程对话框,如下图所示:如果你…

IP地址 子网掩码 网关

A类、B类、C类IP地址区别 IP地址&#xff08;其实这个是IPV4&#xff09;是一个32位的二进制数&#xff0c;由四个八位字段组成。每个IP地址包括两部分&#xff1a;一部分为网络标识&#xff0c;一部分为主机标识。 A类地址前8位为网络标识。后24位为主机标识 B类地址前16位为网…

用FileZilla Server搭建ftp服务器

用FileZilla Server搭建ftp服务器 1.先在浏览器搜索 filezilla server 2.点开FileZilla软件的官网&#xff0c;下载该软件 3.下载完成后&#xff0c;按照操作流程一步步完成安装 4.打开filezilla Server软件&#xff0c;运行该软件&#xff0c;使FTP Server运行起来 5.…

不使用Vmware easy install 安装

进行了多次ubuntu的安装&#xff0c;始终发现ubuntu很多命令都没有安装到&#xff0c;用起来十分不方便&#xff0c;连最基本的init等命令都不具备&#xff0c;开始怀疑是版本的问题&#xff0c;尝试了多次&#xff0c;依旧无法解决。后来重新安装虚拟机的时候发现 选择Instal…

centos配置网络笔记

centos配置笔记 &#xff08;1&#xff09; 2021.1.12 hyp 1.使用net模式连接主机网络 1.1首先配置本机网络 在本地连接的属性中开启共享选择虚拟机网络VMnet8 配置VMnet8 的IPv4属性 1.2配置虚拟机网络设置 配置网络相关ip 2.centos便捷设置网络 在安装界面中开启网络…

ip,子网与子网掩码

ip&#xff0c;子网与子网掩码 2021.1.13 hyp 1.概念 IP是一个网络地址&#xff0c;一个网络地址可以划分多个网段称为子网&#xff0c;通过子网掩码可以计算出划分子网的主机数 2.子网 子网掩码为255.255.255.0 的IP地址192.168.2.5的可用主机地址数为254个 3.计算子网…

DZ论坛系统 UC_KEY拿webshell

关于DZ后台拿shell&#xff0c;很多同志都很苦恼是把&#xff0c;&#xff0c;不过最近外面看到一篇文章&#xff0c;应该 才出来的把&#xff0c;&#xff0c;这里给大家发出来把&#xff0c;。。 转载者&#xff1a;littleli 我们只要得到UC_KEY&#xff0c;提交数据就可以修…

部署虚拟环境安装Linux系统(Linux就该这么学)笔记

作者&#xff1a;chenhao 1.安装配置VM虚拟机 VMware WorkStation虚拟机软件是一款桌面计算机虚拟软件&#xff0c;让用户能够在单一主机上同时运行多个不同的操作系统。每个虚拟操作系统的硬盘分区、数据配置都是独立的&#xff0c;而且多台虚拟机可以构建为一个局域网。Linux…

子网划分基础知识

子网划分基础知识 子网划分 选定的子网掩码能创建多少个子网? 2^x个&#xff0c;其中x是子网掩码借用的主机位数。如&#xff1a;192.168.10.32/25&#xff0c;我们知道C类IP地址的默认子网掩码为&#xff1a;255.255.255.0&#xff0c;而这个IP地址的实际子网掩码是&#…

Android NDK--自己编写调用JNI

其实ubuntu中android开发环境的搭建也很简单 (1)下载android-sdk  (2)为Eclipse安装ADT&#xff0c;从help->Install New SoftWare进入&#xff0c;地址输入http://dl-ssl.google.com/android/eclipse/ 要进入NDK开发再下一个android-ndk就可以了 以上开发包均可以从http:…

IP地址 子网掩码 网络地址 广播地址 主机地址

MAC地址和IP地址 author&#xff1a;wangyifei 数据包的IP地址决定了数据包最终到达哪一个计算机&#xff0c;而MAC地址决定了该数据包下一跳由哪个设备接收&#xff0c;不一定是终点 子网掩码只有一个作用&#xff0c;就是将某个IP地址划分成网络地址和主机地址两部分。 同一…

ping 工具开发日记(1)

ping 工具开发日记&#xff08;1&#xff09; 2021.1.15 hyp 0.准备 开发语言&#xff1a;python 3.8 开发环境&#xff1a;windows 7 开发工具&#xff1a;pycharm 应用功能&#xff1a;1.能实现不同系统&#xff08;windows或者linux)下ping工具 测试 ​ 2.能实现导入…

VMware中的虚拟机如何配置上网(Linux系统为例)

作者&#xff1a;chenhao 虚拟机上网首先要了解VMware虚拟机中的三种网络模式 一、桥接模式&#xff1a; 该模式下物理网卡和虚拟网卡的IP地址处于同一个网段&#xff0c;子网掩码、网关、DNS等参数都相同。 2.本地物理网卡和虚拟网卡通过VMnet0虚拟交换机进行桥接&#xff0…

Silverlight与Flash在FF中的一些注意点

在HTML中&#xff0c;Silverlight、Flash以object标签的形式显示&#xff0c;如以下代码&#xff1a;View Code <object data"data:application/x-silverlight-2,"type"application/x-silverlight-2"></object>但是必须同时指定该object元素的…