`

(转)Javascript中对象查找的四种方法

阅读更多
原文:http://zn.net.cn/NewsView.aspx?id=89

对象的分类

  所谓对象查找,即在一段可执行代码的作用域内,找到一个当前需要的对象。在javascript中,需要进行查找的对象大致可以分为3种类型:

  1、变量查找,如foo++;,这里就会去查找一个叫作foo的变量。

  2、属性查找,如foo.bar++;,这里会去查找foo这个变量下的一个叫作bar的属性。

  3、this查找,即针对this关键字的处理。

  变量的查找

  当确定一个对象的查找为变量查找后,可以按照变量查找的规则来查看。

  变量查找,即在作用域链上进行查找,作用域链是javascript非常着名的2条链之一,以下代码体现一个标准的作用域链。变量的查找可以简单地遵守“从下向上”的原则,即:

  1、在函数c的范围内查找foo和bar,显然在c里面并没有foo和bar的声明,查找失败。

  2、在包含c的函数,即函数b的范围内查找foo和bar,可以看到b里面只有对foo的赋值,并没有声明,查找失败。

  3、在包括b的函数,即函数a的范围内查找foo和bar,可以找到bar的声明,因此确定bar为2。

  4、由于a不被任何函数包含,那么就在全局作用域内查找foo,发现有foo的声明,因此确定foo的值为1。但是由于在函数b中,对这个foo有赋值,所以foo的值被修改为3。

  5、完确定foo的值为3,bar的值为2,因此输出"3,2"。

  总结一下,变量的查找是延着作用域链进行的,作用域链可以简单地看成函数间的包含关系,被包含的函数中不存在某个变量时,在包含他的函数中查找,直到全局作用域。

  属性的查找

  当确定一个对象的查找为属性查找后,可以按照属性查找的规则来查看。

  属性查找,即在原型链上进行查找,原型链是javascript双链的另一条,属性查找是一个不断寻找prototype的过程,即:

  1、查找c.prototype中,有没有显示定义foo和和bar,发现定义了foo,其值为3。

  2、发现c.prototype就是new b()得到的对象,那么查找b.prototype中,有没有显示定义bar,发现定义了,其值为2。

  3、因此确定foo的值为3,bar的值为2,输出"3,2"。

  总结一下,属性查找是延着原型链进行的,原型链的具体知识这里不作详细解释,可以另找文章进行参考。所有的对象,其原型链最终会是Object.prototype。

  this的查找

  智囊网络深圳网站建设认为,this的查找是很多人迷茫的一点,也似乎有很多人抱有this不稳定这样的看法,实在令人无语。this的查找可以说是3种对象查找中最为简单的,因为其实this对象的确定根本没有一个“查找”的过程。

  首先,this对象只会在一个函数中需要确定,如果是在全局域下,this永远为Global对象,在浏览器中通常就是window对象。而在javascript中,函数的调用一共有4种方式:

  Function Invocation Pattern:诸如`foo()`的调用形式被称为Function Invocation Pattern,是函数最直接的使用形式,注意这里的foo是作为单独的变量出现,而不是属性。在这种模式下,foo函数体中的this永远为Global对象,在浏览器中就是window对象。

  Method Invocation Pattern:诸如`foo.bar()`的调用形式被称为Method Invocation Pattern,注意其特点是被调用的函数作为一个对象的属性出现,必然会有“.”或者“[]”这样的关键符号。在这种模式下,bar函数体中的this永远为“.”或“[”前的那个对象,如上例中就一定是foo对象。

  Constructor Pattern:`new foo()`这种形式的调用被称为Constructor Pattern,其关键字`new`就很能说明问题,非常容易识别。在这种模式下,foo函数内部的this永远是new foo()返回的对象。

  Apply Pattern:`foo.call(thisObject)`和`foo.apply(thisObject)`的形式被称为Apply Pattern,使用了内置的`call`和`apply`函数。在这种模式下,`call`和`apply`的第一个参数就是foo函数体内的this,如果thisObject是`null`或`undefined`,那么会变成Global对象。

  应用以上4种方式,确定一个函数是使用什么样的Pattern进行调用的,就能很容易确定this是什么。另外,this是永远不会延作用域链或原型链出现一个“查找”的过程的,只会在函数调用时就完全确认。

        关于Javascript是继SQL Server 存储过程之后又一心的知识,接下来关于这方面的知识会增加一些介绍和实用的一些方法。
分享到:
评论

相关推荐

    javascript常用对象梳理

    熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY、FRAMESET或FRAME元素时,...

    JavaScript的基础资料(语法,DOM对象模型等)

    JavaScript的基础资料(语法,DOM对象模型等)JavaScript的基础资料(语法,DOM对象模型等)

    【JavaScript源代码】JavaScript中的Proxy对象.docx

    JavaScript中的Proxy对象  Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。 语法 const proxy = new Proxy(target, handler);  target: 要使用Proxy包装的目标...

    javascript获取对象的绝对坐标

    javascript查找对象的绝对坐标,IE、Firefox兼容

    编写可维护的JavaScript(中文)

    《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...

    JavaScript详解(第2版)

     13.2.4 JavaScript对象方法和事件   13.3 处理窗口事件或框架事件   13.3.1 onLoad和onUnLoad事件   13.3.2 onFocus和onBlur事件函数   13.3.3 onResize事件处理函数   13.4 鼠标事件处理   ...

    JavaScript你一定要搞懂的原型链

    当访问一个对象的属性或方法时,如果对象本身没有定义该属性或方法,JavaScript 就会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的末尾(null)为止。 原型链图是用于表示 JavaScript 中对象之间原型...

    微软JavaScript手册

    Global 对象 是一个固有对象,目的是将全局方法集中在一个对象中。 global 属性 返回一个 Boolean 值,标记正则表达式使用的 global 标志状态 (g)。 大于运算符(>) 比较两个表达式,看一个是否大于另一个。 ...

    JavaScript常用对象参考

    很好的总结了相关js的对象 方便你快速查找对其应用

    JavaScript中的Proxy对象

    Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。 语法 const proxy = new Proxy(target, handler); target: 要使用Proxy包装的目标对象,可以是任何类型的对象,包括原生数组,...

    JavaScript中Array方法你该知道的正确打开方法

    在过去的几个月,我发现我的拉取请求中存在四个完全相同的 JavaScript 错误。于是我写了这篇文章,总结了如何在 JavaScript 中正确使用地使用 Array 的方法! Array对象为JavaScript内置对象,具有以下属性: ...

    JavaScript完全自学宝典 源代码

    示例描述:学习JavaScript中的document对象。 8.1.html 得到文档锚点对象数组。 8.2.html 获取并设置cookie信息。 8.3.html 获取文档标记的数组及相关操作。 8.4.html 获取location对象的属性值并...

    JavaScript中遍历对象的property的3种方法介绍

    主要介绍了JavaScript中遍历对象的property的3种方法介绍,本文先是讲解了3种方法并用一张图片加深理解,然后给出代码实例,需要的朋友可以参考下

    Javascript数组操作高级心得整理

    (1) JavaScript对象也是有属性和方法的 15  对象属性的使用 15  对象方法的使用 15 (2) 对象的定义与实例化 15 (3) 对象的作用域 16  JavaScript对象只有公用作用域 16  JavaScript对象没有静态作用域 16 ...

    javascript实现简单查找与替换的方法

    本文实例讲述了javascript实现简单查找与替换的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> <title>中国风</title> <meta ...

    javascript脚本化文档

    这个Document对象是本章的主题,本章从学习Document对象自身的属性和方法开始。这些很有趣,但它们只是开始。 比Document对象本身更有趣的,是那些表示文档的内容的对象。HTML文档可以包含文本、图像、超链接,以及...

    JavaScript王者归来part.1 总数2

     第2章 浏览器中的JavaScript  2.1 嵌入网页的可执行内容   2.2 赏心悦目的特效   2.3 使用JavaScript来与用户交互  2.4 绕开脚本陷阱 2.5 总结   第3章 开发环境和调试方法  3.1 我能用什么来编写脚本--...

    JavaScript笔记

    14.Function:js中一切都是对象,连方法都是1个对象!! 笔试题:js中方法定义集中方式: A:function compare(a,b){return a-b;}---*可以任意地方声明方法* B:var compare=function(a,b){return a-b;} ---| --...

    javascript文档

    Global 对象 是一个固有对象,目的是将全局方法集中在一个对象中。 global 属性 返回一个 Boolean 值,标记正则表达式使用的 global 标志状态 (g)。 大于运算符(>) 比较两个表达式,看一个是否大于另一个。 ...

    isArray()函数(JavaScript中对象类型判断的几种方法)

    1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串。如:”number”,”string”,”boolean”,”object”,”function...要区一种对象类型和另一种对象类型,必须使用其他的方法。如:in

Global site tag (gtag.js) - Google Analytics