深入理解this对象

最近一直在看js关于面向对象编程方面的东西,那么this肯定是需要一个被吃透 理解 同时灵活运用的对象

现在总结一下自己的学习成果:

我们可以用一句很形象的话来理解什么是this关键字?

"this关键字引用的是 包含它的那个函数 作为某个对象的方法 被调用时所属的那个对象",this会根据周围的环境改变而改变

这句话我用几个空格隔开分开作为理解的标准,下面引入一个实例,具体分析这句话的含义

var sound=‘Roar!‘;function myOrneryBeast(){
    alert(this);
    this.style.color=‘green‘;//this指代的是window对象
    alert(sound);
}

如果我们运行这段代码会发现this在火狐下会提示指向window对象,这是为什么?

我们对照上面的话一句句分析:

this关键字引用的是 包含它的那个函数(myOrneryBeast) 作为某个对象的方法(我们默认没有注明的函数全是在window对象下的) 被调用时所属的那个对象(myOrneryBeast)。

如果不信你运行window.myOrneryBeast()和执行myOrneryBeast()是一个效果,这样子就证明了myOrneryBeast()是window对象下的一个方法。

但是这句话其实接着执行到 this.style.color=‘green‘;//this指代的是window对象时会报错,因为this指向了window对象而window对象并没有style属性,所以会报错!

但是我们知道this的环境可以随着函数被赋值给不同的对象而改变,所以看下面这段代码

var sound=‘Roar!‘;
function myOrneryBeast(){
    alert(this);
    this.style.color=‘green‘;//this指代的是window对象
    alert(sound);
}
window.onload=function(){
    document.getElementById("a").onclick=myOrneryBeast;
}

html页面结构很简单一句话:<p id="a">js</p>

那么此时我们接着运行代码会发现此时火狐下的this对象指向了html的p元素

我们继续分析之前那句话看为什么会发生这种变化:

this关键字引用的是 包含它的那个函数(onclick) 作为某个对象(p)的方法 被调用时所属的那个对象(p),

此处要注意一个问题

window.onload=function(){
    document.getElementById("a").onclick=myOrneryBeast;
    //这一句会正常执行,因为可以将它理解为onclick方法引用了myOrneryBeast方法,更直接的可以理解为创建了一个名为onlick的函数,而这个函数就是myOrneryBeast,那么此时的this的引用是:包含它的那个函数(onclick),作为某个对象的方法(p),被调用时所属的那个对象(p);
    /*细致的分析*/
    /*document.getElementById("a").onclick=function(){
        myOrneryBeast();
        //这样子写会报错,表面上看貌似是this应该只想当前html对象,但是实际
        这句话只是执行了myOrneryBeast函数,那么他的this对象仍然指向window;
    }*/
}

所以在此我相信我已经把this解释的很清楚了!

那么在this中有个高级应用,是我接下来要说的,如果去自主修改this的环境指向,可以通过call()和apply()方法

请看下面这段代码

function doubleCheck(){
        this.msg=‘Are you sure you want to leave?‘;
}/*创建一个构造函数*/
doubleCheck.prototype.sayGoodbye=function(){
    return confirm(this.msg);
}/*构造函数的一个公共方法*/
var clickedLink=new doubleCheck();
    var links=document.getElementsByTagName(‘a‘);
    for(var i=0;i<links.length;i++){
        links[i].onclick= clickedLink.sayGoodbye;
        }
    }

我们希望的运行结果就是每次通过点击a链接,都能触发一个名为‘Are you sure you want to leave?‘的弹窗事件,但是如果你照这么写肯定会事与愿违,因为通过前面的讲解,我们应该清楚此时的this应该指向的是html中的a对象,如果还不清楚,请回看上面内容!!

但是我们实际希望的是this指向doubleCheck对象,那么这时候我们就可以通过call()方法和apply()方法来实现this环境的改变

格式为clickedLink.sayGoodbye.apply(clickedLink)<==>等价于clickedLink.sayGoodbye.call(clickedLink);

二者的区别在于函数参数的设置方法,一个是依次写出(call),并跟在第二参数之后,一个是写成数组形式(apply),传入第二参数,推荐使用后者,因为可以使用arguments对象作为传参方式

时间: 2024-10-26 11:43:04

深入理解this对象的相关文章

理解javascript 对象,原型对象、闭包

javascript作为一个面向对象的语言,理解 对象.原型.闭包.模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感兴趣,愿意和大家一起学习.此篇只是对自己认为的比较重要的知识点进行了说明,连贯性不是特别好,大家共同进步. 注意:文中中文并非英文翻译,只是个人理解. 理解面向对象 对象(object) An object is a collection of properties and has a single

深入理解JSON对象

深入理解JSON对象 前面的话 json(javascript object notation)全称是javascript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据.2001年由Douglas Crockford提出,目的是取代繁琐笨重的XML格式.本文将详细介绍关于json的内容 语法规则 JSON的语法可以表示以下三种类型的值 [1]简单值 简单值使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null 字符串必须使用双引号

【java】理解java对象序列化

关于Java序列化的文章早已是汗牛充栋了,本文是对我个人过往学习,理解及应用Java序列化的一个总结.此文内容涉及Java序列化的基本原理,以及多种方法对序列化形式进行定制.在撰写本文时,既参考了Thinking in Java, Effective Java,JavaWorld,developerWorks中的相关文章和其它网络资料,也加入了自己的实践经验与理解,文.码并茂,希望对大家有所帮助.(2012.02.14最后更新) 1. 什么是Java对象序列化 Java平台允许我们在内存中创建可

深入理解Java对象的创建过程:类的初始化与实例化

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 深入理解Java对象的创建过程:类的初始化与实例化 - Rico's Blogs - 博客频道 - CSDN.NET Rico's Blogs 潜心修炼,成为一个更好的人. 目录视图 摘要视图 订阅 [活动]2017 CSDN博客专栏评选 &nbsp [5月书讯]流畅

理解原型对象

理解原型对象: 创建函数的时候,会为该函数创建一个prototype属性,这个属性指向函数的原型对象.默认情况下所有的原型对象都会获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针. 自己的理解,函数是一个对象 ,原型对象也是一个对象,我们在创建函数的时候就会自动为该函数创建一个原型对象,这两个对象怎么关联呢,在创建函数的时候默认就为函数创建了一个属性prototype(其实是指针)这个属性指向原型对象.那么这样函数就和他的原型对象关联起来了.那么这是函

More Effective C++----(19)理解临时对象的来源

Item M19:理解临时对象的来源 当程序员之间进行交谈时,他们经常把仅仅需要一小段时间的变量称为临时变量.例如在下面这段swap(交换)例程里: template<class T> void swap(T& object1, T& object2) { T temp = object1; object1 = object2; object2 = temp; } 通常把temp叫做临时变量.不过就C++而言,temp根本不是临时变量,它只是一个函数的局部对象.(一切事物皆对象

kubernetes概述之深入理解pod对象

一.深入理解Pod对象 1.Pod容器的分类 Pod的概念: 最小部署单元 一组容器的集合 一个Pod中的容器共享网络命名空间 Pod是短暂的 Pod的容器分类: Infrastructure Container:基础容器 -- 维护整个Pod的网络空间 一般这里的pause镜像的作用就是维护pod的网络空间 InitContainers:初始化容器 -- 先与业务容器开始执行 Containers:业务容器 -- 并行启动 2.镜像拉取策略 IfNotPresent:默认值,镜像在宿主机上不存

理解Selection对象

Selection对象的属性如下: var selection = window.getSelection(); console.log(selection); 通过上面的代码在控制台查看: anchorNode: {node} 节点: 包含了用户选取内容的起点的节点. anchorOffset {int} 整型值: 用户选取内容的起点与anchorNode属性值所返回的节点的起点之间的距离. focusNode {node} 节点: 包含了用户选取内容的终点的节点. focusOffset {

[翻译]理解C#对象生命周期

看到网上的一篇讲C#对象生命周期(Object Lifetime)的文章,通俗易懂,而且有图,很适合初学者学习,就翻译过来了.后来发现这是Pro C# 2010 and the .NET 4 Platform的第八章中的一部分.(感谢 大乖乖 提醒).文中的专业名词第一次出现时,括号里会标注对应的英文单词. 请尊重作者劳动,转载请注明出处:http://www.cnblogs.com/Jack47/archive/2012/11/14/2770748.html. ----2012年11月15日修

深入理解javascript对象系列第一篇——初识对象

× 目录 [1]定义 [2]创建 [3]组成[4]引用 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初识对象 对象定义 javascript的基本数据类型包括undefined.null.boolean.string.number和object.对象和其他基本类型值不同的是,对象是一种复合值:它将许多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值 于是,对象也可看做是属性的无序集合,每个属性都是一个