JavaScript中的this关键字
2015-07-03 13:33
676 查看
this 关键字在 JavaScript 中既常用,功能又强大,但很多时候容易混淆其指向的对象。下面通过两个例子来理解一下 this 。看第一个例子:
拓展阅读:JavaScript事件中的this :http://www.quirksmode.org/js/this.html
var style = { color: "Window Color" }; var object = { style: { color: "Object Color" } }; function sayColor(){ console.log(this.style.color); } //使用.bind() 改变函数 this 指向 varsayObjectColor = sayColor.bind(object); //调用 sayColor(); //"WindowColor" sayColor.call(); //"Window Color" sayColor.apply(); //"Window Color" sayColor.call(object); //"Object Color" sayColor.apply(object); //"Object Color" sayObjectColor(); //"Object Color"前三次调用时,this指向 window 对象,后三次调用时,this 指向 window.object 对象,其中最后一次通过 .bind() 改变了函数的 this 指向,有关 .bind() 在之后的博客中会进一步探讨。补充:call() 和 apply()通过 call() 和 apply() 可以改变函数调用的上下文,两者功能相同,区别仅仅在于接收参数的方式不同:1. call() 方法第一个参数为函数调用的上下文,其余参数直接传递给函数,传递的参数必须逐个列举;2. apply() 方法第一个参数为函数调用的上下文,另一个是参数数组,可以是Array的实例,也可以是arguments对象。再看一个复杂一点的例子:
var name = "WindowName"; var firstObj = { name: "First Object Name", getName: function() { return this.name; } }; var secondObj = { name: "Second Object Name", getName: function() { return function() { return this.name; }; } }; var thirdObj = { name: "Third Object Name", getName: function() { var that = this; //定义that变量,保存this对象 return function() { return that.name; //通过闭包访问 }; } }; //调用 firstObj.getName(); //"First Object Name" secondObj.getName()(); //"Window Name" thirdObj.getName()(); //"Third Object Name"其中,第一次调用时this 指向 firstObj ,因为 fristObj.getName是一个函数,而它通过 firstObj.getName() 在 firstObj 上下文中被调用。第二次调用时 this指向 window ,因为 secondObj.getName() 是一个函数,而它通过 secondObj.getName()() 在 window 上下文中被调用。第三次调用时,用到了闭包,闭包是指有权访问另一个函数作用域中的变量的函数,在这里通过闭包访问到了 getName 中定义的 that 变量,而该变量中的 this 指向 thirdObj 。有关闭包我们放到下一篇博客中去探讨,博客地址:http://xitongjiagoushi.blog.51cto.com/9975742/1672553最后,总结成一句话,this 的指向是由它所在函数调用的上下文决定的,而不是由它所在函数定义的上下文决定的。 完。
拓展阅读:JavaScript事件中的this :http://www.quirksmode.org/js/this.html
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa