源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

5分钟理解JavaScript中this用法分享

  • 时间:2022-01-02 06:11 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:5分钟理解JavaScript中this用法分享
前言 关于JavaScript中this的用法网络中已经有较多比较详尽的介绍,可以参考本文的参考学习资料和网络。本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助。 正文 1. this用法实例
[u]复制代码[/u] 代码如下:
window.color = “red”; var o = { color: “blue” }; function sayColor(){     alert(this.color); } sayColor(); //”red” o.sayColor = sayColor; o.sayColor(); //”blue”
2. this用法简易理解 this指向哪里: this运行的环境(the context object),或者简单理解为:this所在函数被调用时的当前作用域。 一段实例代码立刻明白:
[u]复制代码[/u] 代码如下:
var fun = function() {     console.log(this); } fun();// console: window,fun 的执行context为window,即this所在函数(fun())被调用时的当前作用域为window。 new fun();//console: fun,fun 的执行context为fun对象内,即this所在函数(fun())被调用时的当前作用域为fun对象内。
3. this用法的一个特殊情况 (1)情况:
[u]复制代码[/u] 代码如下:
<input type="button" id="aButton" value="demo" onclick="demo()" /> <script type="text/javascript"> function demo() {     this.value = Math.random(); } </script>
点击这个button之后,你会发现按钮的value值没有改变。 原因:在本代码运行的情况下this指向的是window对象。
[u]复制代码[/u] 代码如下:
<input type="button" id="aButton" value="demo" /> <script type="text/javascript"> var button = document.getElementById("aButton"); function demo() {     this.value = Math.random(); } button.onclick= demo; </script>
点击这个button之后,程序可正常执行。 (2)原因解释:
[u]复制代码[/u] 代码如下:
<input type="button" id="aButton" value="demo" /> <script type="text/javascript"> var button = document.getElementById("aButton"); function demo() {     this.value = Math.random(); } button.onclick= demo; alert(button.onclick); </script>
得到的输出是:
[u]复制代码[/u] 代码如下:
function demo() {     this.value = Math.random(); }
[u]复制代码[/u] 代码如下:
<input type="button" id="aButton" value="demo" onclick="demo()" /> <script type="text/javascript"> var button = document.getElementById("aButton"); function demo() {     this.value = Math.random(); } alert(button.onclick); </script>
得到的输出是:
[u]复制代码[/u] 代码如下:
function onclick() {     demo(); }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部