this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window;

如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。

我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。

先看一个在全局作用范围内使用this的例子:

  1. 1 < script type="text/javascript">
    2     console.log(this === window);       // true
    3     console.log(window.alert === this.alert);      // true
    4     console.log(this.parseInt("021", 10));      // 10
    5 < /script> 

函数中的this属性是在运行时决定的,而不是函数定义时,如下:

  1.  1 // 定义一个全局函数
     2 function foo() {
     3     console.log(this.fruit);
     4 }
     5
     6 // 定义一个全局变量,等价于window.fruit = "apple";
     7 var fruit = "apple";
     8
     9 // 此时函数foo中this指向window对象
    10 // 这种调用方式和window.foo();是完全等价的
    11 foo();              // "apple"
    12
    13 // 自定义一个对象,并将此对象的属性foo指向全局函数foo
    14 var pack = {
    15     fruit: "orange",
    16     foo: foo
    17 };
    18
    19 // 此时函数foo中this指向pack对象
    20 pack.foo();     // "orange"              

全局函数apply和call可以用来改变函数中this属性的指向,如下:

  1.  1 // 定义一个全局函数
     2  function foo() {
     3      console.log(this.fruit);
     4  }
     5
     6  // 定义一个全局变量
     7  var fruit = "apple";
     8
     9  // 自定义一个对象
    10  var pack = {
    11      fruit: "orange"
    12  };
    13
    14  // 等价于window.foo();
    15  foo.apply(window);  // "apple"
    16
    17  // 此时foo中的this === pack
    18  foo.apply(pack);    // "orange"   

注:apply和call两个函数的作用相同,唯一的区别是两个函数的参数定义不同。

因为在JavaScript中函数也是对象,所以我们可以看到如下有趣的例子:

  1.  1 // 定义一个全局函数
     2 function foo() {
     3     if (this === window) {
     4         console.log("this is window.");
     5     }
     6 }
     7
     8 // 函数foo也是对象,所以可以定义foo的属性boo为一个函数
     9 foo.boo = function() {
    10     if (this === foo) {
    11         console.log("this is foo.");
    12     } else if (this === window) {
    13         console.log("this is window.");
    14     }
    15 };
    16
    17 // 等价于window.foo();
    18 foo();      // this is window.
    19
    20 // 可以看到函数中this的指向调用函数的对象
    21 foo.boo();      // this is foo.
    22
    23 // 使用apply改变函数中this的指向
    24 foo.boo.apply(window);      // this is window.(使用apply)  

转载于:https://www.cnblogs.com/ttcc/p/3748801.html

JavaScript对象中的this属性相关推荐

  1. 检查键是否存在于JavaScript对象中?

    如何检查JavaScript对象或数组中是否存在特定键? 如果密钥不存在,而我尝试访问它,它将返回false吗? 还是抛出错误? #1楼 它将返回undefined . var aa = {hello ...

  2. 【Infragistics教程】在javascript类中添加静态成员属性

    2019独角兽企业重金招聘Python工程师标准>>> [下载Infragistics Ultimate最新版本] 在一个javascript类中创建一个属性的需求,它需要被所有对象 ...

  3. 如何从JavaScript对象中删除项目[重复]

    本文翻译自:How to remove item from a JavaScript object [duplicate] Possible Duplicate: 可能重复: How to remov ...

  4. 如何从JavaScript对象中删除键? [重复]

    本文翻译自:How do I remove a key from a JavaScript object? [duplicate] This question already has an answe ...

  5. 如何通过其值获取JavaScript对象中的键?

    本文翻译自:How to get a key in a JavaScript object by its value? I have a quite simple JavaScript object, ...

  6. 删除JavaScript对象中的元素

    参考http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object 通过dojo ...

  7. java集合按大小排序_List集合对象中按照不同属性大小排序的实例

    实例如下: package com.huad.luck; import java.util.arraylist; import java.util.collections; import java.u ...

  8. js 对象中添加新属性

    js 对象中添加新属性 对象数组添加新属性 同名属性会被覆盖,相同属性会去重

  9. js删除数组对象中的某个属性的方法

    模拟数组对象数据 let newArr = [{title:'小明', id:18},{title:'小红', id:16}] 方式一:(for循环)删除数组对象中的某个属性,如删除id属性 for ...

最新文章

  1. Linux学习之三-Linux系统的一些重要配置文件
  2. TensorFlow基础7-机器学习基础知识(逻辑回归,鸢尾花实现多分类)
  3. 皮一皮:皇上,他在下毒!
  4. 字节 位 比特的关系
  5. SQLite学习手册(C/C++接口简介)
  6. 每天一道LeetCode-----给定序列中2/3/4个元素的和为target的所有集合,或3个元素的和最接近target的集合
  7. Intellij IDEA中安装使用PlantUML画时序图、类图等
  8. Python:常用模块简介(1)
  9. 中国开源年会 COSCon 2018 今起接受报名!
  10. java开发13寸_Java 从入门到进阶之路(二十九)
  11. Java中Spring报错org.springframework.core.annotation.AnnotationUtils.clearCache()V
  12. Win11如何开启聚焦功能?Win11开启聚焦功能的方法
  13. IntelliJ IDEA开发Java笔记
  14. 年长车友的单车游记:骑单车游崇明岛(转)
  15. 什么是FIDO、什么是FIPS浅理解
  16. linux下的ip tunnel workflow
  17. SQL查询按照特定规则排序
  18. 通过,aria-describedby属性,获取元素,并设置样式
  19. 谁发明了世界上第一台电子计算机
  20. Python----Python之禅

热门文章

  1. php的常量和变量的区别,php中常量与变量的区别是什么?
  2. Android笔记-对称与非对称加密及DH密钥交换
  3. Qt工作笔记-对qmake的认识【两篇转载结合】
  4. C/C++中Windows API 简单的(Callback)回调机制
  5. jasperreport转成html,JasperReport chart导出HTML不能显示chart图
  6. cmake 安装mysql5.6_使用cmake在CentOS6.5安装MYSQL5.6
  7. gis里创建要素面板怎么打开_周末技术流 | 基于GIS的地形可视化分析
  8. 全球首个由AI鉴定保驾护航的B2B奢侈品潮品交易平台图灵云仓上线
  9. mysql 1033 frm_MySQL ERROR 1033 (HY000): Incorrect information in file. 处理一例
  10. python语言的三个主要特点_python干货|新总结的4个python语言的特点,这几个细节值得关注...